User Experience Design for Fitness Brand

User Experience Design for Fitness Brand

Client
Run Across America
Role
Lead UX Designer
Industry
Fitness
Year
2022

Run Across America Revamps Mobile App to Enhance User Experience and Boost Customer Retention

Client

Run Across America (RAA) is an online fitness company that organizes community-oriented races for its users. By hosting running events and challenges, RAA raises support for causes that they and their community care about. RAA is focused on improving its product experience to increase revenue, allowing it to support its users and expand its user base.

Problem

RAA has identified friction in its mobile app and aims to address these issues by identifying and resolving pain points in its user experience and interface design. By doing so, RAA aims to enhance customer retention to improve their return on investment when marketing its running events.

User & Audience

This project targeted Run Across America's existing customers who actively participated in their running events, with a focus on previous customers who did not participate in recent running events.

Scope & Constraints

The project began with a request to identify problem areas in the RAA mobile app interactions and provide solutions for a more user-friendly experience. Initially, the scope was incomplete, but once defined, it became limited due to a tight timeline and budget. This constraint made it challenging to gather insight from customers to improve the app experience.

Role & Responsibilities

As the sole designer for this project, I worked closely with the founders and the marketing manager to make critical design decisions that would effectively support their business and its users. My responsibilities encompassed user research, competitive analysis, facilitating workshops and progress reports, developing wireframes and prototypes, and presenting the deliverables and the overall user experience.

Design Thinking Method Was utilized to identify RAA’s Mobile App Challenges, User Requirements, and Business Objectives

The five stages of the design thinking approach proved invaluable for identifying and addressing pain points in the RAA mobile app. The empathize and define phases of this methodology were particularly effective in gaining insights into both users and clients. Despite a tight timeline, this method provided an excellent framework for understanding RAA's users, competitors, and market positioning.

Sitemap Wireframes
Shaped the Solution's Layout and Function

Wireframing was essential for visualizing and testing the solution’s structure and functionality. Starting with low-fidelity wireframes, we outlined the layout of each page and iteratively refined the design to address user and client needs effectively.

Lo-Fi Wireframes

This process enabled quick exploration of ideas and iterations on layout design. Through multiple refinements, the wireframes evolved to address both functionality and the project goals effectively.

Lo-Fi Wireframes

This process enabled quick exploration of ideas and iterations on layout design. Through multiple refinements, the wireframes evolved to address both functionality and the project goals effectively.

Onboarding Wireframes Ideation
Refines the User Experience in two stages

The wireframing process for onboarding began with a stakeholder meeting to define page requirements and align on user goals. This led to the creation of a detailed user flow and low-fidelity wireframes, which were iteratively refined to address client and user needs effectively.

User Flow
Lo-Fi Wireframes

A comprehensive user flow was developed to improve the onboarding experience for various user types, including new users, returning users from previous seasons, and current season participants.

Initial wireframes focused on organizing required content and defining functionality within the pages of the user flow. Iterations then refined the overall layout and structure of each page’s content.

User Flow
Lo-Fi Wireframes

A comprehensive user flow was developed to improve the onboarding experience for various user types, including new users, returning users from previous seasons, and current season participants.

Initial wireframes focused on organizing required content and defining functionality within the pages of the user flow. Iterations then refined the overall layout and structure of each page’s content.

Brand Research
Shapes Guidelines and Design System

Brand research was conducted to align stakeholder expectations with RAA’s mission. Insights from this research informed the creation of the brand guidelines and design system, ensuring consistency in design and messaging.

Brand Workshop
Summary

A collaborative workshop defined RAA’s brand space, personality, core values, and design preferences.

The workshop led to decisions that clarified RAA's brand strategy, paving the way for the creation of their brand guidelines. Additionally, RAA's stakeholders agreed that developing a design system based on Google’s Material 3 Design System would be optimal for their brand and development process.

Brand Workshop
Summary

A collaborative workshop defined RAA’s brand space, personality, core values, and design preferences.

The workshop led to decisions that clarified RAA's brand strategy, paving the way for the creation of their brand guidelines. Additionally, RAA's stakeholders agreed that developing a design system based on Google’s Material 3 Design System would be optimal for their brand and development process.

Scope alignment enables the achievement of project objectives and results in positive feedback.

The project received positive feedback overall. Despite the undefined scope, we successfully redesigned the mobile application to address the original goal of removing friction from the user experience. The onboarding template was utilized for the upcoming running event, although the remaining designs were deferred for future development.

Lesson 1
Lesson 2
Lesson 3

This experience highlighted the importance of clearly defining objectives and requirements, as well as establishing a well-defined path to achieve the desired outcomes.

Reflecting on the project, I recognize that a deeper exploration of the goals and clearer time expectations would have been beneficial. This approach would have allowed for a more thorough discovery phase, providing the necessary insights to create designs that effectively addressed the most pressing concerns.

Thanks for exploring my work!

It’s been great showing you around so far! Not quite ready to wrap up? Feel free to revisit any project—use the skill filter to find what you're looking for. If you’re ready to talk about what we can create together, I’d love to chat.

Let's chat
button label
Let's chat
button label
Let's chat
button label

Explore Projects

Skills Filter

All
Product Design
UX Design
Mobile Design
Web Design
Design Systems
Experience Mapping

Prupay

View project
View project

RAA

View project
View project

B&O

View project
View project

Emote

View project
View project

AOS

View project
View project

ROO

View project
View project

Uncork

View project
View project

B&O

View project
View project

Emote

View project
View project

AOS

View project
View project

Prupay

View project
View project

RAA

View project
View project

B&O

View project
View project

Emote

View project
View project

AOS

View project
View project

RAA

View project
View project

B&O

View project
View project

Emote

View project
View project

AOS

View project
View project

Prupay

View project
View project

Prupay

View project
View project

RAA

View project
View project

B&O

View project
View project

Prupay

View project
View project

RAA

View project
View project

B&O

View project
View project

Emote

View project
View project

AOS

View project
View project

Uncork

View project
View project