Plexus design system
Summary
Led the creation of a reusable design system for Plexus' e-commerce experience, improving consistency, accessibility, and delivery efficiency.
Role
Senior Manager, UX/UI: Led design strategy and the UX/UI team while contributing directly to the audit, system architecture, component design, accessibility, and rollout.
Overview
Goals
- Improve consistency and usability across the e-commerce experience
- Establish shared UI foundations, components, and accessibility standards
- Reduce duplicate work and improve delivery efficiency
Approach
- Audited the existing brand, UI, and development stack
- Defined reusable foundations, patterns, and components for design and code
- Created shared design-system documentation and worked with Engineering on implementation and adoption
Results
25% reduction
Resource requirements
WCAG AA
Passing accessibility standards
Final designs
Home, Shop, and Checkout
Page template mockups
Desktop homepage
UX process
Discovery
The project team identified goals, technical limitations, and processes. With approval obtained, the team set forth with an audit of the current design and development stack. Documentation was soon prepared, and Agile ceremonies began.
Current site audit
Executive presentation
Agile scrum project (Jira)
Design
The design system was crafted to include a more modern and aspirational look-and-feel. Foundational styles were updated, reducing emphasis on the non-interactive interface to highlight new content and the primary interactive elements.
From a technical standpoint, the team elected to remove Bootstrap and leverage Google's Material design components and the React framework. All styles, components, and coding passed WCAG AA standards.
Brand evolution, simplified
Main color styles
Primary interactive elements
Build
With design assets ready for development, prototypes and the documentation site took form. A presentation of best practices was prepared and shared with executives and stakeholders announcing the launch.
Iterate
The Plexus Design System remained an ever-evolving collection of styles, components, and content. Frequent updates were made, analyzed, and iterated upon.