Regain fitness faster with your personal rehabilitation guide.

re.fit App.

Record important information about your health, create an individual
training plan and connect with people involved in your rehabilitation
process. This tool helps you to stay on top of your health.

 
 

Project Details

 

Mission

Allow health-conscious individuals to log in to a responsive health and wellbeing portal to record
their health and medical information, and access general physical and mental wellbeing features.

 

Duration

5 months

 

Tools

Figma, Balsamiq, Writemaps, OptimalSort, LucidCharts, FlowMapp

 
 

Design Thinking

I applied the design-thinking framework that follows an overall flow of
understand, explore, and materialize. Within these larger buckets fall
the 6 phases: empathize, define, ideate, prototype, test, and implement.

 
 
 
 

 

UNDERSTAND

 
 

In the beginning, my role was to get the design process started. I isolated and defined the core problem I wanted to address. I also defined, based on limited evidence, what a possible solution might look like.

 
 
 

Problem Statement

re.fit app users need a way to create a working system of them, doctors, and therapists to support their rehabilitation process because they want it to be as effective and efficient as possible.
We know this is true when we see that not only patients, but also doctors and therapists use the app to share information, communicate with each other, and create personalized training plans.

 
 
 

Hypothesis Statement

We believe that by creating a medical record to capture and share patient-related information, as well as a training guide to create and schedule personalized exercises for our users, we will achieve reducing the need for appointments with physicians and therapists, more efficient use of those appointments, and faster overall recovery.

 
 
 

I then defined a research goal, recruited participants and created a script for the user interviews. After conducting the interviews, the task was to analyze them. I organized, explored, and clustered the collected data. To illustrate the insights, I used affinity mapping.

 
 

User Interviews

I interviewed five individuals between the age of 26 and 42 who had suffered from an injury in the past and were undergoing rehabilitation.

 
 

Based on the qualitative attitudinal data I collected, I was able to identify 4 main topic areas. These formed the basis for the development of the various features.

 
 
 

User interviews are a valuable explorative research method to gather a lot of information at the beginning of a project. However, preparation, execution and analysis require a lot of time. And the quality of the data is significantly influenced by the moderation of the interviews. This should not be leading, but one must also not lose the thread.

 
 
 

Finally, to give the insights a face, I created user personas.

 
 

User Personas

 
 

Based on the data obtained from the user research, I decided to create 3 user personas. These represent the target groups of the application.

 
 

 

EXPLORE

 

After I created the first sitemap based on my previous research results, I asked users to test the information architecture. For this purpose, I used the card sorting, a participatory design method used to evaluate or generate ideas for the information architecture.

 
 

Card Sorting

I recruited 5 participants and asked them to sort 20 topics. The participants had to define categories themselves and assign the topics accordingly.

 
 

Based on the quantitative attitudinal data I collected, I have decided to merge the Symptom Tracker and the Medical Record. Tracking symptoms is henceforth a function of the Medical Record feature.

 
 
 

The way information is arranged within an application has a significant impact on the usability. What may seem logical to the designer is not necessarily true for the user. In my case, card sorting was very helpful. In the future, I would also do closed card sorting after the first iteration.

 
 
 

Now the task was to visualize the data and ideas collected so far. For this purpose, I increased the fidelity of the wireframes over time, up to mockups. The following illustrations show the development of the design based on one function of the application, which is create a symptom record.

 
 

Low-fidelity Wireframes

At the beginning, only the high-level functionality of the design was sketched. Instead, the focus was on the core structure and navigation of the app.

 
 

Mid-fidelity Wireframes

To show a bit more detail of the app, I increased the fidelity of the wireframes using Balsamiq.

 
 

High-fidelity Wireframes

Finally, it was about fleshing out every single detail of the design. To show how the polished app will look, feel, and function, I created a high-fidelity prototype with Figma.


 

MATERIALIZE

 
 

After I connected the wireframes to a clickable prototype I did a usability testing. This technique is used to evaluate the utility and usability of a prototype or live product.

 
 

Usability Testing

I recruited 5 participants and conducted moderated tests, both live and remote. I recorded the sessions, then analyzed them and defined measures to improve the design.

 
 

Usability testing showed that users had problems with the community feature. Most found it difficult to connect with other users because they didn't understand the logic. As a result, I split the content into two tabs and enabled the create a connection feature using both the FAB button and the search function.

 
 
 
 

Users also had problems with the navigation. The bottom navigation bar was not easy to use, especially for elderly users. Consequently, I integrated a Navigation Drawer, which can be opened via the menu icon in the upper left corner.

 
 
 
 

To test my prototype with real people was an incredible experience. First, because moderating such usability tests is very demanding. A structured script is a real gamechanger. Second, because you get tons of input. Both about how participants use the application and what they say about it. It takes a lot of time to process the data, determine measures and implement them.

 
 
 

As can be seen from the before and after screens above, after the usability testing I also revised the design in terms of the Principles of Design. I applied the Material Design Guidelines and created a design language system.

 
 

Mockups

 

Click here to test the final prototype.