Dominion Energy
Building Dominion Energy's first design system — foundations & scalability
Role
Lead designer
Team
1 Product Manager
4 Engineers
Deliverables
UI Guidelines
Component Library
Dark/Light Theme
Overview
The gap between design and development
When I first joined the team working with Dominion Energy, the focus was more on producing workflow solutions rather than fully refining designs. High-fidelity designs utilized old components from their legacy products, but had limited functionality and a fragmented foundation system. As the product grew, we needed a system to establish and elevate the UI of the past, current, and future designs.
I joined the project halfway when the team's current designer went on maternity leave. Early into the project, I saw the opportunity to advocate and drive the adoption of a design system.
Audit
Old verses new
I ran an audit by collecting and documenting existing components from their legacy libraries in Figma and Storybook. Using Google Sheets, I grouped components into categories: text styles, colors, icons, buttons, navigation, notifications, cards, lists, and other common UI categories, making it easier to remove unnecessary styles and merge similar components. With all of these changes happening, I worked with development collaboratively to build channels of communication across Jira and Slack to map outdated styles and components to new ones.
Visual Foundations
1. Color
Part of Constellation's visual foundation update was to incorporate interaction states like hover and system the color system seen frequently in tag and badge components. To do so required an expanded color palette in neutrals, brand, and accent colors. I pulled primary brand colors from Dominion's Energy brand guide and followed Tailwind's naming convention to easily switch between dark theme and light theme down the line.
2. Typography
There were numerous text styles from their legacy web and mobile products, so I reduced the text styles from 41 to 15 for simplicity and consistency. To maintain WCAG AA text-on-color contrast, I reduced letter spacing and line height in the header and paragraph sizes to maintain contextual scanning.
3. Spacing and layout
I used an 8pt grid system to accomodate compact components for a utilitarian platform like Pyxis. This allowed design to develop UI consistency regarding padding, radius, and margins. For speed and consumer needs, Pyxis is built for desktop only with minimal responsiveness until there is more data articulating the need for breakpoints.
Components
1. Tags and badges
Part of Constellation's visual foundation update was to incorporate interaction states like hover and systemize the color system seen frequently in tag and badge components. To do so required an expanded color palette in neutrals, brand, and accent colors. I pulled primary brand colors from Dominion's Energy brand guide and followed Tailwind's naming convention to easily switch between dark theme and light theme down the line.
2. Modals
The previous modal did not have inline scrolling or vertical max-height within the viewport. To mitigate this, I worked with the lead developer to build the modal in 3 parts: title, body, and footer to ensure inline scrolling should content exceed the viewport limit. The title and footer remained fixed and sits on top of the body content.
3. Tables
Working with the development team, we updated the table to accomodate fixed cell components including tags, checkboxes, text links, and buttons. Previous iteration of the table component was built with fragmented atomic components, limiting design and user capabilities. Tables are an integral component of Dominion Energy, housing system and data entries for business and internal consumers.
Future
The work continues
Moving from a fragmented component library to an async design system required time, culture building, and technical expertise. Before my contract was up, here are a few things that were discussed with engineering during this transition.
Present
Closing the gap
I worked with engineering to establish a dedicated Jira board and Slack channel to internally communicate with designer future component changes and surface UI guidelines via Jira tickets.
Future
Adopting color theming tokens
Color tokens have been defined in Figma variables, but require active collaboration with engineering to adopt a semantic naming system. This is a much later step once dark theme becomes prioritized.
Thoughts
What I learned
Creating a foundational design system required a lot of forethought and discussion with developers. In hindsight, this being my first design system project, I would spend more time auditing collaboratively and take a "Marie-Kondo" approach to tidy and discard unwanted styles and components. This would lead to a more long-term approach of establishing a component library, guidelines, then a coded system with semantics. Overall, this project was a great learning experience and imbued a love for detailed design systems.