The Xcel Energy Design system on Invision DSM
Building a Design System
Xcel Energy Design System (XEDS)
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.
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.
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.
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.
Secret Code: carbonfree2050
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.
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.
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.
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.
Governance Team Operations
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.
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.
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.
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.