Design System
Conquer Design System
Establishing a design system to create a cohesive product experience
Conquer is a sales enablement platform in the SaaS ecosystem that helps sales and service teams exceed pipeline, revenue, and retention goals by boosting productivity and increasing engagement. Conquer needed a re-design for their B2B Admin Dashboard. Admin dashboard managing and administering sales and service processes for enterprise business.
ROLE
Lead UI/UX Designer
CLIENT
Conquer
YEAR
2020–2021
Fun Fact: I worked at Conquer as a sole designer.
I joined Conquer (formally named DialSource) in 2019 as the first and only designer at the company from 2019–2022. I worked in a team of 10 developers and 1 QA engineer.
During my time at Conquer, I learned many valuable aspects to being a lead team member for a product team such as:
Implemented a product design process
Established a product documentation process
Improved usability throughout the product
Established a design system
PHASE ONE
Defining the Problem
Why do we need a design system?
When I joined Conquer, there was no established design system within the product-engineering department. The engineering team did not have a consistent code base and no established design system. Whenever a new front-end developer was hired, they would basically start from scratch. This resulted in using extremely different styling throughout the product.
In addition, I found myself starting design projects without any guidance on style, interaction, or functionality. The product-engineering team would struggle on making decisions on whether a button should be a certain color, or if a form flow should have a specific functionality. This is why I made the decision to establish a design system for the company.
Some of the main problems of working without a design system included:
Inconsistent user experience throughout multiple products
Having to start projects completely from scratch
Internal disagreements on style and functionality
Misalignment between the company’s brand guidelines and the product
Always having to re-invent the wheel when starting a project
PHASE TWO
Style Inventory
Analyzing the product at its current state
One of the first steps to establishing a design system for a company is to analyze the product at its current state. This included a full review of everything the company has developed from the website, marketing materials, end-user products, and internal products.
Throughout my discovery, I found these issues within our product as a whole:
300+ colors used
150+ font styles used
100+ button styles used
ZERO design mockup files
There was no doubt that creating a design system was necessary in order to grow and expand our product base. I moved forward with creating the design system by following the methods of Atomic Design by Brad Frost.
PHASE THREE
Branding & Design
Establishing the brand
During the time of this project, the company was also going through a major re-brand due to the growth and expansion of our products. I worked closely with the branding + graphic designer to ensure that the product design system aligns with the company’s updated brand guidelines.
Logo
Colors
Typography
Iconography
PHASE THREE
Styling UI Elements
Buttons
Form Fields
Select Inputs
PHASE FOUR
Designing Components
PHASE FIVE