Sep 18, 2019

11 min read

Improving Mobility & Preventing Injuries through an App — A UX Case Study

An app to help active people improve their mobility and keep doing the things they love.

Range of Motion: More mobility, fewer injuries

“Range of Motion is defined as both the distance a joint can move and the direction in which it can move.”

Range of Motion (ROM) Coach is an app by Precision Movement. The mission of Precision Movement is to help active people get back to and keep doing the things they love. They do this by eliminating pain, healing and preventing injuries and improving mobility in day to day lives.

I was hearing about using an app to heal/prevent injuries or improve mobility for the first time. I have always wondered if there was an easier or affordable way to minimize pain while working out. My curiosity was one of the reasons that led me to choose this project.

Project Scope

In this project, I and my teammates were tasked to design an intuitive and clean iOS application for users who are physically active and want to continue to move around freely and without pain. The app will show them how and teach them what they need to know for injury prevention and movement longevity. In addition, the app will also offer the users to take a fitness assessment and add a personalized exercise routine to their schedules to heal or prevent injury and maintain mobility.

My Role

As one of the UX Designers in this project, I was responsible for conducting the research, collection of data, creating personas, creating a user flow, sketching out ideas, designing low-fidelity, mid-fidelity and some high-fidelity wireframes, prototyping, and usability testing in a three-week-long sprint.

Why ROM Coach?

When it comes to maintaining our fitness, most of us push ourselves hard without giving any thought to preventing injuries or improving mobility along the way.

“Movement and mobility are treated as an after-thought, when in fact restoring optimal function and mobility should be prioritized over outcomes like strength, power, and endurance because when neglected, injuries will occur reversing the performance gains you worked so hard for.” — Eric (Founder Precision Movement)

Our client experienced major back surgery when he realized that he needs to help active people to move freely and without pain.

It is not easy to find helpful instructions or courses to educate people on how to prevent injury or increase mobility based on their physical condition. Moreover, there are not a lot of phone apps that let the users create a personalized schedule out of the recommended exercises given by the coaches.

We followed the human-centered design approach to make sure that the design decisions were in line with and supported by user research and feedback.

Research: Getting to know the users

The first step was to understand the users and why would they be willing to use ROM Coach. We reached out to people who already knew about Precision Movement and people who we considered generally physically active (those who play sports or workout at least once a week).

The research methodology that we used was online surveying through emails, Facebook groups, and Reddit. Due to the time crunch, the survey was conducted for a day and a half, and with that we received a good enough response.

With the survey, we wanted to determine:

How often they exercise or do sports and the kinds
How long do they take to recover from the physical activity
What measures do they take when they get injured during workout or sports
What kind of fitness/mobility apps they use and what features do they like and dislike about them
Their reasons to use those fitness/mobility apps
What they think about using an app to improve mobility or heal injury

Analyzing the Data

After the survey was done, we studied the responses and listed the measures they take after an injury and their frustrations on post-its. Then we did the Affinity Mapping to categorize the data into themes.

Affinity Diagram — A UX data collection technique

We found out that more than half (53.6%) of the survey respondents have suffered an injury during physical activity. The most common physical activities were cardio, aerobic exercises, strength training, and sports activities.

Key Insights

After conducting the research & data analysis, we found out the following key insights:

60% of the respondents were female
53.6% of people are around the age group 26–35
Youtube and Fitness apps are the most popular way for people to learn a new exercise
People mostly use a fitness app to track their progress and learn new exercises
30% of people had no clue about any physiotherapy app out there
The most dominant measures people take to recover from injuries were stretching, warming up, decrease the intensity of the workout or completely stop.
80% of the respondents delete the apps if they don’t have helpful content, are difficult to use or are expensive
53% of the people loved the idea of an app that would help them improve mobility at home and 45% were not sure
58% of the people said that they use fitness apps mainly for tracking their workouts and progress and learning new routines

The Solution

With our comprehensive research, we were clear on what the users wanted in the app. We came up with an intuitive and simple iOS application that will let users:

Take the mobility assessment to determine their mobility score, movement age, strong and weak points
Create their personalized routine by adding recommended exercises curated by the coaches in the app
Track their progress, see all the past assessment results and measure how far they have come

Planning: Determining the users & the market fit

Persona Development

With these key insights & data analyzed, we were able to see a better picture of what the users wanted to conceptualize a plan. We determined two different types of user personas who will be likely to use the app and will be guiding us throughout our design phase.

The user story for each person is written under the quotation marks.

Competitive & Comparative Analysis

To determine the market fit of ROM Coach, we conducted a comparative and competitive analysis. We found that ROM Coach is not the only mobility app out there. We looked at some direct and indirect competitors of ROM Coach and focused on some key features such as calendar scheduling, video resources, and progress tracking.

Most of these apps did not focus on improving mobility and healing injuries with scheduling the routines. We reviewed what they did well and what they didn’t do so well in. All of this helped us devise ideas on what can set ROM coach apart from the others.

Site Map & User Flow

