Optimizing the pairing experience of the MOCACARE app

Project Manage: Jerry Hsu

User Research: Emma Cheng

Visual Design: Emma Cheng, Yen Hung Lin

Intro

After MOCACARE launched MOCAheart and MOCACuff, these products helped many users measure and track their health data efficiently. Using the MOCACARE smart phone app to pair with the MOCAheart and MOCACuff, measure health data, and collect health data, are the most important functions of the app.

However, after many app updates and additional new features, we realized that there was room for improvement in the the app pairing process.

Below is our design process of optimizing the pairing experience of the MOCACARE app:

Determine objectives

First of all, we observed different users pairing the product to the app and made note of the users’ feedback. Below are some of the feedback we received:

1. The pairing processes was kind of too long.

2. It is a little troublesome to switch between products that I want to pair.

3. Some of the diagrams are not clear. It is easy to get confused during the pairing processes if one is not already familiar with the app.

4. The information given in the app is not clear. It causes me to have to stop and think during the pairing processes

After categorizing all the feedback, we realized that our users care about the following two issues during pairing processes:

1. Is the user taking the correct steps during the pairing processes?
2. Is the pairing process easy and smooth?

Therefore, we determined the following two design objectives and repeatedly evaluated whether we were on track to reach the objectives during the redesign process:

Objective 1:
How might we prevent users from making unnecessary mistakes during the pairing process.

Objective 2:
How might we make pairing processes as easy and as smooth as possible.

After we had our objectives, we tried many different design solutions. Below are the final design decisions:

1. Improve images

For each step in the pairing process, the app shows a different image that guides the user on how to operate the product in order to pair successfully to the app. The images from the original app design were simple line illustrations, which might be interpreted differently by each user. The new app design uses photos of people using the products, which not only saves us the trouble of creating new illustrations, but also lowers the risk of user confusion.

2. Improve layout of text and images

At each stage of the pairing process, the users need to know which step they are at, and what they should do at this step. In the original app design, the visual hierarchy was unclear, so it was hard for users to figure out what piece of information is most important. For the new app design, we eliminated unnecessary visual elements and put the step numbers and the images higher on the visual hierarchy. That way, users will be drawn to the most important information right away without any distractions.

3. Improve user flow

The first thing that users need to do when pairing is to select the correct device. On the Navigation Bar, there are two icons (circled in red in the image below) that represent MOCAheart and MOCACuff for users to choose from, but for those users who are not familiar with the app, it is hard to find the icons. Also, the icons operate in a manner similar to a switch control, which is different from the way the rest of the buttons on the Navigation Bar operate; this inconsistency creates confusion. Instead of putting two icons in the Navigation Bar, we turned this part of the process into an individual page, Step 1. We also made buttons out of realistic renderings of the two devices, so the user can tap and select the correct device intuitively. These changes decrease the learning curve of the app.

4. Shorten the pairing process

When users successfully connect the device to the app, a completion page appears and pauses for 1 second before the next page slides in. However, too many pages will annoy users. Since notifying the user that the pairing has completed is not an actual step, there is no need for a completion page. In the new app design, we transformed the completion page into a toast alert. Because we used a toast alert instead of an entire completion page, the user is under the impression there are fewer steps in the process.