STEPX® - Fitness Membership App

Redesign the UI, enhance UX, and integrate progress tracking

Timeline: May 2020 to Aug 2021

Role:

UI/UX Design

Skills: User Research, User Interface

The STEPX app, designed for gym members, enables users to make appointments with coaches, access the gym via QR codes, and track their fitness journey. Its central aim is to provide a user-friendly and accessible platform that promotes healthy habits and encourages users to integrate them into their daily routines.

As the product designer, I redesigned the app’s user interface and overall experience, introducing a new visual identity to enhance its functionality and appeal. I collaborated closely with Peeta, the CEO, and the engineering team throughout the process.

[CHALLENGE]

The original version of the app faced several challenges. It offered a poor user experience, making it difficult for members to navigate and access key features. Additionally, the app’s design was based on the Peeta Fitness brand identity rather than STEPX, causing inconsistency with the new brand and its objectives.

[SOLUTION]

To address these challenges, I redesigned the app’s user interface to improve ease of navigation, ensuring members could quickly access key features like scheduling and gym access. I also introduced a new function—personal training recording analysis—to keep users engaged in their fitness journey at STEPX gym. Additionally, I implemented a new visual identity aligned with the STEPX brand, creating a more cohesive and consistent experience that reflects the updated brand objectives.

→ Jump to Final Design

Before & After Designs

0.0

The redesign focused on improving the app's user experience by enhancing its brand identity, increasing interactivity, and making key features like body composition tracking more accessible. The new layout ensures better organization, visual hierarchy, and ease of navigation, addressing issues with the original app's cluttered design.

The Scope of Work

0.0

The design process involved three stages: Research, UX Design, and UI Design. Research included competitor analysis and user insights. UX Design focused on user flows, prototyping, and testing, while UI Design developed grids, color palettes, and typography for a cohesive, user-friendly interface.

‍

Competitor Analysis

1.1

This competitor analysis compares four major fitness centers in Taiwan—World Gym, Fitness Factory, True Fitness Taiwan, and Curves Taiwan—highlighting key mobile app features. It identifies opportunities for STEP X to enhance its app by focusing on real-time tracking, personalized programs, and seamless booking features.

‍

UX Audit of Current the Fitness Membership App

1.2

The app needs to incorporate the new brand identity while addressing issues of poor organization and redundant information, which hinder efficient use. A lack of visual hierarchy also impacts the user experience by failing to highlight key information. These improvements are essential for enhancing usability.

Customer Journey Map / Information Architecture

2.1

From the Customer Journey Map, I’ve learned that the app lacks a clear brand identity and suffers from poor organization, making navigation and booking difficult. The onboarding process is unclear, and tracking progress is challenging due to scattered information. Membership management is also buried, with no clear notifications. Improving these areas and adding personalized engagement will enhance usability and user satisfaction.

Based on competitor analysis, the UX audit of the current app, and the Customer Journey Map (CJM), I created the Information Architecture (IA) for your Fitness Membership App. This IA is designed to streamline navigation, enhance usability, and prioritize key features such as class reservations, fitness tracking, and membership management.

User Flow

2.2

I created a user flow that efficiently guides users through the key actions in the fitness app. Throughout the flow, decision points are added to enhance user control and make the journey as streamlined as possible.

Prototyping

3.1

After gathering the necessary information, I moved on to the wireframing stage of the fitness app design. I created mockups to meticulously map out where each element should be positioned, ensuring an optimal user flow and layout for an enhanced user experience.

‍

Typography + Color + Grid

4.0

I chose orange and grey for my fitness app to balance energy with a modern, professional look. Orange represents motivation, while grey adds neutrality. I used a 4-column, 76px grid system to ensure a consistent and organized layout, creating a visually appealing and user-friendly design.

Final Design

5.0

The final design of this fitness app focuses on user engagement by offering personalized features like a body composition history tracker, calendar scheduling for personal training sessions, and a body fat tracking graph. It promotes ease of use with a membership progress indicator and a QR code membership card for quick gym access. The clean, modern UI with orange highlights effectively organizes key information, helping users stay consistent with their fitness goals.