Over the last few years, I’ve seen physical therapists for minor injuries and was always surprised by the variation in ways they provided instructions for home exercises. I’ve been given links to digital PDFs, printed-out instructions, and even hand drawn stick figures to remember my exercises. These experiences served as inspiration for my latest project: a physical therapy home exercise app.
Personal Goal: This past month I’ve been focused on learning more about visual design principles and trying to apply them. The primary goal for any UX design should be usability, but as I build a portfolio, I want to also be able to showcase visual design skills. As I approached this project I tried to focus on my organization and process for making visual design choices.
Users & Reference Gathering
To think through features and gain some inspiration, I reviewed existing physical therapy and fitness apps. I chose to review both types of apps because they each involve managing exercises, and I also wanted to focus on designing for a younger user base who may be most familiar with fitness apps.
Physical therapists see patients from a wide age range, with roughly a quarter of their patients aged 18-49, according to research by the American Physical Therapy Association. The highest percentage of fitness app users, around 25%, also fall within this age range according to Gallup. It is unclear how often these two groups may overlap (i.e. percent of fitness app users who have gone through physical therapy), but I wanted to use fitness apps as a reference for some of the experiences these users may have encountered. If I was doing this work as a more in-depth project, I would consider deploying a quantitative survey.
Many physical therapy apps are not accessible unless you have a login from a provider who uses the app, so I needed to rely on images on their websites, the App store, or blogs. Some apps I reviewed in the process:
- PT Timer
- My Rehab Pro
- Rehab My Patient
- Daily Yoga: Workout & Fitness
- Daily Workouts Fitness Trainer
After exploring other apps and thinking about problems I encountered within my own PT experience, I sketched out some key screens focused on allowing the user to:
- Select the physical therapy program created for them by their PT
- View information on exercises in their program
- Complete a session of exercises, with the option to check off what they’d completed
- Access a timer for exercises that were timed rather than based on sets.
Wireframing and Usability Testing (Lite)
Next I moved into Adobe XD where I built out my main screens and set up a prototype with the main interactions my user would have.
I then had my housemate, who has gone to PT before, go through the prototype and vocalize moments of confusion. Below are some things I heard or observed, and how I chose to address them in my second wireframe.
Why are there multiple programs? Can I create a program myself?
This question underscored the importance of UX writing. Users who are familiar with using a fitness app may have seen the word “program” applied to customizable workouts. In my second wireframe I addressed this by adding the word “Assigned” in front of programs.
Too many things to click on on the home page.
When I was drawing and wireframing I kept thinking I needed to have a home screen with summary information for the user, but I wasn’t sure what it should contain so I just added something that seemed right. This ultimately made the experience more cluttered and detracted from the primary goal of completing an exercise session. In my second wireframe I rethought the bottom navigation and first screen a user lands on. As always – functionality should always be user-driven.
Do I get to order the exercises? Can I add more sets?
My tester was looking for ways to customize their program, much like they would do with a fitness app. They often compared the design of the PT app to their workout app, and we even walked through its functionality to better understand their expectations. This led to me adding a screen in my second wireframe focused on ordering and eliminating exercises (the latter functionality I later removed as I’ll discuss below).
Have I completed a set or am I on this set?
I had designed the “Session – In Progress” screen to utilize a to-do list structure and attempted to list each set of an exercise on its own card. This structure, plus the information displayed on the card (e.g. Set 1/2), led to user confusion about what they’d completed and what was left. In my second wireframe I tried connecting each set for an exercise to the same card.
Difficulty using sliding pain scale
On my “Session – Complete” screen, I originally had a sliding scale for a user to rate how much pain they were experiencing. The size of the scale, required the tester to try a few times before successfully choosing their rating. To increase the ease of this interaction, I converted the scale to a set of buttons in my second wireframe.
After I created my second wireframe, I completed a second round of usability testing. Some key takeaways:
- Although users should have some ability to customize their session, they should still be required to complete certain exercises given that this is an assigned PT program. I eliminated the ability for the user to delete exercises from a session, but continued letting them determine the order in my final prototype.
- Although I wasn’t focused on building out other flows in the app, it was important to still think about what might live behind other parts of the navigation. Having a My PT button and Profile icon led to some confusion, so I planned to consolidate them in my final designs.
Defining Visual Elements and Components
Before I jumped into exploring color palettes and designing components, I read through many articles on design systems which I’ll link to at the bottom of this post.
I ended up using a variation of the Atomic Design method which involves, starting with the smallest elements of your design and building to full pages.
I love any opportunity to use Airtable, so I used it to list out the elements, components, and screens I would need. This helped me identify where I should be creating an element to be used across multiple screens, how many states of components I would need to create, and what information would be displayed on each card, page, etc.
I then tried building the elements and components from my inventory. The image below shows their final state, but I went through many iterations and began in grey-scale.
Then I moved into exploring various color palettes and tweaking parts of the visual design. Below are some examples of what I tried out but ultimately did not use.
After lots of exploration with my visual elements, I was able to quickly go through and create a final prototype because I’d already created the interactions and animations in earlier versions. Check it out in the video below!
The last piece of this project I wanted to tackle was creating a more stylized featured image for this post. Utilizing a tutorial I’d recently watched, I mocked up an image with a few of my screens and finally understood the basics of creating those Dribble shots I see all the time.
Future Areas for Exploration
Although I’m done with this project for now, no UX project is ever truly done! Some areas that could be explored further:
- What would the physical therapist’s side of this app look like? How do they manage patients or assign programs? Is a mobile experience the best experience for this user or would they need a web app?
- Is there any progress or summary data that would be helpful to the user?
- What does communicating with your PT through the app look like?
- Design System Resources
- Type Scale: A resource for thinking through the best scale for fonts in your design.
- 8 Great Adobe Fonts Combinations for Your Next Design Project (I used #4 for this project!)
- Create your own mockup for App presentation using Photoshop