PRODUCT DESIGn: APP redesign
Oura home screen redesign
© Oura
Oura is a premium biometric wearable with an associated app experience that expands beyond just the set up of the physical ring.
Because the ring has no physical interface, all interactions with the device are through the app.
I reimagined the relationship between Oura's app and wearable device.
Overview
Role
Solo product designer
Project timeline
1 week
Platform
Mobile (native app)
Tools
Figma
The problem(s)
The app lacks organization of modules and therefore navigation
There's also a lack of readability and accessibility
Assumptions
The lack of efficiency when accessing data is causing decreased engagement
Not all users are continuing their subscriptions
The business goal(s)
Track satisfaction of accessing in-depth data
Increase subscription conversions
Tactical goals
Redesign a user-centered experience that:
increases engagement
has a cohesive relationship between the home screen and profile
prioritizes information for ease of access
Constraints
For what it's worth, this was a design challenge.
I had no access to Oura's data or user research
I'm working without the aid of a PM or engineer
I don't have the ring, and you can't use the app without it
→ It's not uncommon to start designing before you have the physical product in your hands, so this was an excellent example for me to learn what working with manufacturing could be like.
Research
Current (I mean past) app audit
As stated in my constraints section, I do not own an Oura ring, and the device is necessary to access the app, so my work was based on an older version (V3, 2023).
I found three versions of the home screen. I made an assumption that it could be dynamic, based on the time of day. Readiness could be shown to users in the morning, Activity Goal Progress throughout the day, and Sleep in the evenings.
Again, because there is no physical interface on the Oura Ring, the FABs (floating action buttons) are the main way to start recording an exercise.
In the second screen, there is a CTA (circled), but it isn't as easily accessible on the dynamic Readiness and Sleep screens.
I used Figma's Able plugin to determine that both the “Record workout HR” CTA button and the “Activity Goal Progress” text did not pass contrast accessibility.
Lastly, the app home screen was so incredibly long. There are so many different interesting biometrics that the ring can read, yet I found the data to be too sparsely spaced out.
Data could be far better readily available.
The competitive landscape
There were a number of products to consider, but I wanted to isolate to the popular products with similar price points. There were more ring products like the Samsung Galaxy Ring, but I focused on Fitbit, Garmin, Whoop, and Apple Watch.
UI Design
Here's where I did things differently.
I used Oura's brand assets like typography and color palette, however I significantly reduced the usage of images. To zero.
→ This was because I focused on accessibility, data availability, and intuitive navigation.
With more time on a real project, I would have had access to the design system, which would make the experience feel more 1:1.
Home screen
The main improvements are
reducing clutter by improving the screen navigation
avoiding accessibility or readability issues
the biggest thing: since there is no interface on the ring, I made the ability to start an exercise much easier.
Movement tab
Here, the user sees quick data like step progress, calories burned, and inactive time.
Below the quick stats is:
an info text regarding variable calorie burn goals based on readiness
the same "start an exercise" CTA (which does pass accessibility)
and the three most recent exercises, with a text link below to see more
By tapping “daily movement”, the user sees their daily step data visualization.
The idea is, after getting a workout in, the graph will spike and add color.
Ready tab
Here, the user sees their readiness score, heart rate variability, and respiratory rate.
There was a lot of data to include in this screen, so realistically, an issue I might run into is having to add additional sub-navigation links.
Alternatively, certain biometrics could be selected to customize or personalize this dashboard, which was an interesting pattern I saw in Whoop competitive research.
By tapping “heart rate variability”, new data appears.
Sleep tab
Here, the user sees their sleep score, sleep efficiency score, and resting heart rate.
The graph below shows data from the past seven days, ideally functioning with a horizontal swipe to get a quick idea of past scores. However, I’m afraid that might cause confusion, since there is another mode at the top of the screen to switch between dates.
This made me wonder if there was a better place to organize the summarization of data, like in a weekly trend section.
Tapping “sleep efficiency” shows the total sleep the night before with a graph and legend indicating what levels of sleep were achieved.
This is interesting data that I think a lot of users would find more interesting than the past 7 days graph to the left. So I would want to test to see what data visualizations different organizations make the biggest impact on the user.
This could also point towards further dashboard customization.
Before vs. after
Before
After
The main differences
Looking at them side by side, I first wonder what the barrier to adoption would be like, since by simplifying, I am actually somewhat making the design more complex. This would be a really fun opportunity to concept and usability test.
In addition to that, I kind of balked at first when I did compare the before and after. There's a lot of personality that I feel I reduced by removing the space-consuming imagery, but the experience is made more efficient with the new navigation.
One thing I would like to point out is that the navigation I designed is in essence replicated by the original version's bottom navigation bar. My feeling was that by managing the content on a singular home screen would be easier than switching tabs, but that is something to test as well.
Impact
Success metrics to monitor
Some of the metrics I would like to measure for success of this redesign include:
Home screen: assess how consistently users are checking in daily
Profile: measure the percentage of people engaging with social features on a weekly basis
Retention, to determine if users are understanding, staying, and returning, etc.
As a reminder of business model, the first month’s subscription is free, so in general, I would want to measure how many users are converting after that.
Reflections
Challenges and personal growth
It was a challenge to work on a full redesign of the home screen (and profile, which I may or may not upload at a later time) without the resources of a PM or engineer, or even any real data from Oura. It was up to me to consider the potential of every change or update plus with the additional time constraint of a traditional design challenge.
Ultimately, I'm proud of what I put together. It was an ambitious project that proves my durability as a product designer, product manager, and digital designer.
Before: Oura's profile screen
After: my redesigned version
What I would do differently
If I could go back to starting this project, there's some things I would want to do differently.
I would have dived deeper into the visual brand identity, but my priority was data organization and information architecture.
I would have liked to explore gamification and customization on the home screen, but I had time constraints.
