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.
  • Design for everyone not just for designers. 
  • Incorporate front-end coding skills
  • ​Consider readability and navigation

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:
  • Align scope and share knowledges with engineering, product and other stake holders. 
  • Talk with developers in depth to be sure everyone understands "how" we are building design system.
  • Talk with other "users": How's their experiences with design systems and specs?​​


​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