Redefining the Education Design System

Designers and developers across CZI Education turn to the Education Design System to built their products with efficiency and consistency. In fall 2021, a rebrand was on the horizon and growth of the design system was critical.

While our initial design system was functional, it lacked the flexibility and user-centric features necessary to support rapid development. We set out to ambitiously increase the volume and quality our design system, culminating in a flagship release with the intent to markedly uplift our engineering speed, design excellence and brand ethos.

My Role
Product Design Manager / Product Manager

The Team
Systems Design, Brand Design, Engineering

Company
Chan Zuckerberg Initiative (CZI)

The Challenge

To lead a diverse design systems team through meticulous planning, strategic scoping, and intricate orchestration across multiple disciplines, all while ensuring that the brand’s integrity and design standards remain uncompromised.

Focus + Leadership

Leadership Buy-in + Team Growth

Championed the need to invest in systems to support the rebranding efforts which included identifying strengths and gaps within the team, hiring contractors, and rapidly expanding our team.

Strategic Planning

Developed a comprehensive six month roadmap and org strategy in-line with objectives, all while gaining alignment from leadership and the team at large.

Unified Orchestration

Implemented effective project management frameworks to simultaneously coordinate efforts across EDS design, Brand and engineering disciplines, ensuring smooth transitions and clear communication at every step.

Unlocking Design Systems

With a rebrand on the horizon, the organization lacked a solid strategy for transitioning from a product with minimal brand identity to a cohesive visual language. This pivotal moment presented an opportunity to enhance our team's strength and fully demonstrate the capabilities of design systems, positioning us to pave way for this organizational shift.

Key Focus Areas

This flagship release paved way for a transformative shift in our design culture and overall adoption of the system. During this time, I worked to establish key operational frameworks to ensure we were building a strong base, exceeding operational outcomes and continuously connecting that back to adoption goals.

Laying the groundwork

Simplification through an OOUX Inventory

Identified vital design patterns via detailed OOUX (Object Oriented UX) inventory analysis within the initial 2 weeks. This revealed deep platform insights, fostering unity among elements. Impact transcended design systems and influenced simplification across the entire product.

Semantic Design Tokens

Increasing system scalability and flexibility, foundational token discovery ensured readiness for future branding needs. Shift from our single-tier to the new 3-tier tokens clarified color mapping and together, established intentional naming that bridged design and engineering communication.

Established Collaboration Models with Product

We tackled the challenge of defining roles between systems and product teams. Our approach and process for collaboration were key. Clarity on team interactions led to boosted efficiency and transparency in our efforts.

“With EDS Paper, I Spend less time designing from scratch and more time solving problems through design.”

— Senior Product Designer, CZI

Results

3X Component Growth
Achieved a 3X scaling of our design system components that are responsive and reusable.

Increased Velocity
The revamped system empowered engineers to transition to coded prototypes in just one-third of the former time, drastically accelerating development cycles.

Tiered Token Structure
Deployed a tiered token system for future-proof theming. Fostered design-dev alignment and system resilience through this shared language.

Reusable + Responsive Templates
Implemented reusable layouts for the Education ecosystem. A vital stride towards a responsive and unified learning platform.

Revised Documentation
Revamped documentation site with extensive usage guidelines for internal users. Strengthened onboarding via enhanced 'getting started' section.

Crystalized an EDS Playbook
Crafted Education Design System Playbook to anchor team purpose and amplify system support awareness.

Welcome to /paper

Promoting the work to build excitement and engagement while raising the bar for internal communications.

Next
Next

The Playbook