Mobile App Design

Overview
Designing of a Crossfit Gym mobile app prototype for users who want to track their Workout of the Day (WOD), book classes and track their progress and goals.

Type of Work:
Client

Year
2019

Response
“Loved the prototype”

Length
3 Weeks

Technologies used
Marvel App
Draw.io

My role:

I was the sole UX/UI designer responsible for user research, personas, wireframes, low fidelity prototype, and user journeys/flow on this project. I had to manage my own timelines and I worked on each part of the process outlined below.

Empathizing & defining the problem:
Research & user interviews
I researched similar apps in the market and the apps currently being used by the gym members of this specific gym. I also interviewed gym members to figure out what their pain points were.

Ideation: Personas, User flows & Wireframes
I created the personas, mapped out user flows and basic wire frames on paper, and then digitally.

Prototypes:
A high fidelity prototype was developed.

Brief:

The client wanted to create a new Crossfit Gym management app combined with a member app. From an admin perspective they want to manage membership packages, manage members & trainers, have trainers manage their classes, and communicate with members. Members should be able to easily book one on one training sessions, classes, view the work-out of the day (WOD) and manage their membership packages. They also wanted members to set goals and track their progress. The client also had a rewards system (gamification) on their wish list. They want to merge the functionality of two different third party apps that their members are currently using to achieve some of these objectives. If successful, they want to resell this app, white-labelled to other gyms.

The Problem:

The gym’s members are currently using a third party app, SugarWod, to get their work out of the day and as a social platform to engage with other gym members, and using a different app, Boxing Champ, to make bookings for classes and one on one training sessions. Members and Trainers like the booking features of Boxing Champ, however they felt boxing champ just had way too many menu items and features never being used…so we need to design an app that incorporates the best of both apps, simple to use and not overwhelm users & trainers with too many features.

Project Details:

Project Goals:

Create a new gym app that users (members and trainers) can use to manage their gym sessions, subscriptions, work out of the day, book training, track progress and also rewards elements (gamification) to motivate them.

Business Goals:

To build trust amongst new users and retain their long term loyalty to the client. To create lasting habits for users to book their classes on the app. Also to provide a convenient and seamless experience at each stage of the their journey.

User Goals:

To book classes easily, reminders of classes, upgrade subscription packages easily, set goals and track progress against those goals. Engage with other users in a social aspect – see who else is attending booked classes and view leaderboard. Provide work out of the day. Access to daily announcements from the trainers and gym.

Process:

Market Research:
I compared apps that the users were currently using as well as relevant apps in the market. Clients wanted to conduct usability tests only once the design of the MVP was completed.

Competitive & Comparative analysis:
I compared the apps of two competitors the users are currently using and a few more that I discovered online. I analyzed the competitor’s goals for their site, main features and strength and weaknesses to see how the client could compete. I found that simplistic navigation provided for a better user experience as well as clear “Call to Actions” and a modern, attractive interface. Users preferred a more focused app to being overwhelmed with too many features in an all-encompassing app. Users really seemed to enjoy a social aspect of an app.

Personas:

By performing in-person interviews and conducting research I defined two emerging personas: casual gym members and dedicated CrossFitters. Below are the personas I’ve built on each.

Defining user & task flows

I used Post-it notes for trying out different flow scenarios, I narrowed my focus to high-level goals:

– Simplify navigation
– Effortless class management (bookings, cancellation, view attendance)
– Prominent Workout of the Day
– Stats and goals
– Visible Rewards system

Simplifying Navigation

I mapped simple user journeys to plan the information architecture, in order to have a clear drop down mobile menu with the most important features, and descriptive call to actions to lead user flow efficiently.

Wireframes:

I used Marvel App to draw medium fidelity wireframes for each screen. This stage involved a lot of planning in keeping the layout simple with only the necessary features on each screen. I created 3 sets of wireframes for each user level that will be using the app (Admin, Trainers and members). Each wireframe was linked with another creating a working prototype of the most basic features.