ROLE
Product Designer
IMPACT
Design system for 200 websites, apps, and data projects for nonprofit organizations.
TEAM
Product Manager
Product Designers
Frontend Developers
DURATION
May 2021 - April 2022
Project Overview
We built the company's first Design System from the ground up, collaborating with three Product Designers, Frontend Developers, and a Product Manager. The goal was to streamline design work and meet the needs of 200 diverse clients efficiently.
Project Overview
My Role
At Develop for Good, I took ownership of designing and managing navigation components and their variations across desktop and mobile platforms. I ensured these components were not only highly functional but also accessible, meeting the needs of a diverse range of clients' websites and apps. By closely collaborating with designers across various client projects, I developed tailored solutions that aligned with specific client requirements. I also worked hand-in-hand with a frontend developer to guarantee seamless integration and consistency in component usage, driving a cohesive and optimized user experience.
01
Research
Talked to Designers to understand their needs and the clients' needs for their websites and mobile applications. Since my focus was on navigation, understanding the information architecture helped me identify the best navigation patterns for most of our clients.
​
CHALLENGE: At Develop for Good, I solved the challenge of designing custom navigation components for global non-profits, even when clients had specific UI visions. By joining client calls, I ensured their navigation needs were met effectively.
02
Design
Scalability and accessibility in mind. As this was the first design system, the design phase focused on defining a new visual language. The team and I each created various conceptual visual designs to present to stakeholders. I took into account on designers' needs, created compoets that could be adapted into themes for each design team.​
​
ACCESSIBILITY: Accessibility is always on my top priority. We used "Contrast" on Figma and follow WCAG guidelines to ensure the new design system meets the accessibility standard at every stage of development.
03
Design System Documentation & Handoff
In this phase, the team and I collaborated to organize all finalized components in Figma. Before the handoff, I documented the entire design system and usage guidelines for the designers. We also worked closely with PMs and development teams to ensure a smooth implementation process, addressing any issues or adjustments needed as the designs were translated into code.
