Design System Overhaul
My Role
Lead Designer - Research, Design, Documentation, Testing,
My Team
James Meyer - UX Manager
Time Frame& Status
6 months - Delivered
Overview
Making changes to our website was just like playing whack-a-mole. When you fix one problem another came up. comes
This caused our developers to waste hundreds of hours fixing small bugs, our backlog to be full of small tickets, and causing the company to go further and further into tech debt.
My role was to overhaul our entire design system, make it accessible, and spread it to different departments in the company.
Outcomes
Here is what we accomplished because of this project
💸
Projected to save the company $800,000 over 5 years
🧑⚖️
Became 100% WCAG AA accessible
🙌
Gained the trust and support of the company
A completely overhauled design system that is WCAG AA accessible paired with design tokens for implementation and documentation to spread throughout the company.
Before anyone could make changes to the system, I needed to understand what we had. This led to an entire system audit.
Accessibility Audit
Inspected components, navigation, interactions, and resources to see if they met WCAG AA standards.
Branding Audit
Went through the system and live website to look for inconsistencies that they couldn't afford. For example, they had 9 different card variations, which was way too many!
Could they end up in court?
It was shocking to find out that almost every component, navigation, and resource that was provided was not WCAG accessible. This means that people with various types of physical or mental impairment could not use the site effectively!
Why does it matter?
If at any point the website caused someone to make a wrong decision or damage their company because of the accessibility issues, the company could be sued for up to $150,000 dollars, on top of damage compensation. In healthcare, that damage compensation amount could be a lot.
How did I fix it?
After studying WCAG standards and industry best practices, I was able to recreate and re-brand our components to meet WCAG AA standards. I also created a checklist for our designers to use when getting a design approved to make sure that all future designs would meet these criteria.
See My Accessibility Checklist 👀
Can our insights really be trusted?
KLAS Research's tagline is, "Insights you can trust". However, after receiving complaints that data visualizations were extremely hard to understand and icons confused users more than helped them, KLAS was slowly losing the trust of users.
Why does it matter?
Trust is a tricky thing because once you lose it, it is very hard to get it back. The target audience was CMIOs at healthcare organizations who were making million-dollar decisions, and if they couldn't trust us, they would never come back.
How did I fix it?
After auditing our colors I realized that on top of not being accessible, the data visualizations could only be understood after an employee explained them. I worked with our data viz team to put in place new design standards. I also studied color theory and researched other design systems to create a color palette with 12 new colors that would meet industry best practices for categorical, sequential, and diverging data sets.
From Tech Debt to Design Tokens
Now that the design system is looking fresh and accessible, how can we start to implement it? A large painpoint was developers needing to find every instance of a component and manually changing it.
Why does it matter?
The more time that developers spend fixing bugs, inconsistencies, and other issues is less time we can use to actually make products better and more innovative. More bugs means the business goes deeper and deeper into tech debt.
How did I fix it?
Design tokens! Design tokens are a system where you have a host design and each time you create a component for your website, it branches from the host token. This means that if designers know a little bit of CSS, they can change host tokens and update thousands of components across the website. This frees up developer's time for more important tasks, and give designers the ability to efficiently make important changes.
Let's Get Everyone On Board
The key to getting organizational support was effective documentation and training. I had already worked with several teams to make sure that the design system was meeting their needs. As it became time to roll out the system I focused on using effective documentation in Atlassian and developed a training program to help people understand it's importance.
Overall the changes were well received and teams were excited to see the system in action!
Before
After
