Design Systems
Design Systems
My Goal
The purpose of a design system is to be the north star for both designers and engineers to create and implement a unified product.
-
Documentation
Centralized communication channel
Leadership buy-in for a team of engineers and UX support
My Approach to Design Systems
Be a team player. The squeaky wheel may get the oil, but also the ire. If knowledge gaps are identified, they are filled and documentation is distributed. A design system, even in it’s infancy, provides consistency that empowers teams to take bigger strides.
my journey in design systems
Measuring sunnova energy MVP Design System Impact
Sunnova DS Usage
The initiative:
Tilt and shift the current experience to consume the MVP design system.
My Role
Product Designer
Tools
Figma
Duration
Sep 2023 - Current
Scaling Systems
With each company comes unique opportunities to implement change. At Sunnova, thanks in large part to the existing team tirelessly utilizing vairables to their advantage, my focus shifted from the details to the value.
By integrating myself as a core pod partner, I was able to showcase the value of the MVP design system. Managing multiple files, states and workshops broadcasted and solidified what our goal as owners of the MVP design system is.
Measuring Hearsay Systems MVP Design System Impact
Hearsay DS: Before
Hearsay DS: After
The initiative:
Iterate and build upon Hearsay’s Design System, HDS; a design system that gives designers and developers the frameworks they need to create engaging product experiences.
My Role
UX/UI Design, Design System Management and Documentation, Accessibility Design
Tools
Sketch (Initial)
Figma (Current)
Duration
June 2020 - May 2023
Feedback from consumers of the design system
“If I hadn’t used the HDS, this would have taken most of the week. I got all this done before lunch.”
brian johnson
Engineering Manager
“I always use the HDS, it saves me so much time.”
elior helose
senior product designer
Managing Internal Language
To avoid the common question,“What are we talking about?”, on the templates I grouped areas of the layout and defined them.
How we got there
Having a design system isn’t enough, the success of the system hinges on adoption.
-
The quality assurance UI Reviews I implemented were essential to keep the overall look and feel of the product consistent as we scaled the design system. These reviews provided opportunities with designers to educate them on how to use design tokens and where to find essential documentation.
-
Due to the nature of design systems being in a continuous state of improvement, managing updates without interruption was key. Working closely with the few engineer resources I had available, we collectively created a list of requirements to ensure our updates were timely, seamless and communicated clearly.
-
Designers are the champions of the design system’s success. Their buy-in was crucial. Advocating for the design system’s consumption early in with their scrum teams set expectations for how the work would be built.
Engineers were the second line of defense. Engineers found immediately value in the design system. “Hours rather than days.” They often encouraged their peers on other teams to use the system whenever possible.
Top Achievements
100% adoption
From grassroots level workshops, to showcasing the value of design systems in company wide meetings, adoption and education go hand in hand.
Fully-Accessible user interface
The new color palette and typography meet WCAG AA compliance alongside education and guidance for UX best practices.
quality assurance process
I created and implemented the UI QA Review process that unified the product visual language.
roadmap for the future
UX improvements were being planned for at the same time of the rebrand. Migration plans were created to adopt the new library for phase 2.
-
Fully documented design system
Quality assurance process
Process created to manage one-offs
Change management communication process
Resource allocation: UI, UX, PM, Eng Manager, Lead Engineer
New rebrand
success criteria
90% of all new pages consuming the HDS
Outcome
100% of teams that could utilize the design system were. Designers were able to finalize designs quickly, engineers were able to implement within hours.