EA_DesignSystem_Hero

Echo needed to overhaul their internal Transportation Management System (TMS) rebuilding it from scratch. A goal of this new system “Accelerator” was to avoid some of the short sighted decisions of their legacy TMS and make sure it was scable for the future. After my experience at Nielsen on their design system “Atlas” I was brought into Echo to help establish a scalable Design System for the Accelerator TMS.

Research

Many design systems have the challenge of aligning many current designs into one system. We had the unique advantage and challenge of creating a design system for a product that did not exist. Luckily the internet was rich with information on how to embark on creating a design system, as a first step I began researching best practices through landscape analysis.

LandscapeAnalysis

Business Process

We proposed that the Design System be treated like it’s own product. It was important that we had the same collaboration between Product Owners, Developers, IT Leadership and the UX Team that exists when creating a product. That collaboration would assure buy in, progress and scalability. The proposed process workflow is represented in this diagram.

Design-System-Workflow

Every product needs a backlog. We knew we wanted to tackle the system one component at time. We studied the components in other design systems and prioritized components based on our current needs and upcoming needs within the product work already happening in the TMS.

Accelerator-Components-Backlog

Design Process

As a team we decided to base our system on Google Material. So our first step was to understand the material component, then we compared that component to other design systems. Through this we drew up the requirements for our component and got to work iterating on the component. Through peer designer review, collaboration with developers and many rounds of iteration we came to a final design for each component.

Alert-Process

Project Outcomes

To date we are about 50% through the backlog of Components. Working closely with the Front End Dev team we decided to use the tool Storybook to catalog built components. Process and documentation has allowed us to design and build faster. 

Alerts
Buttons
Color

Tools Used

AccDS_Tools_Used

Let's get in touch!  laurenruggeri@gmail.com