Dashboard Design System
Creating consistency across all products on the HotDoc Platform
The Problem
Like many fast growing startups component variations can accumulate and differentiate very quickly. At HotDoc this was the case. With no set rules or designed components in place I took it upon myself to create a Design System for HotDoc’s Dashboard.
Main issues
-
Inconsistent component styling including bootstrap
-
Duplications across components
-
No clear direction for brand
-
No clear direction for interaction
My Role
Lead Designer in this project and worked closely with frontend developers
Project Date
2020
The Process
Visual Audit
Firstly I did an audit of all the dashboard components, going through all the different button variations, radio buttons, checkboxes, etc. This was a very large job as the Dashboard includes various products and has many hidden edge cases that were a little tricky to discover. The findings...hundreds of discrepancies with many duplicates all slightly different.
Unifying
I focused on unifying styling across variants by identifying similarities and improving them.
Research
To gain inspiration and guidance, I researched successful design systems from companies such as Atlassian, Google's Material Design, and Salesforce Lightning Design System. Atlassian stood out to me for its detailed approach to accessibility and branding.
Designing with accessibility
Given HotDoc's mission to improve the healthcare experience for everyone in Australia, accessibility was a top priority. However, the primary green in the established branding failed to meet WCAG AA accessibility standards. I worked with the design team to workshop potential color options and ultimately landed on a green shade that had sufficient contrast with white text. From there, I created a visual and accessible color palette, focusing on assigning meaning to each color, such as red for errors, yellow for warnings, and blue for informational and directional purposes.
Naming conventions
Clear and consistent naming conventions were critical for ensuring everyone on the team was on the same page, so we established conventions for colors, buttons, messages, and other elements.
Building with awareness
With a vast amount of regular everyday users, any large visual changes would be noticed and potentially confuse the user. We had to tread carefully as we did not have a dedicated team to work specifically on the design system.
We found the best approach to handling this was to seek opportunities and slowly incorporate new components when building out new features and on any enhancement work.
Documentation
To establish the design system within the design team i firstly documented it in Figma. Creating easy to use components with different variations, adopting similar naming conventions to the code for easy reference.
I tested these thoroughly, making sure they were dynamic and would work responsively. Regularly testing the components interaction in Prototype mode.
The developers then implemented these components into Storybook (a web tool used to document UI components that allows you to interact and test live components). Allowing our designers, developers, and other stakeholders to view and test the components in isolation. This documentation grew over time as more products have been introduced.
Solution
As HotDoc has expanded its Product team, the Design System has become increasingly valuable by providing a single source of truth for all team members, reducing inconsistencies and streamlining design workflows.
The design system's components are now being utilized across both existing and new products, ensuring consistency in design and branding throughout the entire HotDoc ecosystem.
