New Engen Design System

Research

Existing System Audit

The design system work up to the point I took over was primarily based on IBM Carbon design system. Many of the components were just placeholders and never introduced into our platform; other components were used but never standardized. During the first stage of research, I worked with the design and engineering teams to fully audit the existing system and answer the following questions:

• Component inventory - which components were being used, which were not?
• Consistency of application - to what degree did components and styles in the product adhere to the system?
• Gaps - what are the missing or incomplete components?

Comparative Research

As a small team with limited resources, it was important that we build on the work of other well constructed design system efforts. In conducting research, I prioritized libraries that shared some commonalities with New Engen's product and user base.

• Enterprise, B2B, SAAS products
• Marketing or marketing adjacent

This research helped us to identify concepts that we would need to include in the system, design patterns that were important to enterprise marketing users, and organizational heirarchies that we could use to structure our work.

Tooling Analysis

During the initial phases of this project, I also decided to analyze how we were using design tools and whether our current set of tools could meet our needs effectively. Specifically, the things I was focused on were:

• Cost
• Ease of collaboration
• Industry trends

I researched Abstract for Sketch, Invision's Design System Manager and Figma for potential solutions. Ultimately, based on these criteria, I made a recommendation and we decided to migrate to Figma.

Design Priciple Synthesis

The ultimate goal of the research phase of this project was to synthesize a small number of design priciples that we could use to guide our work through implementation. Through discussing research findings with other designers, engineers, and product stakeholders, we were able to come up with three rules to live by.

Build only what we need

As a small product team, we wanted our main focus to be on building features. The design system would be augmented and iterated on only as product needs required. Additionally, we learned that speculative designing for theoritical future use cases often resulted in unused work or work that made bad assumptions. By building only what we need, when we need it, we could avoid this wasted effort.

Make color matter

Our users are trying to do their job and have complex workflows. Our visual design should work to simplify those workflows and not distract. Therefore, color and other "loud" visual design is only used when it has an explicit purpose.

Accessibile design

In much of our original design system, accessibility was an afterthought. This manifested in ways that impacted all users (insufficient color contrast, small font sizes, etc). It was important to our entire product team that our product not exclude potential users with permanent, temporary, or situational impairments.

Process Improvements

Cross-Functional Design System Team

With the support of the Director of UX, I was able to allocate some of my own time on an ongoing basis to this effort. Likewise, I met with the engineering team and identified a point person and a few others that were interested and could contribute.

Communication Touchpoints

With a team of contributors and stakeholders identified, we needed a forum to discuss implementation and iteration. I created two channels for these discussions:

• A weekly sync to run through open questions and identify next steps
• A Slack channel for async and ad hoc decision making

System Iteration

In order to fully embrace our "only build what we need" principle, I created a process that the team could follow when evaluating new components or component iteration opportunities.

The System

Aritfacts

Based on some of the work in Brad Frost's Atomic Design, I decided we would structure our design system into Styles, Components and Patterns which closely mirrors atoms, molecules and organisms in his book.

This organizational structure would then be consistently applied to the following deliverables:

• Shared Figma library used by the UX team to create high fidelity designs
• Centralized documentation that would act as a single source of truth for design and engineering
• Front end library in Storybook

What follows is a sampling of each of these concepts in the new New Engen Design System.

Styles

Components

Patterns

Impact