Plexus design system
Summary
Design, development, and transformation of Plexus' e-commerce user experience.
Role
Sr. Manager, UX/UI: responsible for leading and contributing individually on a team of UX designers and content managers in an Agile scrum environment.
Overview
Goals
- Improve user experience and usability of product
- Define interface guidelines, styles, and components
- Deliver a Plexus Design System "style guide"
- Implement process efficiencies to reduce workload and speed-to-market
Strategy
- Perform audit and take inventory of existing brand assets
- Design and develop re-usable system of styles and components
- Build a design library that integrates with the codebase
- Collaborate with Agile teams on implementation and the design-to-code workflow
Results
25% reduction
Resource requirements
WCAG AA
Passing accessibility standards
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.
![Spreadsheet of component audit](https://shcaudill.mo.cloudinary.net/images/portfolio-plexus-design-system-audit.jpg)
Current site audit
![Screenshot of executive presentation](https://shcaudill.mo.cloudinary.net/images/portfolio-plexus-design-system-presentation.jpg)
Executive presentation
![Enrollment flow analytics](https://shcaudill.mo.cloudinary.net/images/portfolio-plexus-design-system-project-breakdown.jpg)
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 colors evolution diagram](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-logos.png)
Brand evolution, simplified
![Color style swatches](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-colors.png)
Main color styles
![Sticky notes on whiteboard](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-interactive.png)
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.
Final designs
Home, Shop, and Checkout
![Homepage screen with content](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-mobile-homepage-content.jpg)
![Product screen with content](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-mobile-pdp-content.jpg)
![Checkout screen with content](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-mobile-checkout-content.png)
Page template mockups
![Homepage screen template with components](https://shcaudill.mo.cloudinary.net/images/portfolio-plexus-design-system-mobile-homepage.png)
![Product screen template with components](https://shcaudill.mo.cloudinary.net/images/portfolio-plexus-design-system-mobile-pdp.png)
![Checkout screen template with components](https://shcaudill.mo.cloudinary.net/images/portfolio-plexus-design-system-mobile-checkout.png)
Desktop homepage
![Desktop screen template](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-homepage-components.png)
![Desktop screen with content](https://shcaudill.mo.cloudinary.net/images/portfolio/plexus/portfolio-plexus-design-system-homepage-content.jpg)