After the competitive research, we knew the features we wanted and developed a Site map and a User flow for the app to make sure we end up doing the required wireframes. The most important feature of this application is to take the mobility assessment and create a personalized schedule based on the recommendations. We wanted to make sure the app is simple and super intuitive, hence the user flow went under a lot of reviews and iterations among the team. The final version is shown below:

Design: Sketching out the ideas

Low-fidelity Wireframes

After finalizing the user flow, we started sketching out the ideas on paper roughly. We all came up with our own versions of low-fidelity sketches based on the user flow. After an exchange of reviews and ideas, we finalized one version of the wireframe which we though incorporated all the features. Creating this app from scratch was a challenge for all of us and to create wireframes which were intuitive as well as simple took a lot of iterations.

While we sketched the low-fidelity wireframes, our UI Designer decided on the mood boards, colors and style tiles. During this process, we worked in collaboration with each other agreeing on the final versions before starting the mid-fidelity and high-fidelity wireframes in Figma.

UI Design

We wanted to show professionalism, comfort, friendliness as well as confidence with the design of the app. For the colors, our client did not want any bright colors, so our UI team decided on blues and oranges. Blue is considered beneficial to the mind and body. Darker blue represents knowledge, power, integrity, and seriousness. Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, and the tropics. Orange represents enthusiasm, fascination, happiness & creativity.

We wanted to make sure that the colors pass at least the first level of Accessibility criteria.

Mid-fidelity & High-fidelity Wireframes

After finalizing the low-fidelity sketches, we digitized the sketches in Figma, starting from mid-fidelity to start the usability testing with the users. After incorporating the user feedback, the mid-fidelity wireframes were polished into high-fidelity wireframes.

Feature Prioritization

Onboarding — The onboarding screens tell the first time users what the app is about and how it works.

Mobility Assessment — The most important feature for ROM Coach is the Mobility Assessment. We wanted to design it in a way where users can understand what is it in taking the assessment and why they need to take it. The assessment consists of some tasks which the users need to complete. After taking the assessment, the app curates a list of recommended exercises for the user to work on based on their results. They can view the exercises and add any exercise into their schedule.

Assessment Results — The assessment results consist of the movement age, mobility score, and strong and weak points. A movement age is an age of the user (could be lower or higher than the actual age) which the app measures according to the assessment tasks. The mobility score is how much mobility does the user have and the strong and weak points are also based on the tasks.

Exercises — The exercise tab contains the listing of ‘recommended’ exercises and ‘all’ exercises separated by a toggle bar. To view the ‘recommended’ exercises, however, the user will have to create an account in the app. The filled calendar icon shows that the particular exercise is added in the schedule.

Calendar — To add any exercise into a schedule, the user will have to select the duration recommended for each exercise and then the frequency of the exercise.

Schedule — Schedule consists of ‘daily’, ‘monthly’ and ‘progress’ tabs. The daily tab has the daily check-in of the exercises that are scheduled ‘today’. The user can check off the exercises that are done. The monthly tab contains the monthly overview of all the exercises that are scheduled for the entire month. The progress tab consists of the overall progress of the routines and the past assessment results. This section went under a lot of iterations as it was pretty complicated when we first designed it, which I will discuss in the testing section later.

Profile — The profile section contains notification settings, upgrade plans, FAQs and contact form.

User Testing & Prototyping: Is the design usable?

We tested the mid-fidelity prototype with 10 potential users of ROM Coach. To evaluate the usability and intuitiveness of the app, we tested the prototype with some success metrics in mind while the users were presented with some tasks.

Success Metrics

The language and the terms used are familiar to the user
The user can easily tell where to find what they want or need
Consistency of tabs, search bars, profile details, and CTAs
Straight forward/easy to follow visual and information hierarchy

Pain Points & User Feedback

Overall, the users were able to complete our tasks.
The exercise schedule was broken down into two steps; the users had to add an exercise in their plan and then from their plan they had to schedule the exercise. This 2-step scheduling confused the users which led us to remove the ‘adding in plan’ step.
The older tab bar navigation consisted of ‘exercise’, ‘my plan’ and ‘profile’. My plan tab consisted of exercises added in the plan, calendar to show the monthly view and a progress tab for the exercise progress. There was no daily check-in for users to see today’s checklist which was later recommended by some of the users during the testing.
The calendar section was not intuitive for the users at all. The instruction to select dates and then exercise was not very obvious.

Prototype

To view the prototype, please click here.

Future Considerations & Conclusion

For the future considerations, we suggested to our client that he could:

Change the design of the filters screen when more filters are added
Add advanced and more detailed assessments to determine the range of motion and healing existing injuries
Design the assessments differently for the first time user and the existing user

Designing this app was a challenging but fun experience. We had a number of iterations in the mid-fidelity and high-fidelity prototypes and rounds of user testing sessions. The sessions were very valuable as with every session we got closer to the ideal user experience we had in mind. Keeping the user in mind, we wanted to make the user experience as simple and intuitive as possible which was made possible by the valuable user feedback.