User Experience Design for Fitness Brand

User Experience Design for Fitness Brand

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.

Client Review Session
Helped to Align Insights and Finalize the Scope for Strategic Direction

The client review session served as a pivotal moment to share key insights from research, align on the problem statement, and finalize the project scope. By presenting findings and engaging in collaborative exercises, the session ensured clarity and strategic focus moving forward.

A SWOT analysis of the brand and user experience was conducted to present key insights from the user research and competitive analysis completed so far.

Using the 5 W's and How framework, a problem statement was crafted to illustrate the core challenges and synthesize findings for the client review.

The session transitioned into a scope refinement workshop. Activities included brainstorming solutions for the problem statement, prioritizing ideas using a grid, and voting to decide on the deliverables.

The insights shared during the workshop were well received, and we successfully finalized the project scope. This included determining the final deliverables, which are: reorganizing the app and its features, implementing a unique seasonal onboarding process, creating a design system, and establishing brand guidelines.

A SWOT analysis of the brand and user experience was conducted to present key insights from the user research and competitive analysis completed so far.

Using the 5 W's and How framework, a problem statement was crafted to illustrate the core challenges and synthesize findings for the client review.

The session transitioned into a scope refinement workshop. Activities included brainstorming solutions for the problem statement, prioritizing ideas using a grid, and voting to decide on the deliverables.

The insights shared during the workshop were well received, and we successfully finalized the project scope. This included determining the final deliverables, which are: reorganizing the app and its features, implementing a unique seasonal onboarding process, creating a design system, and establishing brand guidelines.

Product Analysis
Identified Opportunities for Competitive Product Design

The product analysis explored the structure and usability of Run Across America’s mobile app to uncover opportunities for improvement. By documenting the app’s architecture and engaging users in organizational exercises, this step identified key areas to enhance feature discoverability and navigation.

Two sitemaps were created to document the app's architecture. One mapped the current placement of features, while the other captured the UI design of those features to understand the navigation flow.

A card sorting tool was used to organize features and pages more effectively. This exercise, shared with the RAA team and a small user group, generated a heatmap, distance matrix, and dendrogram to inform the app's structural refinements.

The analysis revealed that while RAA’s feature placement wasn’t drastically different from larger competitors, some features were harder to discover due to placement within pages. Additionally, the UI design of specific elements hindered the visibility of otherwise well-placed features.

Two sitemaps were created to document the app's architecture. One mapped the current placement of features, while the other captured the UI design of those features to understand the navigation flow.

A card sorting tool was used to organize features and pages more effectively. This exercise, shared with the RAA team and a small user group, generated a heatmap, distance matrix, and dendrogram to inform the app's structural refinements.

The analysis revealed that while RAA’s feature placement wasn’t drastically different from larger competitors, some features were harder to discover due to placement within pages. Additionally, the UI design of specific elements hindered the visibility of otherwise well-placed features.

Sitemap Refinement
Guides the redesign of the App’s Architecture

This stage focused on reimagining the app's architecture to enhance the user experience based on research findings. A series of sitemaps were developed, each offering a unique approach to organizing features and navigation. An A/B test with stakeholders and users determined the most effective design for the app's structure.

Sitemap A was developed strictly based on the card sorting results, reflecting user input directly.

Sitemap B was built on Sitemap A but refined to align with users' needs more effectively, incorporating practical adjustments.

Sitemap C expanded upon Sitemap B, rearranging and adding features informed by broader research insights.

The A/B test compared the three designs, with both stakeholders and users favoring Sitemap C for its thoughtful balance of research insights and user-driven modifications. Sitemap B was a close second, followed by Sitemap A. Stakeholders ultimately selected Sitemap C, prioritizing user satisfaction and strategic enhancements to the app's architecture.

Sitemap A was developed strictly based on the card sorting results, reflecting user input directly.

Sitemap B was built on Sitemap A but refined to align with users' needs more effectively, incorporating practical adjustments.

Sitemap C expanded upon Sitemap B, rearranging and adding features informed by broader research insights.

The A/B test compared the three designs, with both stakeholders and users favoring Sitemap C for its thoughtful balance of research insights and user-driven modifications. Sitemap B was a close second, followed by Sitemap A. Stakeholders ultimately selected Sitemap C, prioritizing user satisfaction and strategic enhancements to the app's architecture.

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.

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.