Oura Ring Redesign

Web browser low-fidelity mockup for an online freelancer marketplace

Overview

Problem

Conversion rates are negatively impacted on Oura's product page due to user expectations not being met. Users experience unnecessary cognitive load due to confusion at checkout, heavy copy, and lack of visual storytelling.

Solution

A mobile and desktop redesign to improve the user experience through improved product thinking, interaction design, and visual design.

Metrics

Conversion rates and cart abandonment.

My Contribution

I performed all market research and design activities including exploration, wireframes, high-fidelity designs, and interactive prototypes for user feedback and testing. I facilitated four moderated usability sessions remotely and used this feedback to iterate and improve my design solutions.


My Role
UX Designer

Tools
Figma, Adobe Illustrator


Timeline
Two weeks

Team Members

Caitlin Sowers

Background

Oura is a Finland-based tech start-up with one product: the Oura Ring, a sleep and activity tracker. This redesign has no affiliation with Oura and was used as an educational exercise.

Jump to final designs

Below is the Oura Ring's existing mobile and desktop product page:

A user flow of a business surveyA user flow of a freelance survey

Heavy copy results in unnecessary cognitive load for the user and impacts scannability. I worked to improve the information hierarchy and visual story-telling of the page, while also eliminating unnecessary friction and confusion in ring selection and check out.

Below is the existing site navigation with revised content noted in blue and new content noted in purple.

A cluster of post-it notes with ideas listed

When designing I used a mobile first framework to ensure core elements were the focus for the user.

A cluster of post-it notes with ideas listed

I played off of Oura's current branding which is excellent (👏) , social media pages, and blog to develop a style guide for the redesign. I eliminated inaccessible colour contrast and focused on increasing font size when possible.

A cluster of post-it notes with ideas listed

Initial Designs


I explored a variety of changes to improve usability of the site and have highlighted the key user flows below. My initial designs were later tested and improved upon based on user feedback.

Jump to mobile test prototype

A cluster of post-it notes with ideas listed

Oura User Flow 1

Configure ring with manual size selection

Oura User Flow 2

Add Oura ring to bag with free sizing kit

Oura User Flow 3

Edit cart and add-ons

Prototype

I developed a mobile prototype to carry out usability testing. The prototype can be viewed below but is not fully interactive. Each section must be reset to original conditions before moving on.

Alternatively, Figma files can be viewed here.

Figma Mobile Test Prototype

Evaluation & Iterations

I moderated user feedback sessions with four users who had varying familiarity with wearable technology to improve my designs. My usability testing process utilized the mobile prototype above and included:

  • Providing a brief overview of the session, encouraging participants to think out loud as much as possible and provide honest feedback.
  • Observing participants touring the page without clicking anything, speaking aloud to what struck them about it, whose site they thought it was, what they could do here.
  • Observe the participants attempt to complete six tasks to test for usability and inquire with follow-up questions regarding favourite components, least favourite components, and crucial functionalities missing.
  • Thank participants for their participation.

My test script for the sessions can be viewed here.

Iterations

1. Key Feature Summary

Most users were interested in key information upfront, rather than scrolling through the product page to learn more. Key information was largely common amongst users, including product material, battery life, charger inclusion, warranty, and product sustainability.

2. App Feature Visibility

All users were unable to identify that the iPhone visual reconfigured to display the Oura ring features when toggling through the Features section. Improving spacing and reordering this section keeps both the visual and the information in screen view on mobile.

3. Metric Visibility and Further Learning

All users were unable to read the metric graph labels and most concluded that "Read more" would help them learn more about specifications. Understanding that users did not want to be redirected to a new page while considering purchasing made it clear this redirection should be removed.

4. Free Sizing Kit Clarity

Most users were unsure if they were expected to return the free sizing kit. Some users were unclear if they were required to purchase the ring in full prior to receiving the free sizing kit, and one user wondered what would happen if none of the ring sizes available fit properly after receiving the sizing kit. Including this information within the Free Sizing Kit side drawer improved user clarity.

Final Design High-Fidelity Mockups

Following usability testing and design iterations I developed high-fidelity mockups to showcase the final designs.

A user flow of a business surveyA user flow of a freelance survey

Lessons Learned

While the project was undertaken initially as an exercise in practicing my UI skills, I later extended the scope after encountering usability issues. Establishing the project scope as a UX case study initially would have prevented scope creep, allowed me to test with users sooner, and improved overall project results. I also learned about the 8px-by-8px grid system and minimum touch targets for iOS and Android through this case study.

Final Thoughts

Overall, the results from my usability sessions were excellent and user feedback was very positive. If my designs were implemented today I would be interested in the heat mapping of the page using Hotjar and would like to review desktop and mobile KPIs such as conversion rates and cart abandonment independently as user motivation can vary between devices.

After receiving feedback from senior product designers within my network on the ecommerce funnel, I am currently undertaking a redesign of the Oura app, where customers are ultimately being driven.

Thank you to Oura for making a fantastic product that made this case study so enjoyable. 👏

Next Case Study

Contact
Email