Design Systems
The following case studies are featured from Sunnova Energy and Hearsay Systems.
My Role
Design System Owner
Applied Tools
Claude Chat/Code, Figma/Make, Dovetail, Confluence, Sketch
Completed Features
DS Audit
UI Kit
MVP Design System
Contribution Governance
Depreciation Governance
Duration
June 2020 - October 2024
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
The Requirements
Documentation processes
Centralized communication processes
Leadership buy-in for a team of engineers and UX support
The Problem Statement
Identifying Risk and Barriers
Lacking a properly utilized design system creates design-debt, tech-debt, accessibility re-writes, and hours of wasted ROI. Leadership can only fix what they understand, and changes cannot come at the cost of interrupting momentum.
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 team partner, I showcased 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.
Utilizing AI tools like Claude Chat and Claude Code makes creating systems that can mature and scale alongside Marketing’s branding promise for a truly cohesive experience that allows teams to personalize and create distinction.
Value propositions like true design to engineering parody, providing time to resources to tackle larger projects that incorporate an entire product suite. This is especially useful in cases like Rebranding.
Having a design system isn’t enough, the success of the system hinges on adoption. Adoption hinges on clarity of the added value.
Measuring Design System Impact
Before
After
“If I hadn’t used the HDS, this would have taken most of the week. I got all this done before lunch.”
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.”
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.
Notable mentions
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. Creating comprehensive bottom up plans to ensure from multiple role-perspectives that any changes do not create debt or introduce risk.
Customizing Governance plans by hand is now time spent with design leads to fully understand how design systems need to scale. This lends more time for workshops to identify how we, the collective design system users, engage now and in the future.
As teams scale worldwide, the ability to onboard and understand how to get up and running cannot be hindered by lack of autonomy. Knowing when and how to utilize tools and team mates is what creates systems that scale alongside the needs of the company and its users.