An iOS App for Getting in Shape with Your Friends

Overview

COVID-19 has reshaped the way we live our lives, including the way we work out. What is the optimal solution to catering to these changing needs in terms of health and fitness?

This was a side project to challenge myself to design an innovative mobile fitness app with a competitive edge through user research and visual design.

Foundational Research

I received consent from participants to record our Zoom session. Patterns began to emerge after digging into people’s underlying fitness challenges and needs, and I categorized the qualitative data through an affinity diagram using Figma.

Qualitative Interviews

After developing a script and digging into people’s underlying fitness needs, I reviewed the videos and jotted down memorable quotes:

Isabel

Remote Startup Director

“My Fiancé and I always go to the gym together. When I see him changing into his workout clothes, it motivates me to put mine on. I feel much less motivated to make a trip to the gym by myself. If I had to go to the gym by myself, it would need to be located much closer than ours currently is.”

Zim

MBA Candidate

“I don’t want to take notes at the gym in between sets and do extra work to track my progress. I’m not super concerned with being a body builder type of person. My main concerns when it comes to fitness are athleticism, longevity, and being in touch with basketball.”

Francis

Remote Screenwriter

“When you are younger you do a lot of exercise with your friends, playing sports without even realizing it. For the past couple years, I have been working from home and now I am doing grad school remotely. It’s harder now to motivate myself to get out of my desk routine and get outside.”

Mapping the Data

The next step was to categorize the qualitative data through virtual sticky notes on an affinity diagram in Figma.

Insights

I reviewed the interview videos, the affinity diagram, and discovered three distinct trends. It became clear that people wanted a fitness experience that addressed: self care and growth, longevity, and clear instructions.

Self Care and Growth

• Fitness should involve a social aspect.
• People prefer activities that involve friends.
• Fitness improves other areas of life outside of the gym including recreational and team sports.

Exercise for Longevity

• Improvement in overall health is expected.
• People need an exercise program that will not be harmful to their joints.
• Less is more when it comes to fitness. Over-exercising seems unnecessary and dangerous.

Need for Instruction

• Fitness should generally involve equipment, but using the equipment seems complicated.
• People want to be shown exactly what to do and how to do it by an instructor.
• In a virtual world, videos help people learn how to do exercises properly.

Competitor Analysis

What do competing apps have to offer?

The interviewees reported using a variety of apps to serve their fitness needs. I performed a competitor analysis of these products and some top-rated fitness apps to understand how Lean Crew compares.

Preparing for Ideation

Next, my partner and I derived problem statements and empathy maps to develop a clearer picture of how fitness played a role in people’s lives.

This step helped us categorize and understand our potential users before designing solutions for them.

Whiteboarding Sessions

For the ideation phase, we decided on three whiteboarding exercises and conducted them in the following order:

1. Brain dump — brainstorming activity to capture as many solutions as possible.
2. Worst idea — come up with outrageous solutions and weigh the pros and cons.
3. Assumptions — list out the assumptions we have of users and why they would value our product over existing solutions.

Worst Idea Whiteboarding Session

Low-Fidelity Prototype

I created low-fidelity screens in order to quickly test initial concepts.

• Icon and mockup plug-ins provided sufficient context for users without distracting them too much with in-depth copy and imagery.
• Adobe XD allows you to move from creating screens to prototyping quickly, which was ideal for testing initial concepts and identifying major issues early on.

Low Fidelity Prototype in Adobe XD

Full low-fidelity prototype can be accessed here.

Moving to High-Fidelity

After putting the low-fidelity prototype in front of users, I gained valuable feedback which helped me catch usability issues I didn’t catch on my own.

In order to work in high-fidelity, I researched other iOS apps using Mobbin, inspected Google’s Material Design color generator, and found a typography tool which pairs fonts using machine learning to build a design system with reusable components.

Design System

To prepare for the move to high-fidelity, I created a design system to establish the Lean Crew brand voice.

• Brand Voice — establishing the tone of the copy.
• Color Palette — choosing colors that are energizing, fun, and professional.
• Logo and Icons — designing a modern logo with the kettlebell to signify intelligent fitness.
• Typography — developing copy styles and typography inspired by competitive analysis of fitness apps.

Lean Crew App Design System in Adobe XD

High-Fidelity Prototype

After more user testing, I felt confident enough to move to high-fidelity with less concern for major usability issues arising.

High-Fidelity Prototype in Adobe XD

Full high-fidelity prototype can be accessed here.

Thank you for reading!