ROM (Range of Motion) Coach

An app by Precision Movement to help active people get back to and keep doing the things they love by eliminating pain, healing injuries and improving mobility in day to day lives.

Header-RomCoach-Blue.png
np_work_1819106_000000.png
ROLE 

UX/UI Designer & Project Lead

User Research, Data Collection & Persona,

Low to Mid-fidelity wireframes, Prototyping

& User Testing

np_clock_2795786_000000.png
DURATION

3 Weeks Sprint

np_tools_1523305_000000.png
TOOLS USED
0_UTBrDcrJ6SbePBzR.png

Figma

np_business-client_2845470_000000.png
CLIENT
PM-logo-new-web.png
PROJECT SCOPE

The CEO of Precision Movement tasked us (a team of three) 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. 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.

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

Process.png

Understanding the need.

OPPORTUNITY

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. There are not a lot of phone apps that let the users create a personalized schedule out of the recommended exercises suggested by the coaches.

Challenge-ROM.png
01
USER RESEARCH

Getting to know the users.

We reached out to people who already knew about Precision Movement and people whom we considered generally physically active (those who play sports or workout at least once a week). 

56

TOTAL SURVEY RESPONSES

EMAILS
FACEBOOK GROUPS
PHONE CALLS
SUBREDDITS
RESEARCH INSIGHTS

With the surveys, we wanted to understand if people are already using any kind of physiotherapy app and their reason behind it. We also wanted to determine the kinds of physical activities the users do and what measures they take in the case of an injury.

Analyzing the data.

The survey results validated the need and interest to build an app to heal/prevent injuries and improve mobility for active people. We used the affinity map to analyze the data that we gathered through the surveys. Also,  we found that the existing apps had a lot of restrictions which resulted in them not being used widely.

ResearchROM.png

Youtube is the most popular way for people to learn a new exercise.

Most of the respondents were female.

More than half of the respondents were of in the ager group of 26-35.

A lot of people had no clue about any physiotherapy app

out there.

Most of them use apps for tracking their workouts and progress.

KEY SURVEY INSIGHTS

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:

1.png

Take the mobility assessment to determine their mobility score, movement age, strong and weak points

3.png

Create a personalized routine by adding recommended exercises curated by the coaches in the app

4.png

Track their progress, see all the past assessment results and measure how far they have come

02
PLANNING

Synthesizing the insights.

We determined two different user personas informed by the key insights, who are likely to use the app and will be guiding us throughout our design phase.

Persona2.png
Persona_1.png
MARKET RESEARCH

Finding the gap in the market.

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.

CC-Analysis.png

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. However, given the complexity of the app, before creating the user flow, we designed a site map of all the important screens we would need in order to make the navigation easier.

SiteMap-Romcoach.png

User Flow of ROM Coach

Visualizing the path.

This process was important as it guided us to create a functional flow that outlined what this app would need structurally.

UserFlow-–-1.png
03
DESIGNING

Low-fidelity Wireframing.

After finalizing the user flow, we started sketching out the ideas on paper to lay out the visual structure of the app. After an exchange of reviews and ideas, we finalized the version of the wireframes which we thought incorporated all the important features.

Low-Fi-Wireframe.png
STYLE TILE

Deciding the mood.

For the colors, our client did not want any bright colors, so we 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.

Style Tiles V2.png

These colors also pass the first level of Accessibility criteria.

Accessibility.png

Mid-fidelity Wireframing.

BRINGING IT TOGETHER
Onboarding_One.png
Assessment 1.png
Assessment_Result_Weak.png
EXERCISES
RESULTS
ASSESSMENT
Calendar 2.png
Schedule_Duration_Select.png
ONBOARDING
Exercise Screen_All.png
SCHEDULE

We digitized the successful low-fi sketches in Figma, starting from mid-fidelity to start the usability testing with the users. 

Exercise-Individual Exercise.png
04
USER TESTING

Validating the design.

To evaluate the usability and intuitiveness of the app, we tested the mid-fidelity prototype with the potential users of ROM Coach, with some success metrics in mind. We tested it with 10 different users. Overall, the tests were successful with exception of the scheduling screens and progress.

BEFORE
The segmentation of the screens was very confusing. The exercise tab had all the added exercises.
The users first added the exercises into their 'plan' and from their they could add those to their calendars.
My Plan-Exercise-Signed up.png
BEFORE
The instruction here was not visible and users mostly missed it. They were confused about choosing the dates twice.
My Plan- calendar - edit.png
AFTER
Today_Schedule_Checked.png
The 'exercise' tab was changed to 'daily' which had the daily check-ins of the exercises.
'My Plan' was changed to 'Schedule' to reduce the number of steps.
AFTER
Schedule_Duration_Select.png
A toggle was added to make the dates selection more obvious.

High-fidelity design.

 After incorporating the user feedback, the mid-fidelity wireframes were polished into high-fidelity wireframes.

0.png
1.png
3.png
4.png
6.png
5.png

Future Considerations & Conclusion.

NEXT STEPS
  • Give Vanessa and James the ability to sort the recommended exercises using various filters.

  • Add advanced and more detailed assessments to determine the range of motion and healing existing injuries as well.

  • Consider designing the assessments for the first time user and the existing user differently.