Back To Work

Enhancing a B2B Design System

This Design System served over 9 Agile teams in designing and building. My team enhanced a low code tool’s default design system, and improved platform consistency by launching a dynamic Style Guide to give designers and developers a source of truth to build from. 

Year: 2022 – 2023

Overview

My Responsibilities:

  • interviews and surveys
  • element nomenclature
  • user-flows, wireframes, visual design, interactive prototypes
  • lead scrum ceremonies

My Team:

I led a Design System team of 3 Full Stack Developers and 1 other UX Designer. Coordinated with Business and Dev Leadership and other agile teams.

Problem

Based on direct interviews with internal workers:

  • Developers had difficulty Identifying the proper components or classes to use, slowing down build times.
  • Designers didn’t easily know what already exists in the design system, causing repeat components to be created.
  • Management’s goal was to have an accessible platform, but the low code builder did not pass legally required accessibility compliance. 

Solutions

2. Enhance Design System

  • Simplify naming conventions and amount of elements.
  • Rebuild components in Adobe XD and the low code tool to improve accessibility.
  • Make our documentation more robust with examples.

2. Launch Style Guide Website

  • Create a site to house design tokens and a component library.
  • Allow devs and designers to search for CSS classes.
  • Make a process for having teams contribute back to the system. 

1. Enhance Design System

Atomic Design in everyday terms

Our DS was based on Atomic Design, but we revised it because developers had a hard time understanding the terminology.

Showing the Difference Between Atomic Design and Adanma's Design System

Simplifying Element Libraries

All teams expressed frustration with the number of element locations.

  • We took inventory of 200 components and planned for only 3 libraries instead of 7, making searching for and categorizing elements faster.
  • This library structure allowed us to better name elements based on their location and use case.

 

Element Naming Visual breakdown

Rebuilding Components

  • Redesigned out-of-the-box low code components to have more variations based on different use cases.
  • Addressed accessibility concerns in the code to make them accessible by keyboards.

Example: Alert Before and After

simple alert example
New Alerts

More Design System Components I Designed

2. Launching Style Guide

Navigation and Base Layout

There was an older version that was based on the low code’s out-of-the-box style guide. We decided to scrap it for something custom and easier to navigate.

Style Guide Before

Old Style guide Design
  • Placed the navigation on the side so people could scan categories faster.
  • Used ‘light’ colors to better fit the overall look of the platform.
  • Added quick links for things people often asked our team to send them.

Style Guide After (MVP)

New Style guide Design

Component Previewer

The old style guide allowed teams to preview and configure the components live, with each option being a real option in the dev environment. It was a bit crowded, so we refreshed the look.

Component Previewer Before

Old Previewer
  • Added a more noticeable section in the top right showing the folder path developers should follow to find the component 
  • Added a button to collapse the options sidebar

Component Previewer After

New Previewer

Documentation Pages

We created a set of components specifically for building documentation pages. Below is a screen our dev was able to build just using the template and components.

Mobile Responsiveness 

Even though teams would not be accessing this guide from their phone, it needed to be respsoive if devs minimize their window while building screens.

Searching through CSS Classes (MVP)

To help familiarize developers and designers with the classes they could use to customize designs, we created a search. When they click on the class name, they see what the CSS is actually doing, and can copy the class name instantly.

Impact and Results: Scaling the System

  • Collaborated with designers and UI Developers to document the process for how teams should contribute back to the design system with a decision tree.
  • As we updated the system each sprint, teams started to convert pages to the new theme, using our updated components. In 3 months, at least 40% of the platform was up to the current theme, as opposed to 20% beforehand.

Takeaways and Room For Improvement

What I learned or added to the project

  • How to design tools for both designers and developers.
  • Did a lot of research on Design Systems and was able to educate others on the benefits and techniques.

What could have gone better or I wish I got to do

  • Streamline the use of Design Tokens and better sync up the naming in Adobe XD and the dev environment.
  • Find a faster way to update documentation. We wanted to display docs in Markup, but it was too complicated for designers to maintain.
Drawing of Adanma with gears