Redesigning a sleep and activity tracker’s e-commerce page — a UX case study
--
As a new designer looking to up my UI/UX skills, when I came across the Oura ring, a sleep and activity tracker, and thought:
I want to buy this… why are they making it hard for me?
…I got to work.
Background
Oura is a Finland-based tech start-up launched in 2013 with one product: the Oura Ring. Did I mention the ol’ Duke of Sussex wears one? Pretty big deal.
I spent one week redesigning the Oura Ring’s mobile and desktop “Buy” page to improve user experience, cart abandonment, and conversion rates. This redesign has no affiliation with Oura and was used as an educational exercise.
Below is the Oura Ring’s existing mobile and desktop “Buy” 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 product elements were the focus for the user.
I played off of Oura’s current branding (excellent 👏 ), social media pages, and blog to develop a style guide for the redesign. I really liked their minimal and clear typeface but wanted to improve accessibility for more users.
I eliminated inaccessible colour contrast and focused on increasing font size when possible.
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 🎉.
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 which can be viewed here.
Alternatively, various functionalities of the prototype are shown below.
Gradual configuration of Oura ring
Sizing kit pop-out
Oura ring features toggle
Social proof feature
Call to action sticky header
Pop-out shopping bag
Usability Testing & 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 Designs
Following usability testing and design iterations I developed high-fidelity mockups to showcase the final designs.
Takeaways
The best/worst part of being a new UX/UI designer is just how much you learn each day; early day growth is exponential. Since my redesign, I’ve learned from the following mistakes:
- Not following the 8px-by-8px grid system, which Apple formally endorses and Material Design Guidelines suggests. This grid system works because the most common screen sizes are divisible by 8.
tldr: Use multiples of 8 to define dimensions, padding, and margin of both block and inline elements. - Not considering the “fat finger” problem from Nielsen Normal Group.
tldr: Use a minimum touch target of 44px @1x for iOS and 48dp/48px @1x for Android. - Struggling to limit the scope of the project. Excited by the work I was doing, the product page quickly became the shopping cart side drawer, which quickly became the entire shopping cart… and suddenly WHY NOT REDESIGN THE ENTIRE USER FLOW? Luckily I stopped myself there.
tldr: Define your scope clearly before starting a redesign and stick to it.
Final Thoughts
If my redesigns were tested I would be interested in usability sessions and live A/B testing or session recording. I would also like to review mobile and desktop analytics such as conversion rates, cart abandonment, and heat maps independently as user motivation can vary between devices. More information and an interactive prototype can be found on my portfolio.
Thank you to Oura for making a fantastic product that made this case study so enjoyable.
PS — I’m not saying Prince Harry endorses this redesign… but I’m also not saying he doesn’t.
If you’d like to chat about UI/UX design, provide feedback on my portfolio, or want to say hi, get in touch on twitter or via ✉️ caitlinsowers@gmail.com.
