uDream: Migration and Standardization

Redesigned the massage products IoT app, achieving a 90% migration success rate across 5 regions with 10,000+ MAU. I standardized the design, set a guideline for all future product integrations and improved tablet interaction for 99% of sales devices and 40% of users.

Team: 1 Product Owner, 1 UI/UX Designer, 3 Developers, 2 Test Engineers

My Role: UX Research, Wireframe & Visuals, Design System, Design QA

Duration: 2022 Apr - 2023 Apr

Product Overview

Problem

To migrate the legacy app into the new centralised Well-Being app, I need to address design inconsistencies and incorporate new updates to build the design standard for further migration apps.
Solution

We introduced the new control bar which is a quick access to navigate or control. Netherlands, I visualised the massage customisation and defined the tablet layout to support the majority of users.
Impact

The migration success rate is 90% and launched in 5 regions with 10000+ MAU. We support 99% of sales devices and improve 40% of users.

Background

Most Features are aligned to the legacy app

The native app is launched for a few years. To ensure both existed users and new users can enjoy the app, we planed to design the features mostly aligned to the native app and integrate few features based on them.

Some existed apps but are inconsistent with similar features

There are already some apps on the Well-being app such as uLove 3 and uNano Pro. However, the designs are inconsistent. I was working on finding the standard to help future migration apps since uDream is the first migration product.

“How can we integrate features with the legacy app and the new app with a better solution?”

— Problem

Gather The Insights

Internal Analysis

The original bar need to be redesigned to fit in the Well-being app which is not only can control within the products, and we consider the extension of product connection management.

Safety concern - User allow to control the massage every moments

Not intuitive Design - Many Texture Actions

The legacy app is more texture actions and with some illustration which is not easy to undertand. It will be some barriers for new users who may never use massage products before.

2. Store Visit & Data Analysis

For the uDream app, its first impression will be the salesperson’s demonstration when they step into our store. To explore the pre-buying experience, I attended a special sale on Mother's Day.

The First impression of Our App is Tablets

Salespersons tend to demonstrate the chairs using iPads for chair demos and mobile devices for smaller products, as it is easier to highlight and control the features for customers. However, our team had primarily focused on the mobile design only.

Approximately 40% Of Our Users Use Tablets

It indicates 40%, a significant number of iPad users. Therefore, designing for tablets is essential and needs to be considered. I also found the common devices to help us to define the design standard.

3. Internal Usability Testing

Considering the NDA, we conducted internal testing with staff who have similar characteristics to uDream users, including:

Employees from other departments (HR, Marketing, System Engineers)
Aged between 35-50 years old
Usage of uDream ranging from rarely to occasionally
Testing groups consisting of 5-10 persons per round

User Are Not Familiar With The Terms

I've noticed that sometimes users are not familiar with the terms. Users focus on the massage experience over understanding the intricacies of the chair and app logic. We need to give the options from the perspective of the massage to better understanding.

Need more interaction metaphor while visualization

During the visualisation, I redesigned and enhanced the massage customisation. Although the illustration is clearer, there are still some missing hints that users may not be familiar with the interaction, as they may range from young adults to the elderly.

”How can we ensure users can navigate and interact with the updated app seamlessly?”

— Problem Reframed

Design Strategy

Define Tablet Layouts with similar layout logic

Considering the limited development resources, we maintain key elements using the same layout logic across both platforms. Developers can implement all the devices at the same time.

Multi-Functional Control Bar to control all in one

To support control of all the ongoing features, including music and massage, we introduced the brand new global control bars, which will display everywhere, and users can navigate through it to do quick access.

Massage Experience Optimization

Visualising the essential massage steps from shoulder detection to massage adjustment, users can now interact with our app without further thinking.

Iteraction after launched

1. User feedback

Adjusted control bar placement to avoid blocking action buttons.

Users don’t know the control bar is moveable, and the default position is on the bottom which overlay the main button actions. Consider to quick fix the issue, we changed the default position to the right side which will not overlay and avoid to mis-tapping the estop button.

2. Data Tracking

Remove the massage extension options

Based on the data, only about 3% of users click the extend action after the 15-minute massage, even though they see the extension dialogue. This low usage may be due to users falling asleep or wanting to try another massage.

Product highlight

Tablet-specific layout

Our approach maintains key elements using the same layout logic across both platforms

Easy to interact with: Increased layout margins for easier interaction on tablets.
Easy to read: Emlarge font sizes and image dimensions for improved readability.

Multi-Functional Control Bar

Control Bar supports control all the ongoing features and quick navigation. If there are multiple products connection, it also can control all like a digital controller.

It can be moved to anywhere on the page according to the user preference.

Visualized guidance for steps

We put the side view of the human illustration to help users understand the current state. The user can quickly adjust the shoulder position by dragging and adjust the settings by tapping the massage areas.

Enhanced massage customization

To let the user focus on the massage experience, we made the adjustment more intuitive by visualising. Users can select the massage or chair areas to adjust them accordingly.

Migration

To minimize changes to the current pairing flow, I added a "Help" section containing essential information and common scenarios. Users can troubleshoot independently by referring to the LED indicators.

Impact

90%

Global migration success rate
99%

Supported sales devices
35%

users doing 30-min-massage

Takeaway

Share The Insights

It's crucial to share insights and research findings with them to ensure everyone is on the same page. I find a sense of achievement in improving our product through the sharing process.

Learn Through Practice

II constantly communicated with my team members, experimenting with various methods to address these challenges. The process was challenging, but I learned valuable lessons along the way.