Education Design System (EDS)

OVERVIEW

I joined the refreshed EDS team as the first designer to rebuild a system that had lost trust among designers. Our mission was to reestablish confidence in the design system, aligning it with a new brand and making it intuitive, collaborative, and efficient. I led the system’s documentation and supported the Lead Systems Designer in designing specs.

TEAM

Product designer (me), Senior Systems designer, Front-end engineer

COMPANY

Chan Zuckerberg Initiative

STATUS

Live internally at CZI

Fig: A gallery of EDS components (L to R) input field, checkbox, menu, tooltip, toggle and toast notification

Impact of EDS

EDS 2.0 brought immediate cohesion and consistency across products and a faster pace of iterative and early design work. The governance process we set up encouraged collaboration, giving designers early visibility into the system. Our approach went beyond designing components and patterns; we developed a release cadence centered on the product team’s needs to make EDS flexible, intuitive, and reliable. By addressing workflow challenges and creating documentation, EDS helped the organization deliver multiple product MVPs within the first few months of launch.

What went into building EDS?

  1. Audit of CZI Education products
    Conducted an audit of CZI’s education products to identify commonly used components, gaps in the design system

  2. Component prioritization
    Matched audit findings with the existing design system and prioritized components that were heavily used, ensuring alignment with product needs

  3. Roadmapping
    Developed a roadmap for component releases, sequencing them based on priority and aligning with product timelines. Integrated any new component requests that emerged along the way to ensure the system’s responsiveness to evolving needs.

  4. Component Spec Design
    Designed detailed specifications for components, ensuring consistency, accessiblity and adherence to design standards.

  5. Documentation Development
    Created comprehensive documentation to support designers in understanding and effectively using each component.

  6. Feedback and Critiques
    Regularly sought feedback from the design team, frontend engineering, and other stakeholders through design critiques.

  7. Component QA
    Collaborated closely with the engineer on component quality assurance to ensure accuracy and usability.

  8. Figma Library Delivery
    Delivered a complete design system library with evolving components, patterns and guidlines