Prevayl is a state-of-the-art athletic performance brand aiming to equip consumers with their personal health metrics by combining a “luxurious, unobtrusive design with a flawless user interaction” using wearable health tech.

UX/UI Design

iOS DESIGN

wearable tech

UX/UI Design

iOS DESIGN

wearable tech

In a relatively saturated consumer health-tech market, Prevayl had an
advantage. Their technology contains 'medical-grade' sensors, allowing for 4x more accurate tracking than anything else on the market.


My tasks with Prevayl were twofold:


1. How do we communicate the rich data captured back to users,
in a way that is both interesting and valuable?


2. How do we encourage users to make the most of a BodyCheck™? A unique to Prevayl feature, that provides personalised training advice by measuring your resting heart rate and heart rate variability, identifying under-recovery and overtraining.

In a relatively saturated consumer health-tech market, Prevayl had an advantage. Their technology contains 'medical-grade' sensors, allowing for 4x more accurate tracking than anything else on the market.


My tasks with Prevayl were twofold:


1. How do we communicate the rich data captured back to users, in a way that is both interesting and valuable?


2. How do we encourage users to make the most of a BodyCheck™? A unique to Prevayl feature, that provides personalised training advice by measuring your resting heart rate and heart rate variability, identifying under-recovery and overtraining.

The current setup

The current setup

A fair amount of work had gone into the existing approach for how users are shown their activity data, however, there were a few elements that needed refining, to better serve users.

Existing insights page

Improvement areas

Daily Advice

The intensity icon used within the daily advice module offered little to no context as to what is going on (without having to dig deeper).

Training Zone

The Training Zone chart looked nice, but didn't offer any upfront explanation as to what the zones meant.

Overview

Overview was limited to this week vs the previous and offered no way of sorting the data.

Giving users the 'why' with Training Zone

Giving users
the 'why' with Training Zone

Before

The Training Zone chart looked nice but lacked explanations of the zones. After internal reviews and interviewing users, I prioritised adding context to clarify the ‘why’, making it easier to understand.

After

Displaying 'this week's' information with a table of durations per zone, helped the user understand exactly what was going on.

The user was able to dive deeper through the information icon, to find what Training Zones are and how they work.

Exploring daily advice

Exploring daily advice

Before

'Daily advice' underwent multiple iterations and through testing, we discovered that none of the approaches below resonated with users, most just ignored it or didn't realise it was there.

Introducing a button

Updating the original design with a button to allow the user to explore further.

Weekly plan

Serving the users a weekly plan, indicating what to do on which days.

Workout intensity & advice

A variant on the weekly plan, incorporating intensity and advice.

Rather than try and force a feature that wasn't working, I had the idea to pivot to focusing on a BodyCheck™.

Incorporating a BodyCheck™

Incorporating a BodyCheck™

A BodyCheck™ measures your resting heart rate and variability to provide personalised advice, detecting under-recovery and overtraining. This flow shows how users complete a BodyCheck™ for tailored insights, turning data into meaningful and purposeful advice.

Encouraging users to do a BodyCheck™

Now instead of daily advice, the BodyCheck™ was the first thing users saw upon opening the app, supported by a push notification.

BodyCheck™ results

If they had already done one for the day, they would be greeted with their results, which would neatly guide them to their tailored advice.

BodyCheck™ explained

There was a lot happening technically for a BodyCheck™ to work, so I created a way for users to explore this information without overwhelming them upfront.

Tailored advice

Tailored advice

Tailored advice was an opportunity for Prevayl to communicate with the user just like a personal trainer or coach, monitoring your progress and making specific recommendations based on your data.

The coach approach

Intensity of workouts was a key aspect of the app and something that was of keen focus for the coaching element. I created an effective set of modules that advised the user what to do at that moment in time.

Independent tailored advice

Following user feedback, they wanted tailored advice without needing to complete a BodyCheck™. I redesigned the module to provide standalone tailored advice, which could be enhanced with BodyCheck™ data if available.

I also shifted from red to blue for 'rest' as red came across negative.

Revealing how tailored advice works

Some users wanted to understand the process behind tailored advice at Prevayl, so I designed screens that explain how it works.

Enabling users to scan their performance

Enabling users to scan their performance

Another focus area for me with Prevayl was around allowing users to look at past data, in way where they had the freedom and flexibility to scan performance.

What to show and how

Prevayl could track a lot, but I wanted to avoid showing data just for the sake of it. To ensure effectiveness, I mapped out the following to design analysis that was both technically feasible and valuable for users.

Overview update

Before

The original overview provided various metrics but lacked flexibility and didn’t offer much value for users’ workouts.

Based on user feedback, I compiled a robust set of overview metrics that provided just enough information to be scannable.

I also included a control to view these metrics, daily, weekly, monthly and all time.

Diving deeper into the details

Diving deeper into the details

To complement scanning information I compiled a set of metrics, inviting users to dive into their performance analysis and compare.

Visually led analysis

I designed a series of clean, visually appealing charts that allowed users to easily scan information and dive deeper if desired.

Enabling users to create their own comparison metrics

Users could delve deeper into their analysis by viewing specific metrics with additional information, such as workout intensity, and by making comparisons to extract the most useful insights.

Results

Results

Redesigning how insights were presented and interacted with led to a 12% increase in user engagement, particularly among daily active users.


Furthermore, the inclusion of tailored advice directly boosted session length, resulting in higher user satisfaction as reflected in post-survey feedback.