NYC Women in STEM

Communicating Core Values Through Branding Design

NYC women in STEM is an independent organization that aims to support and empower women in the fields of science, technology, engineering, and mathematics. The organization hosts monthly events that revolve around on workplace related themes, STEM issues and leadership, providing a platform for women to share their experiences, learn from one another, and build a sense of community through open discussion and networking.

Branding

Design Brief

The website was for professional women in STEM as well as allies and young women looking to get into STEM. It is envisioned as a one-stop-shop safe space to find resources like events, mentors, grants, and legal resources. Since the organization is still in its early stages, there are a lot of unknown assets. The scope of the project included website design and development, custom CMS integration for events and a blog, responsive web design, an extensible design system that is flexible enough to accomodate a variety of digital media use cases, and social media templates. Organization members emphasized dissociating from stereotypical colors for women like pink and reds, and instead capturing a bolder attitude that balances seriousness and playfulness.

Typography

I chose Barlow SemiCondensed for both display and body text, as it looks just as good in all caps on the landing screen as it does in articles. It looks sleek and decisive, thinner rather than boxy, and also highly readable. Since working with computers is common to most STEM fields, I wanted to a monospace font for both design and utility purposes. I landed on DM Mono, which shapes are crisp and elegant, and which boxiness contrasts nicely with Barlow SemiCondensed.

Color

A system of dark tones destined for the website conveys professionalism, and is accented by a bright palette that adds vitality and counterpoint. Color choice was inspired by the dark mode of code editor color theme "solarized," a palette of dark and warm desaturated blues punctuated by bright colors. The final color palette for NYC Women in STEM leans toward the cooler spectrum, offering different shades for each accent color and assigning semantic values to each colo

#021828

#062948

#0C4167

#0095FF

#6F8FFF

#91D65B

#DCDF3D

Logo

In both wording and symbolism, "WE" sends a powerful message of unity. The letterforms were modified from DM Mono Italic. A Sigma symbol stands in for the "E", representing the STEM fields.

Web Design

Development

Technology Stack

I developed this project using Nuxt 3, Pinia, and Tailwind CSS. For the backend, I used Node.js, Express, MongoDB, and AWS S3. I deployed the frontend on Netlify and the backend on Cyclic.sh. I used JSON Web Tokens (JWT) for authentication, EmailJS for the contact form, and Quill for rich text editing. The Multiselect component is by Vueform.

Highlighted Features

Custom Content Management System (CMS)

The organization needed a custom CMS to easily update their website content, especially for events and blog posts. They also wanted to add event photos after the events.

To accomplish this, I built a CMS that can handle events and blog posts. Admins can access the CMS via the same URL, after logging into the secure system protected by JWT (JSON Web Tokens).

The event management page was presented as a user-friendly form with fixed parameters, while the blog editor was created by customizing QuillJS, a text editor library, to provide a flexible content creation experience for admins. Both editors had image upload functionality to AWS S3, and data entries were stored in MongoDB Atlas.

Within just five months, the monthly book club has seen a 100% increase in participation, boasting a record attendance of 22 members at the March 2023 meeting.

Vote Feature for Community Input (Update April 2023)

As the steady membership for the book club grows, the need arises for a way for organizers to gather feedback to inform decision-making, and for active members to input their opinions. The vote feature was conceptualized as a result, a basic CRUD app on the organization website. It is built primarily to serve book club purposes, but as the organization grows, new vote types can be created.

I first conceptualized UI and Database interactions in Figma through a user flow, then designed the new screens in Figma. Once I was satisfied with the designs, I coded out the frontend pages, as well as APIs.