Published on | Prototyping: From UX to Front End — Medium Anita Shim

I mean, really- how old you are you on the inside?

The client overview:

Vancouver startup VitalSines recently caught a massive national buzz after going live on CBC’s Dragon’s Den with their product- iHeart. It is a personal health tracking wearable that combines the power of a pulse oximeter that measures aortic pulse velocity, to measure your “internal age”. The device clips on to the user’s finger while the companion mobile app guides them through their whole experience.

iHeart’s mission: Help people live longer and healthier lives

Our Opportunity

Sarah, the CEO approached our UX/UI team with the challenge of redesigning the entire iHeart app to better meet the needs of:

their current customers- for user retention
the target audience- for higher conversion

The Current App

Although the users are able test and track their internal age, some major problems were identified immediately. At first glance, it is a sea of dry medical information with no context of the data, nor guidance of what do with it going forward… But we needed to delve further with research.

test results page on the existing app

User Research- Identify what people really want

The team and I utilized several research methods dig at the brains of the people who would be using this product, so we can nail down the real concerns from their standpoint.

Contextual Inquiry:

We tested the existing iHeart device and app with various age groups, and found that users…

found it confusing to set up wit device, that had no real instructions
didn’t understand why the numbers were fluctuating constantly
couldn’t interpret the medical result data properly
kept testing repeatedly to get lower ‘internal age’ numbers
didn’t know to what standards their results were matched

So far, the common concern screams this…

“What does this number mean? Why does this number keep changing? How is my internal age being measured? What is this number compared to?”

This user journey map helps pinpoint the emotions typically experienced while using the app, from beginning to end. As you can see, “Bob” starts off with some confusion on directing through the app, and responds to the testing phases with excitement and skepticism. Depending on his results, he would feel a variety of emotions responses- surprised, disappointed, or relieved. Upon getting back his results, Bob is given little info on the rationale behind these numbers, and he doesn’t know what to do with it.

Ultimately, the underlying goal for Bob is to feel young and healthy, and to lower his internal age.

Survey Research:

We developed 2 surveys to validate our client’s target audience- one for baby boomers and the other for millennial adults. We were able to analyze current behaviours among these demographics regarding their relationships with personal health, as well as with digital health products.

Our findings are as below:

Baby Boomers (Primary Audience): This is the target demographic of the product, whose insight has the most weight in our research.

The majority of respondents exercise, eat healthy, and want to improve overall health
Light activities (such as walking) were the most prevalent form of exercise
Almost no one currently uses a health wearable
47% use health apps for motivation, health tracking and management of medical history
No one has heard of iheart, yet 70% have expressed interest in using a device like it

Millennial Adults (Secondary Audience): This isn’t the target, but we wanted to see how much interest there would be out of our focal age range.

The majority of respondents exercise, eat healthy, and want to improve overall health
The majority uses/has used a health app
Almost no one has heard of iheart, yet 75% have expressed interest in using a device like it

User Personas

Based on the user research conducted, we have narrowed our focus to the baby boomers aged 45–60. These are users concerned about age-related illnesses and are keen on partaking in preventative measures to hinder future health complications.

There are two personas- one for an existing user of the current product, another for a new user who would be onboarded onto the new iHeart app. For each profile, I’ve noted 3 key motivations for using iHeart device / app.

Market Research- How are we gonna compete?

In order to create the perfect product for our users, we wanted to navigate the playing field in which iHeart is located.

There are currently 165,000 health & wellness apps on the iTunes store…

and of that number…

Through an extensive comparative & competitive analysis, I’ve highlighted 3 top competitors for their unique features and selling points.

Lumosity: This product has a very friendly and colorful onboarding system for new users with bits of scientific and expert validation. Introducing science immediately establishes trust in the users’ first impressions of the app. Through personalized training programs and friendly language, the app builds rapport with its users, which helps with conversion and retention. Lumosity has successfully gamified its whole service via real games, which only adds on to its “fun” factor. The one disadvantage of Lumosity is that the depth of information such as personal progress, is limited unless the user pays for a premium account.

