Design System Creation
Crafting a Design System from the ground up.
My Role
Lead designer
Interaction designer
Visual designer
Team Leader
Product Owner
Tools
Sketch
Invision
Figma
Product Type
Web App
Client /
NWEA (now HMH)
Overview
To address fragmented user experiences and inefficiencies across development teams, I conceptualized and built a company-wide interaction style guide, then evolved it into a fully accessible Design System. This system became the source of truth for scalable, consistent, and accessible design, reducing development time while significantly improving usability for millions of users.
Problems
1. Inconsistent User Experiences
With over 10 departments creating content, UX inconsistency led to confusion and inefficiency.
2. Lack of Cross-Team Alignment
Teams worked in silos, resulting in misaligned design patterns and fragmented branding.
3. Inefficient Development Workflows
Lack of reusable components created redundant work, slowing down releases.
4. Limited Accessibility Standards
Products lacked consistent accessibility implementations, making them less inclusive.
Opportunity Statement
Inconsistent design and development practices across products lead to fragmented user experiences, extended production times, and accessibility gaps. By establishing a universally accessible design system, we can do the following:
Streamline workflows
Enhance cross-team alignment
Ensure adherence to WCAG accessibility standards
Deliver a cohesive, scalable user experience
The MVP
The first iteration of the design system focused on essential components and workflows:
01.
Core UI components
Slide deck, for cross-dept. collaboration session, outlining the components to be created first:
02.
Accessibility integration
Designed with accessibility in mind
03.
Guidelines for design consistency
Cross-department alignment is crucial for a unified experience.
​
04.
Reusable code assets
Accelerate development cycles
Evolution & Growth
Executive Buy-In
​
Presented strategy to
the C-suite, securing top-down engagement
​
Scaled Accessibility
​
Partnered with a11y advocates to embed accessibility across components
Built Interactive System
​
Developed robust DSM using for seamless integration into design workflows.
Long-term Impact
Teams saved 30% in design and development time while significantly enhancing user experience consistency across domain spaces, products, and brand.
A Major Maturity Milesone
By leveraging modern interaction patterns, accessibility compliance practices, reusable code snippets, and company-wide communication tools, the creation of the design system marked a major milestone in the company’s design and development maturity.
