User Research

VIU by HUB

VIU by HUB

Overview

Overview

Overview

We received feedback via the technical support form on the Nexus page from users looking for information on how to sync their external policies.
Based on this client interaction, we wanted to look at methods for surfacing feature and providing users with instructions on how to use features.


This project takes a look at how to provide users with instruction for accomplishing account dashboard specific tasks (e.g., importing policies, updating policies, etc.).


*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

My role in this project was primarily to research, ideate solutions based on the research, and to present the ideas for further development. I considered the following to guide my design strategy:


  • Outline potential tasks that can benefit from this type of feature

  • Provide options for the most helpful way to present this information

  • Determine if there are potential flow/copy improvements that might achieve the same goal

  • Sort options by complexity of implementation

Research

In-App Walkthrough

Product Tour

Checklist

Tooltip

Feature Guide

Announcement Modal

Hotspot

External FAQ

In-App Walkthrough

Product Tour

Checklist

Tooltip

Feature Guide

Announcement Modal

Hotspot

External FAQ

In-App Walkthrough

Product Tour

Checklist

Tooltip

Feature Guide

Announcement Modal

Hotspot

External FAQ

Testing

In-App Walkthrough

Use positioning to fix topbars, sidebars, and backgrounds.

Product Tour

Use effects like Transforms and Parallax scrolling.

Checklist

Connect your site to the most popular apps out there.

Feature Guide

Run a blog, list job openings, or manage your event schedule.

Announcement Modal

Visually structure your pages and link to them easily.

FAQ

Build lightning-fast, globally optimized sites.

Findings

Comparison Chart

Install the Figma plugin and you’re ready to convert your designs to a responsive site.

Proposal

First Login

Mobile and desktop versions were consolidated into one consistent design to reduce discrepancy with design and development

External FAQ

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.

In-App Walkthrough

Design your site on a familiar free-form canvas. Visually set up your breakpoints to make it responsive.

Help Tooltip

Visually structure your pages and link to them easily.

Hanbi Lee 2024

Toronto, Canada