Sincro
Design System
MY ROLE
Design Systems Designer
DURATION
6 months
COLLABORATORS
6 UX Designers
2 Engineers
TOOLS
Adobe XD
Storybook
Sketch
Project Overview
The absence of a cohesive design system resulted in a fragmented and off-brand user experience.
A company called Ansira acquired CDK Global’s digital marketing business including all advertising solutions as well as a proprietary content management system (CMS) that catered to the automotive industry. The company was rebranded as Sincro.
Who is Sincro?
After the acquisition was finalized, the engineers swiftly began integrating Sincro's logo, brand colors, and typography into the CMS, also referred to as Website Manager (WSM). At the time of the acquisition, WSM was undergoing an early-stage codebase refactoring to React.
To further complicate matters, Sincro made the switch from Sketch to Adobe XD, which left its team of designers striving for design cohesiveness, feeling anxious about adapting to a new tool, and strapped for time.
Problem
As a web designer at CDK, I was a subject matter expert for WSM. Not only did I excel at designing websites for clients, I trained over a hundred designers how to use the platform. I later transitioned into a UX designer role. I worked with the Config team’s product manager and developers to improve WSM. I advocated for design consistency and the use of components for every feature release.
The acquisition was the perfect opportunity to dive into the world of design systems and lead the initiative in creating a brand-new design library.
After presenting a project charter and timeline to the head of design, the green light was given.
My Role
Goals
Use Material Design’s UI Kit instead of starting from scratch. Update colors and styles to match Sincro’s brand. Remove unnecessary components. Create a list of the components that will need to be added.
1. ) Establish a starting point
2. ) Create and facilitate a training
Compile online resources and create training material to facilitate a 2-day workshop with designers to train them in everything they need to know to be able to contribute the remaining components to the UI kit.
3. ) Build and QA UI kit components
Work with the designers to build components and ensure quality by implementing a thorough QA process. (Check for consistent styling, proper use of nested components, naming conventions, file organization, etc)
Sync regularly with engineering to ensure the design components match the coded components paying special attention to naming conventions and organization of colors, typography, and components.
4. ) Align with engineering
Material Design
Sincro UI Kit
I chose to start with a UI kit and adjust each component as needed to save time and resources.
1. Material Design’s Light Theme UI kit
2. Integrated Sincro brand colors
3. Updated styles, states, and naming conventions
Component Creation
As I updated all of the components to match our standards, I compiled resources and created documentation to teach the team. After leading a 2-day workshop the designers were ready to build and QA components to contribute to the design system.
A few of the component contributions from the design team
The Configuration Panel
The website builder’s configuration panel is where users spend a lot of time adjusting the design properties and settings of their site.
I audited different workflows to account for all of the variations of the panels. I collected screenshots of each panel and then identified the categorized components and their variations. You can see the inconsistencies that we were dealing with.
There were 31 panels in total.
Any new release would require a new panel or updates to existing panels. However, due to the absence of a design system and governance, various designers and developers ended up creating new panels independently, resulting in a snowball effect of inconsistencies.
The team unanimously agreed that moving forward, panels will be constructed using React components.
(Right) Panel audit (Left) Grouping related components from audit
I re-designed all 31 panels. A backlog of tickets was created for each of the panels. When a new feature was released, the developers had the mocks they needed to build out each right panel.
Panels before re-design
Panels after re-design
All right panel components and variations added to the UI kit
Prototyping Interactions
To keep things crystal clear, I created prototypes for each of the panels to show the micro-interactions. Small details like this reduce the uncertainties in the development phase.
The re-designed header panel
The re-designed header panel
Reflection
The project resulted in a shareable design pattern library with over 80 components. For designers, including myself, the UI kit began to pay off immediately by allowing us to create mockups in a fraction of the time.
The biggest challenge for this project was timing. We lost 2 designers during the project, and other designers were often splitting their time between multiple projects. Due to the circumstances, the project was deprioritized and put on hold on multiple occasions. In the end, I mostly worked on it alone until it reached a point of 'completion.'
As they say, design systems are never truly done. This was the first step in filling the gaps of a cracked foundation.
It is up to us to continue ensuring the use of proper components, refactoring code as features are released and progressing iteratively.
Impact
6
Taught 6 designers to build and QA components in Adobe XD
80
Built 80 UI components
20%
20% increase in adoption