Skip to main content

Ironman

An AR-integrated training app for triathletes

product
Tablet and mobile screenshot of the Ironman One app

Brief

Ironman Group approached us with the ambition to create the best triathlon training app after acquiring Fulgaz. They had a unsuccessful engagement with a previous agency, and is looking for a detailed oriented partner to course correct. We worked with Ironman’s head of product, product manager, and engineers to integrate research findings to bring the Ironman One app to market.

Role

Project lead and designer, with one other designer

Company

XXIX

Collection of screenshots of competitor products

Compeititor Analysis

We started out the project by researching other competitors’ platforms to familiarize ourselves with the market landscape, identify key features and pain points in current apps, and better convince stakeholders the uniqueness of the Ironman One app. 

Screenshot of a user interview session

Translating user insights into feature requirements

User interviews with triathletes were conducted to gather initial feedback around product features. In the beginning of each sprint, we reviewed user insights along with feature requirements, as well as consulted subject matter experts on the team to ensure design decisions reflect athelete’s preferences and needs.

Screenshots of the Ironman One app

From IA to production ready prototypes

We integrated insights from user experience interviews to create a refined IA, improved navigation structure, and a streamlined brand and user interface that connects riders with the information they need to perform at their best.

Screenshot of the Group rides & group page

Group rides & Groups

Group rides & Groups is a core feature of the Ironman app, as it is created for coaches to train virtually with athletes and for the training experience to be a social activity. The group rides page is organized by relevance: rides users signed up for, rides from user’s group, and all rides avaliable in the app. Users can also search for rides or schedule a new group ride. 

Screenshots showing filter and save features on the group rides page

Group Rides: Filter and personalization

Upon scrolling, users can access a set of filters to personalize their search. They can also easily save rides from the main page using the plus icon on the cards.

Screenshots of the group ride detail page

Group ride detail page

Each ride detail page contain crucial information such as elevation profile and difficulty. Users can sign up for a scheduled ride and group admins can add a ride to their group schedule. Users can also share the ride to their friends easily.

Screenshot of the group page which has a list of members

Groups

Users can search for training groups, create a new group, send/receive an invite link, schedule a ride, and leave groups. Admins can manage members and edit settings such as group privacy. 

Sceenshot of the courses overview page
Details of map interaction

Courses and map interactions

To better prepare for each race, users can review the course, as well as view videos and coach notes for each leg (swim/bike/run). I also ideated various map interactions to show both the overview and detailed course for each leg and indicate markers such as water and aid stations.

Screenshots of UI elements

UI: Cards

Each ride and groups on the Ironman app contains a vast amount of metadata. We explored different designs and introduced 3 card sizes to balance visual clarity and surfacing important content and actions for atheletes. 

Screenshot of the design system

Design System

Along the way, we documented and updated the product’s design system to create a modern interpretation of the Ironman Group’s brand, keeping in mind reuseability for future digital projects in the roadmap.

Winnie Yoe LLC