The problem areas identified led to the derivation of the key insights that helped in informing the decisions taken while designing the app. The focus was to be able to give the patient an overview of the recovery journey and to give realtime feedback to prevent incorrect practice of exercises.
Wire Frames and Feedback
After getting a basic feel for how this application should work, some quick scribbles were made. This was followed by making sample wireframes and doing an initial round of testing with participants around us.
Different methods of navigation were tried, such as tabs, pagination, scrolling. The goal was to see if the users were able to navigate through the application, and complete the tasks assigned to them. There were two tasks that we informally tested for; whether the user was able to get to the exercise they had to do and start it, and whether they would be able to schedule an appointment with the physiotherapist.
In the first set of wireframes with the tabs, navigation wasn’t much of a problem as the name of the sections were right underneath the tabs. But it wasn’t clear to the users that they could schedule the appointment under the calendar tab by tapping on the hourly schedule. It had to be more implicit.
The feedback from the first round of testing was taken and new wireframes using pages as a method of navigation was tested. All users unanimously agreed that it was more confusing navigate. All the exercise related information, such as the exercises to do, the reports and doctor’s notes of the previous exercises, and stats related to the exercises were on one page and the information related to the social aspect of the application, such as the leaderboard, friends and points were on another page. This change wasn’t favourable amongst the group we tested with.
We got some more general feedback with regards to the features of the app as well.
- While tabs provided an easy navigation method, it made the app seem very boring.
- Most people did not understand the social aspect of the application. The popular opinion was that it wouldn’t concern them how someone else’s recovery was going on.
- Another popular option was that while games might make the recovery seem more fun, it wouldn’t be a crucial motivating factor in bringing them back to the application. Exercise and games are two separate aspects of life and most people did not want to mix them up.
- Visually, the application felt really cramped for space. I was told to reduce the amount of information being presented upon first glance.
- Having a Dark Mode as an option as that made exercises and recovery seem cooler.
Armed with this information, I embarked on the long and lonely journey of designing the application.
PhysioDot is the application that is the output of all of the information above. The main goal of the app is to ensure a patient undergoing physiotherapy rehabilitation is able to do all the exercises he/she needs to do in order to recover just as if they were at the physiotherapist’s clinic while at home. This is a tablet application that works with a band that has a 6-axis gyroscope and accelerometer built into it, connected to the tablet via bluetooth.
Based on the feedback we got from testing the wireframes, the additional features like the leaderboard, games, friends and chat application were removed. The focus was brought back to the exercises, and their proper completion. The whole app is centred around the exercises.
Below is a video of how the user will proceed from logging in to the app to finishing the exercises.
When the user opens the app, they are presented with multiple ways to log in, with the Login with Band prompted as it is the fastest and easiest way to login.
The user is prompted to press a button on the band given to them by the doctor and click Connect, which pairs the Band with the tablet and also automatically logs the user in.
The user is met with a friendly message to get started. For first time users, an on-boarding will take place, introducing them to the app, how to use it and where to find the information they would need.
An overview of the entire schedule is represented by circles below the welcome message. If the circle is filled in, either the day is passed or the exercises for that day are completed.
Below that, there is a more detailed view, showing the day that the user is on and how much of the exercises they have completed for the day. The goal for the user is to close the circles. Users can also schedule and reschedule appointments with their physiotherapists using the app’s scheduler.
When the user swipes up, they get to see the exercises they have in greater detail. There is a graphic giving the gist of the movements the exercise expects, a brief write up of what the exercise entails, how long it will take, the number of sets they have left to do, and the number of repetitions in each set. The user is prompted to tap Continue Exercise, which will take them to a screen that allows for real-time tracking for corrections. The button will indicate Start Exercise if this is first time the user is doing the exercise, and Connect Band if the band is not connected.
The Continue Exercise button is highlighted as the Call to Action button, as the schedule appointment button becomes smaller. This is to help guide the users along a flow. There is also a Hamburger icon to let the users navigate to other parts of the app, namely the reports of the previously done exercises and the user information page.
Clicking the Continue Exercise button takes the user to a modal screen that has an interface that allows for the mimicking of the movements of the user’s hand. This screen gives step by step instruction on how the patient should proceed with the exercises, with realtime feedback.
After the sets are completed, or if the user chooses to finish the exercise, a quick feedback is presented to gauge the user’s pain and difficulty level. This is don in the form of emojis to make it quick and easy for the for the user to give feedback.
When all the exercises for the day are completed, the circle is closed and it glows green. Well done Mike!
The reports screen gives a summary of the exercises done on previous days and the user information shows the user the information the app has about the user.
Below is the overview of the user flow.
A style guide was developed so that further screens and features could be built into the applications. The font used was Avenir. The final application primarily uses dark colours with blue to help accentuate actions, an accent colour if you will. Two other colours, yellow (F5BF23) and green (22D830) were used to indicate states, allowing the user to take action and get information without having to actually read anything.
The app was built using sketch and the animations were done on AfterEffects. This was finally put together using Principle.
This project was done as a part of the Interaction Gestaltung 4 module at the Hochschule für Gestaltung, Schwäbisch Gmünd, Germany under the guidance of Prof. Jonathan Bölz and Paul Käppler, with inputs from my guide in India, Prof. Jayesh Pillai, IDC IIT Bombay.