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.
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.
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
More Design System Components I Designed
Tags
Button Types
Button Colors
Split Button
Drag and Drop List Item
Reorderable List Item
Expandable Cards
Builder Template
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
- 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)
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
- 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
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.
