Intro
The product I was working with already had a design system. There was some feedback though from team members saying they have issues using it. It was obvious that the system needs an update.
I started with examining the current design system to understand its strengths and weaknesses. After carefully analyzing its limitations and areas for improvement, I created a clear plan outlining what needs to be enhanced and how to achieve those improvements.
The Process
Research
1
Facilitated a series of interviews with various users of the design system, including designers and developers. Received the feedback and suggestions for improvement from product owners and stakeholders. Consolidated and analyzed the feedback received from the interviews.
2
Performed an audit of the design system, examining styles, patterns, and components to identify any inconsistencies, as well as usability and accessibility issues.
3
Compiled a summary of the primary pain points to be addressed, gained an understanding of the benefits of the update, and explored methods for measuring the success of the changes.
4
Developed a comprehensive implementation plan to guide the execution of the design system update.
5
Implement the changes on design and front end sides.
Research Highlights
Component Deficiencies
Some components are missing, while others remain unused
Inconsistencies in the look and feel of certain components between the front-end and design
Excessive Color Styles
The design system has an excessive number of color styles, with 70% of them going unused
Naming Challenges
The naming conventions differ between the design and front-end aspects, causing confusion
The current naming convention is not easily scalable, logical, or simple
Usability Issues
The design system is difficult to use, making it challenging for designers and developers to navigate
Managing a large number of styles is complicated and time-consuming
Accessibility Concerns
Small text size and insufficient contrast pose accessibility problems for users
Localization inconsistencies hinder effective internationalization
Pattern Inconsistencies
There are inconsistencies in the usage of patterns throughout the design system
These pain points highlight the need for a comprehensive overhaul of the design system to address these challenges and enhance its effectiveness and usability.
Customization Challenges
Since the product was a White Label solution, issues with design system directly influenced the customization abilities:
It is challenging to customize the product for clients
The existing design system limitations hinder the ability to adapt and tailor the product's appearance to meet the branding requirements of different clients
Lack of flexibility in the design system makes it difficult to achieve a seamless and consistent white label experience for clients, impacting the overall value and marketability of the product
Summary
Overall, a cumbersome, chaotic, and inconsistent design system undermines productivity, hampers collaboration, and negatively impacts the user experience.
Decreased Efficiency
Designers and developers struggle to navigate and utilize a disorganized and confusing design system. This leads to wasted time and effort spent searching for the right components, styles, and patterns, ultimately slowing down the design and development process.
Inconsistent User Experience
It confuses users, diminishes brand recognition, and undermine the overall cohesiveness of the product.
Higher Learning Curve
Requires a significant investment of time and effort for new team members to understand and use effectively.
Increased Errors and Rework
Designers and developers struggle to make informed decisions, resulting in frequent rework and iterations to correct mistakes, further prolonging project timelines.
Diminished User Satisfaction
Users encounter usability issues, that leads to frustration, decreased user satisfaction, and potentially impact the product's reputation.
Scope
Refactoring the design system, taking into account the following issues:
Identify missing components and remove unused ones
Streamline the excessive number of color styles, discarding the unused 70%
Address the discrepancy in naming conventions between design and front-end
Evaluate the scalability, logic, and simplicity of the naming convention
Rectify inconsistencies in the look and feel of specific components between front-end and design
Enhance usability by making the design system more intuitive and user-friendly
Tackle accessibility concerns, such as
Addressing small text size and ensuring sufficient contrast for readability.
Resolving localization inconsistencies, set localization principles and rules
Rectifying inconsistencies in pattern usage throughout the design system, describe and document patterns
Customization Enhancements
Integrate design tokens into the design system to provide a standardized approach to defining and managing design properties, such as colors, typography, spacing, and more
Make the system more adaptable for clients requirements and future changes by implementing easy to navigate design tokens architecture
Streamline the customization process by clearly defining the styles and parameters of the system that can be customized and providing customers with a form as a customization tool at the initial stage
Conduct user testing and gather feedback from clients to refine and expand the design token system, ensuring it meets their customization needs effectively
Expected Outcome
Enhanced Usability and Navigation:
A user-friendly interface, making it easy for designers to navigate and utilize its resources. This will eliminate confusion and uncertainty, streamlining the design process.
Scalability and Customization Support
The updated design system will be designed with scalability in mind, allowing for efficient growth and expansion.
Accelerated Development and Time to Market
With a refined design system, development teams can work more efficiently, leveraging reusable components and standardized design elements. This will result in faster development cycles and shorter time to market for new features and updates.
Consistency Across Products
By enforcing standardized design patterns, components, and naming conventions, the design system will promote consistency in the user experience across various products and platforms. This will reinforce the brand identity and enhance user recognition and familiarity.
Improved Accessibility
The updated design system will prioritize accessibility considerations, ensuring that the product adheres to best practices for usability by individuals with disabilities.
These expected outcomes will contribute to a more efficient, consistent, and user-centric design and development process, ultimately delivering a superior product to both internal stakeholders and end-users.
Metrics
In order to understand whether we achieved expected goals I set the following metrics to track:
Consistency audit - to measure the level of interactive and visual consistency before and after the implementation of the design system
Feedback from design system users (designers and developers), product managers and stakeholders
Tracking the reuse of components through Figma Library Analytics
Tracking the speed and number of iterations when implementing a new customization theme
Implementation
Colors
To address the disorganized color structure, I concentrated on the following updates:
Update colors according to the hue
Eliminate unused colors
Update the naming convention for clarity and consistency
Improve navigation
Check and update color contrast for accessibility compliance
Hue Model
Existing colors do not always have the same hue
All colors are based on the same hue, within the same color line
Brand New Approach
Inversion for the Dark Theme
N. 1000 = N. 0
N. 900 = N. 100
N. 800 = N. 200
N. 700 = N. 300
N. 600 = N. 600
N. 300 = N. 700
Updated Structure
Colors divided into functional categories
All colors aligned within appropriate hue
Special category for data visualization supporting color blindness
Providing sufficient contrast (AAA) between all possible text and background colors combinations
Typography
Eliminate unused styles (H5, H6)
Update the naming convention for clarity, consistency and scalability
Improve navigation
Approach
Standard approach in headers naming + T-shirt sizing for other styles, where M is base size (14):
Headline - H1, H2, H3, H4, H5, H6
Paragraph: L, M, S (light, heavy)
Label: L, M, S…
Link: L, M, S…
Button: L, M, S…
Updates
Updated font-family to improve readability
Improved scalability by implementing T-shirt size naming convention (except headers)
Created separate categories for buttons, links and labels
To gain access to the complete case study and explore the hidden details, please email me: nadiyqabrosimova@gmail.com