Design
Systems
Who is this serving
Sunnova Energy International Inc.
Hearsay Systems Inc.
What the goal is
Iterate and build upon a design system that gives designers and developers the frameworks they need to create engaging product experiences.
Success Criteria
90% of all new pages consuming the Design System
-
Documentation
Centralized communication channel
Leadership buy-in for a team of engineers and UX support
My Role
Design System Owner
UX/UI Design
Design System Management and Documentation
Accessibility Design
Tools
Sketch (Initial), Figma (Current), Confluence, Slack
Duration
June 2020 - Oct 2024
How I got there
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.
Having a design system isn’t enough, the success of the system hinges on adoption.
Measuring Sunnova Energy MVP design system impact
Sunnova DS Usage
Measuring Hearsay Systems MVP design system impact
“If I hadn’t used the HDS, this would have taken most of the week. I got all this done before lunch.”
Hearsay DS: Before
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.
-
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.
“I always use the HDS, it saves me so much time.”
Hearsay DS: After
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
Growth
With AI powered tools, the ability to create a customized system really depends more on how the design team properly utilize a design system at scale. Token creation which used to be tedious now needs review to ensure it’s accurate.
This lends more time for workshops to identify how we, the collective design system users, engage now and in the future.