Design System
I led the design efforts of VolunteerMatch web and mobile by creating a design system to reflect brand identity and make it scalable for the needs of different departments. This visual system led us to quickly design, implement and maintain pages effortlessly.
Purpose:
Save Engineering and design workload, easier for users to adapt.
Process and My Role: Structure & Communicate: Align with team on scope and need Style: Make it easier to maintain with "scale" Components & Templates: Various status, accessibility, and responsive devices Share with team Preparation:
|
My approaches to ease team workflow
- Name UI style strategically - Avoid being too specific or conflict with html tags.
- Use "scale" - Create variants with scale (darken 10%, 1.25 rem) to ease the adjustment.
Approach:
Given that VM is a 24-year-old company, it was crucial to name typography elements meaningfully for both design and engineering purposes. I led collaborative meetings with our engineering team to make sure we nailed down the right names for all the elements.
To emphasize the reduction of engineering implementation time, one of our primary objectives in creating the design system, I proposed the inclusion of easily accessible, copy-ready code snippets within the components. Our VM application pages, particularly the nonprofit dashboard pages, are rich in action-oriented features, such as dropdowns, pop-ups, and links. This effort has significantly reduced engineering workload.
P O R T F O L I O