Summer 2024
During the summer, I worked with Girlstart, a non-profit dedicated to empowering girls in STEM, to develop an alumni program. I organized their alumni data and redesigned their website using Figma to create an alumni section. Toward the end of my internship, I transitioned the development process to Girlstart’s website contractor after beginning the implementation of pages on WordPress using Generate Blocks.
Read more about my experience here!
Erica Li — build4good
My Design Process
-
Initial Concepts and Ideation
-
After doing a website audit, several things caught my eye:
-
Color Contrast: some text/elements were difficult to see because the colors were not contrasted enough
-
Page Formatting: the elements were overlapping each other and the layout felt disorganized
-
Navigation Bar: the navigation bar included unused pages and a cluttered structure
Snapshot of the original website
-
I began sketching out different layouts of pages/features and gathering inspiration from other non-profit websites, like the Humane Society of Dallas County. My main priority was to simplify the website to make finding information easier.
- Iteration and Feedback
-
I started prototyping wireframes on Figma, focusing first on the landing page. I began by just reformatting the original design, then I started experimenting with different layouts.
Reformatted original website
Rearranging elements
-
After showing my initial wireframes to the alumni committee, they suggested different categories for the nav bar and started thinking about how they would like to organize information on the website.
- Learning Accessibility
- At our intern convening in Washington DC, I learned about accessible design principles such as color contrast ratios and using alt text for pictures. To apply these, I used a contrast checker on all the pages I had already made and changed all colors that did not pass the test. This was difficult to do because Girlstart’s brand colors didn’t meet contrast requirements. I worked with the marketing manager to adjust these colors to a darker palette while maintaining brand consistency.
Original Colors
Updated Colors + Nav Bar