The Recovery App – Case study

Project: Assignment at Noroff UX design 2021 – 2023
Team: Gøril Eriksen, Inger Lise Isaksen and Rune Tyvold
Prototype: The Recovery app
Delivery: Download PDF (Size 5 mb)
Figma file: The Recovery App

Introduction

During this assignment we were tasked to make the design for an injury recover app where the functionality was already established. The app needed to contain possibilities to complete exercises, rate mood and pain levels and to write a short diary regarding activities, food and sleep habits.

We worked as a group and everyone contributed in every part of the process. I was responsible for the visual design and prototyping.

Overview of the process

Competitive research
Persona
Conceptualising the app
Information architecture
Low-fidelity sketches and wireframes
First iteration
Mid-fidelity wireframes
Second iteration
High-fidelity wireframes 
Mini design system
Wire flows and prototype
Lessons learned
Usability testing

In dept

Part 1

Competitive research
We looked into 12 different apps, but also explored Dribbble and other apps we had personal experiences with for inspiration.

Amongst the competitors, it did not seem to be an established visual look or colours. Some had a more energetic approach with orange and black, while others looked more like serious health/clinic-apps. It seemed to be a mix of illustration and photos and videos. Only a few looked like modern apps and may therefore not appeal to our persona Chris.

We expected that our persona would prefer a more modern and visual appealing look and that functionality will take him closer to his goals of a fast recovery. It seemed that Chris is a an early adapter of technology based on his preferences and background.

Conceptualising the app
Based on the competitive research and persona, we recommend that this app has a simple design and straightforward language. Regarding colours, we can find a suitable colour palette that refer to recovery and training that matches well together, but we must still have accessibility in mind. If there is a middle way, we should go for it. A contrast checker could help during this process.

Part 2

Low-fidelity sketches and wireframes
After going through the brief and agreeing on the rough design of the app, we started analogue sketching. We did this on paper to avoid jumping too fast into the mid-fidelity. Based on our experience, it is way too easy to jump over a few steps when creating digital wireframes first.

When the analogue sketches were ready, we went through them together, where we presented our sketches and ideas. One of us noted what we agreed on or what needed to be discussed more along the way. At the end of this session, we assembled the sketches with the best potential to move on to creating digital low-fidelity wireframes. The exact process was carried out twice on low-fidelity sketches and digital low-fidelity wireframes.

Part 3

To have control of the changes we needed to make in our wireframes at this stage, we just added notes next to all the pages that we were unsure about or needed some refinement in the next step. In our mid-fidelity, we established colours, pictures and illustrations—also, some more details regarding text and sizes.

Part 4

High fidelity wireframes

We had many discussions on how design and components should work when interacting with them. We refined the simpler pages, but needed to twist our minds quite heavily during the functionality on the homepage and the progress page.

At this stage, we also established error messages on our sign-up page since we felt it was more natural to do that when colours and input fields were more or less done. We had two iterations in our work with high-fidelity wireframes since there were some details we did not think clearly through and we came up with at this stage.

Mini design system
We agreed on establishing a mini-design system to make the design and elements easier to work with. This will make it better for all designers working on this app to ensure consistency within the design.

Wire flows and prototype
To ensure a seamless flow and comprehensive coverage of all aspects within the app, we took the initiative to craft wire flows prior to commencing prototype development. This strategic approach allowed us to advance with a clear vision and maintain control over elements that might have been challenging to anticipate without visual representation. Investing time in creating wire flows proved instrumental in streamlining the prototype construction process.

Design decisions
To kickstart the ideation phase of our product, we conducted comprehensive visual competitive research to gain a clear perspective on what a rehabilitation app could encompass. Throughout this process, we carefully considered interaction design principles to align with user expectations and ensure a user-friendly experience.

Our primary emphasis has been on establishing and preserving consistency throughout the application. This deliberate approach aims to create a seamless experience for Chris, allowing him to effortlessly input the required information and track his progress over time.

Clear language
To prevent errors we made clear help texts. If an error occur we made it easy to see and to understand what is needed to do next.

Cognitive load
The functionality is minimalistic and easy to use. We focus on reducing the cognitive load while using the app. This is also important to make user interactions easy to learn and remember.

We have also used illustrations, images, and icons to keep the user engaged and make it easy to understand how the navigation and interaction on the app works.

Accessibility
Regarding accessibility, we contrast checked all the colours to ensure we met the WCAG criteria at level AA. Size of text and elements like buttons and input fields follows best practices.

Consistency

Button placement
You can find the same diary design element several places
Meditation pages and exercises pages looks and work the same way
Onboarding screens
Colours
Same smiley icons when rating both mood and pain, and they also have three stages

Part 5 – Next steps

Further developing
Before delving further into the development process, we believe it is prudent to prioritize verification and user testing. This will help us assess the appeal and user experience of our design with potential users. Our focus during this phase would involve conducting user tests to validate aspects such as navigation, labeling, and the inclusion of anticipated functionalities or features within the application.

Additionally, this testing phase will enable us to gather insights into which functions users find most valuable, guiding us in making informed decisions regarding the placement of functionality and design elements.

Thanks for taking the time to read this case study, and do not hesitate to contact me if you need to know more.

Rune Tyvold, 02.10.2023

The Recovery App – Case study

Introduction