Retainer

OOFOS

Crafting a seamless user experience between their digital subscriptions and fitness products to support people on their health and wellness journey.

Live Site oofos.com

Designed at The Stable, Part of Accenture Song

Services

UI Design
UX Design
UX/UI Research
Strategy

Team

Lead UX/UI Design — TJ Hari
Strategy — Victoria Colson
Development – Owen Dupree
Project Management – Brayden Tickell

Overview

OOFOS is a footwear brand that makes athletic footwear with OOfoam technology, which absorbs 37% more impact than EVA foam, the material found in most athletic shoes. Active recovery footwear supports people on their feet all day to recover faster and reduce stress on the rest of the body. OOFOS has been a retainer client for 4+ years, our agency continues to provide value as we design, test, and deploy optimizations to grow the business and elevate the user experience.

Challenge

Through out the retainer engagement I needed to create impactful design solutions with small budget and minimal time each month. Over the years the OOFOS team has expanded now raising a new challenge of managing expectations and education with new stakeholders. My design solutions require strategic insights to show the value of any new optimizations.

The overall user experience wasn’t quite intuitive for effortless shopping when I first joined onto this project. Our strategy insights uncovered OOFOS customers were abandoning their cart and returning users were not being recommended similar products. We needed to create components to increasing the average order value and ensure a smooth experience adding products to cart.

We need to A/B test multiple designs to collect data on which decisions will have the most impact before deploying globally. Development changes move slow, but strategically intentional. OOFOS was notified for the website not being fully compliant for accessibility. I needed to conduct an ADA audit to discover any non-compliant elements and remedy design solutions for them.

Approach

I conducted an ADA audit to discover many accessibility updates across the site one bigger callout was the OOFOS green color was not compliant. I designed compliant solutions for all the hover and focus states in the design system.

On the product list page I have added breadcrumbs for navigation, updated the product cards with lifestyle imagery and quickshop functionality, created promo tiles for new releases, added product badges and added visual filters for simple category browsing.

I redesigned the product detail page to include content about the OOfoam shoe technology, testimonials from customers and professional athletes, video content about OOFOO’s breast cancer donation goals. Above the fold I added breadcrumbs for navigation, improved zoom modal experience, updated the variant swatches, designed tool tips, created icons for the ‘best for’ component, added image gallery, and simplified the product names merchandizing them by product type.

I collaborated with strategy to design many new global components which included a customizable shop collection section, a tabbed category carousel section, an account dashboard for returning customers to order previous orders, size guide modal for both shoes and apparel, and updating the mini cart to have a better user experience and include cross sell products.

Results

My design solutions over the years have evolved OOFOS digital experience and built a great trusted relationship and OOFOS have signed on for another yearly retainer contract. My design efforts have been deployed successful after looking into the analytics from the past year.

43% increase in returning customer rate

29% increase in total sales

14% increase in average order value

Before

After

Product List Page

Our improvements to the product card greatly impacted the product list page. Using lifestyle images for shop category links allows customers to browse products in a realistic setting and urges them deeper into the conversion funnel.

Improvements

Visual shop category links
Repositioned SEO copy to bottom
Product card redesigned
Added eyebrow product type
Breadcrumbs for navigation

Adding lifestyle imagery to product cards
Created promo tiles
Added product badges
Updated quickshop functionality
ADA compliance

Before

After

Product Detail Page

Above the fold we redesigned the OOFOS experience to have a more immersive visual product detail page with a image gallery style layout with video functionality. Updating the color variants to image thumbnails. We convinced the client to re-merchandise their product catalog to reduce naming length and increase SEO impact. Building a strategic, robust, and engaging page.

Improvements

Added eyebrow product type
Added Short description
Breadcrumbs for navigation
Image gallery style
Improved zoom modal experience
Updated swatches to image thumbnails

Added product & award badges
Tool tips for low stock
Added wishlist functionality
Created ‘Best For’ category icons
Shipping & returns modal
Approved for ADA compliance

Full Product Detail Page

Product Page Improvements

Further down the page we created many net-new sections to further build out content to support the products features and the OOFOS brand. Content includes product technology, testimonials, product awards, brand beliefs, reviews, related products, and FAQs all further supporting the credibility of the product.

Global Sections

Shop Collection

Originally this section was restricted to only two collections women & men. We had the opportunity redesign with more flexibility accounting for 2-6 collections. Now powered with multiple merchandising options to target specific audiences if needed.
Tabbed Carousel

This section also limited to only one carousel of products. There was an opportunity to redesign the product card and add more tabs for deeper discovery for best selling products.
Mini Cart

The mini cart was redesigned to feel more aesthetically consistent with the overall OOFOS brand. In addition to adding upsell products based on similar size recommendations before customers continue to checkout.
Account Dashboard

We added additional functionality for customers to track their packages, order products again, and update account information.
Size Guide

Each OOFOS shoe type and apparel product fits slightly differently so we created a template for each type unique size guide.

UI Kit

The UI Kit organizes a range of elements from type, color, buttons and components across the site. All designed with ADA compliance and developers in mind to make a seamless handoff to build the site.