Electron Design System
Problem
The quality, branding, user experience and accessibility across and within the digital products was inconsistent.
Additionally, the process for designing and developing digital products was inefficient with designers on different teams redesigning the same solution and developers recoding the same components.
​
Objective
Solve business problems by enabling developers and designers to build digital products consistently and efficiently.
​
Approach
​Establish and evolve the design system that supports users as they build digital products with quality, consistency and efficiency. Then, iterate based on feedback and measure results.
My Role
Design Lead during the proof of concept and then UX Manager, Design Systems Strategy team
Our approach was to define the key foundational elements such as color, typography and iconography. Then we planned to test the system with product teams, use those learnings to further iterate on the system, and then socialize the system across teams.
-
Collaborated with Branding to create accessible web colors using our company color palette as a starting point.
-
Supplied a cheat sheet to show designers and developers the foreground and background combinations that are WCAG conformant within our color palette.
-
We partnered with the Marketing, the Branding and Products Teams to align on the icon mapping.
-
The Branding team produced the iconography artwork.
-
The Branding Manager and I established a standard workflow for handoffs between our teams.
-
Used the foundational elements to build out the component library including navigation, form elements, buttons, inputs, messages, etc.
-
Collaborated with designers from several product teams, leading cross-team design workshops for our banners, messages and notifications.
-
We leveraged the design system to create a consistent design language and experience across the company's growing portfolio of maps.
-
This was accomplished through a series of design workshops.
10.png)
-
Created a custom documentation site, which included interactive code previews for components, design assets for components along with guidance.
-
Accessible code snippets along with accessibility guidance were included for developers to reference.
