Melanie Seifert
Senior UX/UI Designer, Design System Librarian

Building a Design System

Xcel Energy Design System (XEDS)

Image alt tag

Transforming the Customer Experience

Hired by Xcel Energy to work as a Senior UX/UI Designer in the fall of 2019 to join their Experience Design team was an amazing opportunity to help support efforts on the Customer Experience Transformation (CXT) project.

The CXT Project had started a year prior to my employment and was comprised of approximately 8-10 project teams with over 200 members with the common goal of not only re-platforming most of our architecture and services but also re-designing to improve the overall user experience.

I had previous experience building design systems at both a small start-up (Apruve) and a larger corporation (Ameriprise) and was really excited to lead the effort to formalize our Brand guidelines for our digital channels into a scalable design system that would be the source of truth across all of our digital internal and external platforms and mobile applications.

Getting Started
Building a Design System

Initial Assessment

To start, we had a PDF of Brand Guidelines that were specific to digital print media, an out-dated Frontify site, and a Sketch file from the first web application that was released by the CXT project.

The symbols in the initial Sketch library were not built to consider overrides and use smart layouts. Designers were actively referencing this library to continue building designs and we needed to move fast to try to get in front of the work.

XEDS 2.0 was released into Abstract with updated naming conventions, aligned with our digital brand guidelines, and organized according to Atomic Design principles to designers within my first month as Design System Lead.

Sharing the Library

The initial Sketch library was controlled by one individual and distributed via Email. Documentation was shared via a generated PDF.

I recommended investment for team license for Abstract to allow for the team to link to Sketch libraries and also serve as a much more efficient way to share and backup our project team sketch files with consistency.

Designers were onboarded and trained on how to use Abstract and link to the Design System library. Rough documentation on patterns were started within Confluence along with basic workflows on how to begin contributing work to the design system.

Governance & Maintenance

With the CXT Project continuing to churn through work, the design system's primary goal was to consume any and all baseline (atoms) patterns that it could. As the design system matured, I realized that it was time to organize a governance team to curate the patterns that were being contributed.

It was important to bring in subject matter experts within our Experience Design Team to be able to identify and satisfy all areas of concern across Accessibility, Content Strategy, UX Research & User Testing, and UI Design.

The XEDS Governance Team also became ambassadors for the Design System. As a shared resource, I don't always have visibility into the work of our individual project teams. If this design system was going to continue to evolve and grow, it becomes critical to continue to identify and encourage contributions and adoption.

The Xcel Energy Design system on Invision DSM

The Xcel Energy Design system on Invision DSM

Single Source of Truth

Frontify proved to be a good tool to start, but the content was vastly outdated and I to be able to maintain documentation as effortlessly as possible during my regular work flow -- plus, it was tied up in a legal review.

After testing out ZeroHeight, which had a great plugin that worked well with Sketch, Invision announced their new Design System Manager (DSM).

We were already using Invision (and the Craft plugin) for prototyping and development specifications and our license had already passed a harrowing legal review which was a great selling point for additional licensing on a tight timeline.

Familiarizing myself with Invision DSM under the free licensing, I began testing out the plug-in integration, learning how it shared Sketch libraries and assessed the functionality of it's documentation capabilities.

This "prototype" of Invision's DSM capabilities became the focus of a proposal to leadership for licensing, which was well received and approved in December 2020 and the documentation was immediately available for users.

https://xcelenergy.invisionapp.com/dsm/xcel-energy-services-inc/xeds

Secret Code:  carbonfree2050

Accessibility Guidelines

Currently facing litigation, Xcel Energy has made accessibility a top priority across all of their digital channels.

Working closely with our ADA consultants to capture the necessary WCAG 2.1 Guidelines around all of our components and insuring they have undergone review, as they are adopted into the design system, provides a documentation trail for leadership to feel confident that we are working to meet our legal obligations.

ADA guidelines provides a "source of truth" for our developers and testers and saves our ADA consultants time from having to repeatedly document this as the information is documented at a component level.

Content Guidelines

Upon researching other well-known design systems (IBM's Carbon Design System, Google's Material Design), I began to realize that there was a gap in some of the documentation and guidance.

Together with the Content Strategist on the Experience Design team, I established a workflow to document some basic content guidelines around each of our patterns establishing a consistent and familiar voice for our customers.

This information is invaluable for our Designers and Digital Content Management team.

XEDS Strategy
Guide users to tools and reusable patterns to create consistent, branded user-centered experiences all journeys and platforms.

Showcase Xcel Energy Design System's future vision with evidence of ongoing progress, and invite its users to join in the effort.

Planning the MVP

As the design system began to evolve, formally documenting and planning an MVP helped to define the design system's strategy, solidify the goals and define what the Governance Team would be accountable for.

Defining Our Stakeholders

Defining our stakeholders, the Governance Team and I were able to assign roles and levels of contribution and access.

Architecture

Initially, I was using one (large) Sketch library to store all of our patterns and symbols in Abstract. Adopting a multi-file approach has allowed for ease of maintenance and organization and provides a good structure for future scalability.

XEDS Jira Board

XEDS Jira Board

Governance Team Operations

The Governance Team collaborated to establish a workflow and review criteria we would leverage for all new and existing pattern reviews.

Designers are able to submit new patterns through a "Governance Review" story which are reviewed during bi-weekly Governance Team meetings.

Establishing our workflow in Jira allows us to track efforts and decisions that are made with regard to our patterns. These decisions can be cross-linked by other related stories to provide additional information as patterns are leveraged by individual project teams or by our component developers.

Product Owners and Designers can view the status of any global components and the development effort associated with them.

Nurturing a Living Document

The MVP

I am incredibly proud of what I have accomplished and learned over the past year as I have taken lead of our enterprise-wide Design System at Xcel Energy.

Lessons Learned

  • Organizing a design system solely around Atomic Design principles has a learning curve. Defining atoms is clear, but the line becomes blurred and open to interpretation when it comes to molecules and organisms. Designers struggled to find the patterns they needed.

  • Product Owner and Leadership need to be on board to prioritize the proper build-out of global components and documentation before components are leveraged. Rushed timelines and release deadlines have created a lot of tech debt and inconsistencies.

  • Having a liaison that leads the development effort on project teams would help with on-boarding and global component adoption rates.

  • Tap into your subject matter experts where you can. It is impossible to know "everything" and it encourages participation and ownership.

I am grateful to have the enthusiasm and support of my Experience Design team members and Leadership. XEDS would not be where it is today through my efforts alone.

Future Goals

As we continue to grow, my vision for the design system is to

  • Continue improving and filling documentation gaps.

  • Improve socialization of the design system with other organizations in the company.

  • Consume more native mobile patterns and documentation for implementation outside of the CXT Salesforce platform.

  • Establish better on-boarding and utilization by developers across the CXT Project teams.

  • Document baseline CSS and semantic HTML structure of existing patterns.

  • Implement feedback gathering mechanism for metrics.

114
components and growing
300%
growth over 18 months
8
active contributors
100
cups of coffee
"Melanie brings a common-sense approach to design that is combined with a superior work ethic and desire to do right by both our customer and our stakeholders."
Scott Caruso, Senior UX Researcher