How
I
redesigned
key
flows
in
the
IRONMAN
App,
simplifying
the
UX,
improving
the
accessibility,
and
bringing
it
in
line
with
the
Human
Interface
Guidelines
Role:
UX Review, Design System, Wireframes, Prototype
Setting:
Unsolicited Redesign
Tools:
Figma, Figjam, After Effects, Lottie
The IRONMAN Tracker App is an app for fans, friends, & family to track athletes’ times & progress in any of the 40 races worldwide each year. Users can see race info and set up trackers to follow along or view the results of past events.
Currently, the IRONMAN Tracker App has a number of navigation and accessibility issues that conflict with the Human Interface Guidelines and contribute to an unfamiliar UX.
User must be able to find and view information about a particular event
User must be able to set up a tracker for a particular race participant
User must be able to revisit any athlete tracker they've added
User must be able to find and view information about a particular event
User must be able to track a race participant's live progress and results
User must be able to revisit any athlete tracker they've added
In order to address the visual accessibility issues in the current designs, I created a new design system with the same core colouring but with higher contrast and more consistent iconography.
From this:
.png)
To this:
.png)
Revised information architecture
Viewing race information
The key changes to this flow are in the information architecture of the race event page.
When users open an event, they're now greeted with information prioritised in an F pattern to match natural eye movements. All available actions are contained in a vertical scroll component, simplifying the navigation & enabling the user to find to their next step faster.
Streamlined flow
Setting up a tracker
Adding trackers to particular athletes is the app's core flow. Bringing the entry points for this flow to the homepage highlights its value earlier and helps the user reach their goal faster.
Once a tracker is added, the user is immediately taken to the athlete's map where they can see visually how far along the athlete is along with their split times.
Stored action history
Revisiting your tracker
Once a tracker has been created, its stored in the 'trackers' page accessible within the event and on the 'trackers' page in the bottom navigation bar.
Having a history of created trackers enables the user to find a particular tracker even if the event has past, and develops an a sense of investment as they follow more races over time.
