Design Systems

Design Systems

Design Systems

VIU by HUB

VIU by HUB

Overview

Overview

Overview

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.


*To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of HUB International.

*This case study is condensed for easier viewing. To view the full case study, please shoot me an email.

Approach

Approach

Approach

The Button component redesign consisted of several stages:


  1. An audit to identify component and usability issues

  2. A redesign proposal that solves the problems found

  3. Reorganizing and updating the design system with the redesigned components

  4. Proposing new UX/UI patterns with the updated component

  5. Documenting the new component and its patterns

  6. Publishing all the updates, deprecating previous iterations, and implementing the updates into existing design files

Problems

Inconsistency

Inconsistency

Inconsistency

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

Incompletion

Incompletion

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.

Pattern issues

Pattern issues

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

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 that users would be most familiar with.

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

Documentation

Implementation

Deprecation

Documentation

Implementation

Deprecation

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.

Hanbi Lee 2025

Toronto, Canada