VIU Design System
VIU Design System
VIU Design System
VIU is a digital insurance platform developed by HUB International to make the process of obtaining insurance easier and more accessible by allowing consumers to get quotes, access coverage, and manage their policies digitally. This project takes a look at how the main Button component in the design system was redesigned to resolve usability issues throughout the platform.
Dec 20, 2024
CLIENT
HUB International
CLIENT
HUB International
CLIENT
HUB International
Role
Product Designer
Role
Product Designer
Role
Product Designer
Service
Design Systems
Service
Design Systems
Service
Design Systems
Approach
Approach
Approach
The Button component redesign consisted of several stages:
An audit to identify component and usability issues
A redesign proposal that solves the problems found
Reorganizing and updating the design system with the redesigned components
Proposing new UX/UI patterns with the updated component
Documenting the new component and its patterns
Publishing all the updates, deprecating previous iterations, and implementing the updates into existing design files
The Button component redesign consisted of several stages:
An audit to identify component and usability issues
A redesign proposal that solves the problems found
Reorganizing and updating the design system with the redesigned components
Proposing new UX/UI patterns with the updated component
Documenting the new component and its patterns
Publishing all the updates, deprecating previous iterations, and implementing the updates into existing design files
The Button component redesign consisted of several stages:
An audit to identify component and usability issues
A redesign proposal that solves the problems found
Reorganizing and updating the design system with the redesigned components
Proposing new UX/UI patterns with the updated component
Documenting the new component and its patterns
Publishing all the updates, deprecating previous iterations, and implementing the updates into existing design files
Problem 1: Inconsistencies
Problem 1: Inconsistencies
Problem 1: Inconsistencies
There were inconsistencies in padding, styling, and nomenclature, as well as a lack of distinction between button types (e.g., links vs tertiary buttons), which resulted in buttons being used liberally and interchangeably.
There were inconsistencies in padding, styling, and nomenclature, as well as a lack of distinction between button types (e.g., links vs tertiary buttons), which resulted in buttons being used liberally and interchangeably.
There were inconsistencies in padding, styling, and nomenclature, as well as a lack of distinction between button types (e.g., links vs tertiary buttons), which resulted in buttons being used liberally and interchangeably.
Problem 2: Incompletion
Problem 2: Incompletion
Problem 2: Incompletion
Not all states were available in the parent component, and not all the variants existed for the mobile counterparts of the desktop components. Moreover, there were several broken interactions in the prototypes.
Not all states were available in the parent component, and not all the variants existed for the mobile counterparts of the desktop components. Moreover, there were several broken interactions in the prototypes.
Not all states were available in the parent component, and not all the variants existed for the mobile counterparts of the desktop components. Moreover, there were several broken interactions in the prototypes.
Problem 3: Pattern Issues
Problem 3: Pattern Issues
Problem 3: Pattern Issues
When it came to stacked button components or the use of disabled buttons in user input forms, there were many pattern inconsistencies that led to issues in validation as well as inconsistent user journeys.
When it came to stacked button components or the use of disabled buttons in user input forms, there were many pattern inconsistencies that led to issues in validation as well as inconsistent user journeys.
When it came to stacked button components or the use of disabled buttons in user input forms, there were many pattern inconsistencies that led to issues in validation as well as inconsistent user journeys.
Solutions
Solutions
Solutions
Less is more
Mobile and desktop versions were consolidated into one consistent design to reduce discrepancy with design and development.
How do other design systems do it?
I did a deep dive into several well-established design systems such as Material Design, Ant Design, Polaris, Adobe Spectrum, Atlassian, and Lightning to see what common patterns and design elements were being used with which users would be most familiar.
Resolve usability issues caused by inconsistent patterns
Because the buttons were being used without a clearly defined guideline, it resulted in inconsistent patterns, which produced usability. One example is the input validation issues caused by disabling buttons in an empty input form. We redesigned the pattern to enable buttons and use live feedback such as input error messages in order to deliver a clearer, more consistent experience.
Organize
By rebuilding and reorganizing the component to incorporate all the properties that previously were separated into unique variants, we were able to simplify the design library while optimizing the functionality of the button.
Less is more
Mobile and desktop versions were consolidated into one consistent design to reduce discrepancy with design and development.
How do other design systems do it?
I did a deep dive into several well-established design systems such as Material Design, Ant Design, Polaris, Adobe Spectrum, Atlassian, and Lightning to see what common patterns and design elements were being used with which users would be most familiar.
Resolve usability issues caused by inconsistent patterns
Because the buttons were being used without a clearly defined guideline, it resulted in inconsistent patterns, which produced usability. One example is the input validation issues caused by disabling buttons in an empty input form. We redesigned the pattern to enable buttons and use live feedback such as input error messages in order to deliver a clearer, more consistent experience.
Organize
By rebuilding and reorganizing the component to incorporate all the properties that previously were separated into unique variants, we were able to simplify the design library while optimizing the functionality of the button.
Less is more
Mobile and desktop versions were consolidated into one consistent design to reduce discrepancy with design and development.
How do other design systems do it?
I did a deep dive into several well-established design systems such as Material Design, Ant Design, Polaris, Adobe Spectrum, Atlassian, and Lightning to see what common patterns and design elements were being used with which users would be most familiar.
Resolve usability issues caused by inconsistent patterns
Because the buttons were being used without a clearly defined guideline, it resulted in inconsistent patterns, which produced usability. One example is the input validation issues caused by disabling buttons in an empty input form. We redesigned the pattern to enable buttons and use live feedback such as input error messages in order to deliver a clearer, more consistent experience.
Organize
By rebuilding and reorganizing the component to incorporate all the properties that previously were separated into unique variants, we were able to simplify the design library while optimizing the functionality of the button.
Publishing
Publishing
Publishing
Because I was working with a critical component that impacted many molecular components, stacked components, and page templates, I needed to be very cautious and thorough with the implementation of the redesigned Button component.
Because I was working with a critical component that impacted many molecular components, stacked components, and page templates, I needed to be very cautious and thorough with the implementation of the redesigned Button component.
Because I was working with a critical component that impacted many molecular components, stacked components, and page templates, I needed to be very cautious and thorough with the implementation of the redesigned Button component.
Documentation
Implementation
Deprecation
Documentation
Implementation
Deprecation
Documentation
Implementation
Deprecation
Impact
Impact
Impact
The Button component in the design library was cleaned up, and the redesign resulted in a reduction of unnecessary variants. We were able to consolidate over 60 variants to 15.
Consistent design
The updated Button component allowed designers and developers to keep the button design consistent for both the UI design as well as UX patterns throughout all the pages, creating a seamless and thoughtful experience for end users.
Domino effect
Redesigning the Button component to resolve issues within the component itself had a chain reaction in resolving design issues and improved usability overall. Users experienced fewer misunderstandings in their interactions.
The Button component in the design library was cleaned up, and the redesign resulted in a reduction of unnecessary variants. We were able to consolidate over 60 variants to 15.
Consistent design
The updated Button component allowed designers and developers to keep the button design consistent for both the UI design as well as UX patterns throughout all the pages, creating a seamless and thoughtful experience for end users.
Domino effect
Redesigning the Button component to resolve issues within the component itself had a chain reaction in resolving design issues and improved usability overall. Users experienced fewer misunderstandings in their interactions.
The Button component in the design library was cleaned up, and the redesign resulted in a reduction of unnecessary variants. We were able to consolidate over 60 variants to 15.
Consistent design
The updated Button component allowed designers and developers to keep the button design consistent for both the UI design as well as UX patterns throughout all the pages, creating a seamless and thoughtful experience for end users.
Domino effect
Redesigning the Button component to resolve issues within the component itself had a chain reaction in resolving design issues and improved usability overall. Users experienced fewer misunderstandings in their interactions.
