NYC Women in STEM
Communicating Core Values Through Branding Design
NYC women in STEM is an independent organization that creates communal spaces for women working in science, technology, engineering, or mathematics. They foster the women in STEM community by hosting women-only bookclubs, panel discussions, and casual outings.
Branding
Design Brief
The target audience for the website was professional women in STEM and allies looking for various resources—from events, mentors, to grants. The scope of the project was responsive website design and development, a custom CMS for events and blogging, and an extensible design system. The website should balance professionalism and playfulness.
Typography
I chose Barlow SemiCondensed, a decisive and highly-readable sans-serif font, and added a monospace font for both design and utility purposes. DM Mono was both crisp and elegant, and had a boxiness that contrasted the narrowness of Barlow SemiCondensed.
Color
I was inspired by the colors found in Ethan Schoonover's solarized, a palette of dark and warm desaturated blues punctuated by bright colors.
Logo
In both wording and symbolism, "WE" sends a powerful message of unity. These letterforms were modified from DM Mono Italic. I replaced the "E" with the Sigma symbol which can be found across 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 used JSON Web Tokens (JWT) for authentication, EmailJS for the contact form, and Quill for rich text editing.
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 to the website.
Vote Feature for Community Input (Update April 2023)
As the organization grew, the organizers wanted a way to collect feedback from active members. To solve for this, I implemented a vote feature. It was built primarily for NYC Women in STEM's book club, but as the organization grows, new vote types can be created. For this feature, I mapped out UI and Database interactions in Figma before designing the screens. Once I was satisfied with the designs, I coded out the pages and the backend APIs.
