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.
Below is the Oura Ring's existing mobile and desktop product page:
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.
When designing I used a mobile first framework to ensure core elements were the focus for the user.
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.
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.
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.
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:
My test script for the sessions can be viewed here.
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.
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.
Following usability testing and design iterations I developed high-fidelity mockups to showcase the final designs.
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.
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. 👏