Pacer: This app is a fitness/step tracker with gamified features and unique data visualization. With the sheer amount of information that Pacer offers, the UI and placement of data make it easy for users to absorb the content. The app however, does not have a form field system that is as intuitive as the others.

LifeSum: Where it really shines for LifeSum is its effective system of acquiring necessary information from users, through sleek form fields. By introducing only one question per screen, the user is more likely to fill it out in order to reach the next step of the experience, rather than being overloaded with multiple questions and input fields, which may cause bouncing. This is a very smart and effective way to get users to give information that will help them invest in the app, and therefore return to it.

The Product Design- prioritizing features

Inspired by the the best designed and most popular competitors out there, these are the four features we have decided to implement in the new iheart app.

Keeping mind of the aforementioned user goals and the competitive functions to incorporate, the following features were also important considering of the aging user base:

large text and icons
simple, casual wording
click-based navigation
more visuals, less words

So this is how the brainstorming started…

and we eventually ended up at these low-fidelity wireframes…

To make it easier to follow the steps of the user journey, this user flow tracks the entire process of using the new iheart app.

The corresponding sitemap plans out the finalized screens to create.

The New Design- high fidelity wireframes

After all the researching, comparing, strategizing and drawing, these is the final product! We created something that we are proud of. To note some general offerings of the app, it…

is available in portrait and landscape mode (the original app was in landscape only)
uses layman terms that is friendly, with less medical jargon
has bigger and bolder font to cater to older users
has clear instructions that guides users from start to finish

The Onboarding

We made these to be personable and visually aesthetic to evoke the user motivations of feeling healthier and younger. It rouses images of youth and vitality through selected photos. Immediately the user learns…

what iheart does
the science behind it
how to use it
why you should use it

Internal Age Testing

One key user concern with the original app was the lack of clear instructions and guidance on how to properly test for accurate results. We solved this problem by adding a…

2 minute sit-down suggestion prior to each test
30 second interactive count-down indicating the test process
overlay of latest results immediately after testing, with friendly message

User Progress

After testing results, users are taken to the progress page that shows…

baseline internal age data- by week, month, year
comparative result of your data to others in your age range
easy data visualization with clickable graph points
quantitative medical data is immediately accessible (as opposed to email results in the old app)
avatars that signify the user’s progress with iheart, they evolve as the users improve their internal age

Journal

A notable offering of our new app is that it allows users to…

regularly log data on their diet, exercise, mood
receive notifications around times of the day that are optimal for inputting aforementioned health info
visually see which dates they have or have not completed their journal info
see recommendations on how to improve internal age based on history of results

Device and Case Redesign

In addition to revamping the heart app, we went one step further to see how we could make the user experience even better. In collaboration with an industrial designer, Jasmine, she did two things. She…

changed the material of the device to a matte-finish coat
created a new case that protects the iheart device and prevents users from accidentally pressing the on-button when not using the device

These cases come in multiple colours to add an element of fun and personalization.

Future Considerations- What else could iheart do?

Aside from the minimal viable product (MVP) that our team has produced for our client, we wanted to offer other strategies that iheart could implement in the future. Some recommendations include…

syncing with other health apps (i.e. Apple Health, FitBit) for sleep, steps, and calories
connecting to social media platforms
creating challenges publicly and privately with other members, for further engagement

Overall Summary

Our objective of this project was to create a mobile platform that current and new iheart users would want to use regularly. By addressing the user needs and merging with what top competitive products had to offer, we’ve produced an MVP that will serve current and new users of iheart. It’s been a rewarding experience to have a positive influence on people’s relationships with preventing age-related cardiac complications. I wish iheart users the best of luck with their individual health journeys!

iheart — What is your internal age? was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

iheart — What is your internal age?

Cool stuff, every week

More Articles