MoveLab

MoveLab is a membership-based fitness center with classes for all levels, including yoga, HIIT, strength training, spin, and meditation. We're developing an online scheduling system to make it easier for members to manage their classes.

How-Might-We Statement

How might we design a mobile app that allows users to easily browse and schedule classes that fit their needs and goals?

Timespan

15 Week, Oct 2022–Feb 2023

Process

User Interview, User Persona, User Journey Mapping, Wireframes, Usability Testing, Interaction Design

Tools

Figma, Illustrator, Notion, Google Survey

Team

UX Designer (1)

Research/Discovery

1. User Interview + Affinity Mapping

Goals
I conducted initial user interviews to answer the following key questions:

What types of information do users value when choosing a group fitness class?
What frustrations do users currently experience with group fitness courses?

Participants

Five participants aged 24–43, based in the USA.
All have prior experience with fitness classes or regularly attend group fitness sessions.

I created an affinity diagram based on the User Interview results to observe trends and clusters

2. Insights

Trends and clusters could be observed in the Affinity Diagram.

3. Synthesized User Research - User Personas

I developed 3 personas for this project based on the User Interview and Insights.

Ideate

1. User Flow

Based on my research, I identified two key functions that users prioritize: adding a class and canceling an existing class. To better understand user interactions, I created flowcharts mapping the possible action paths for each scenario.

2. Paper Wireframe

I sketched key screens on engineering paper, using rapid iterations to explore and refine the most effective and efficient ways to present information.

Final Product

Takeaways

1. Start Small

Defining the app’s core structure through user interviews proved invaluable. By focusing on the two key actions users value most, I was able to anchor the project and avoid feeling overwhelmed by the potential number of screens the app could contain.

2. Thinking from the User's Perspective

Usability testing is essential to a user-centered design process. Having grown up on the internet, I’ve encountered some of the worst-designed websites imaginable. This familiarity made me overlook certain usability issues in the MoveLab app during the prototyping and design phases. However, after two rounds of testing, I uncovered significant navigation challenges that users faced, reinforcing the importance of continuous testing and iteration.

Lo-Fi Prototype

1. Key Flows Lo-Fi Prototype

This version of the low-fidelity prototype was created in Figma based on the paper wireframe. User research revealed that users want a seamless way to book a class on their phone, whether for immediate or future sessions.

2. Usability Testing

Why am i conducting usability testing at this stage?
I want to uncover user pain points and usability issues before advancing to UI and visual design. While jumping straight into UI design might speed up the process, involving users early ensures that their needs remain central throughout the project.

Approach: Moderated remote usability testing via Zoom
Tool: Participants will interact with the low-fidelity prototype in Figma
Key Performance Indicators (KPIs):Time-on-Task and User Error Rate

3. Update Lo-Fi Prototype

I redesigned portions of the low-fidelity prototype to address key user frustrations identified during usability testing. For example, I added the days of the week to the date picker and clarified the language on the confirmation page to reduce confusion.

Hi-Fi Prototype

1. Visual Design

I chose a complementary color palette of purple and orange to reflect MoveLab’s dual focus on strength and mindfulness. Purple conveys a sense of calmness, aligning with yoga and meditation, while orange represents energy and movement, fitting for weight training. To reinforce the brand’s dynamic identity, I designed a distorted logo that conveys a sense of motion and kinetic energy.

2. Hi-Fi Prototype

Having a thoroughly tested low-fidelity prototype streamlined the design process. I used Figma to create a fully interactive high-fidelity prototype and Photoshop to enhance and unify the aesthetics of stock images sourced from Unsplash.

3. Usability Testing: Hi-Fi Prototype

Method:

Moderated remote usability testing via Zoom
Participants will interact with the low-fidelity prototype in Figma

Key Performance Indicators (KPIs):

Time-on-Task
User Error Rate

User Tasks:
Participants will be asked to complete three key actions in the app:

Book a specific same-day class
Cancel the same-day class they just added
Schedule a future lesson at a specific time of day

This version enhances readability while keeping your original intent intact. Let me know if you'd like any further refinements!

Movelab