On the Mend

A physical rehab app unlike any other.

On The Mend is an essential tool for both patients and health professionals. It personalises content to keep users engaged with their recommended treatment plans and makes sure they stay on the right track. It does this by engaging and rewarding people who keep doing their exercises. The user can log what exercises they are doing, how often they do them and how they feel after each routine. This allows health professionals to track the improvement and outcome of their patients, which has the potential to improve the delivery of care.

This project comprised of an initial User Experience (UX) Design, creating a colour palette and type stack and the final User Interface (UI) Design. The final product is a fully realised mobile application with animations to represent the intended transitions between elements that On The Mend can take to a developer to build.

UX Design

User Experience (UX) Design is the process of laying out a product’s usability and design flow in order to provide the desired experience to a user. An essential element of this is determining how users form experiences with the product. In the case of this project, we laid out an initial wireframe of the mobile application so that we could better understand how the app would flow and to see correlations between each section. Here are some of the wireframes that we built:

Styles & Elements

In the initial stages, our design team worked closely with On the Mend to choose a complementary color palette and type stack to best represent the company’s brand identity. We then tailored various elements in the design such as the Call-To-Actions (buttons) and menu bar to reflect this identity.

UI Design

User Interface (UI) Design is the process of taking preliminary UX Design and applying a Graphic User Interface (GUI) to it. In layman terms it means taking a wireframe and adding content to it in order to see what the final product will look like. Here are some of the final designs:

Our approach

Main phases from user research right through to putting the site live.

Client brief

Designing an effective user interface system begins for us with understanding the user.

Ideation

This is where the ideas and concepts really take shape. By sketching out a basic visual representation of the system, its flow patterns can then be tested and refined before moving to the next level.

Wireframing

In the final step before handing over to the designers, we add colors and images to the wireframe to create paper prototypes that can then be developed and tested on HTML pages.

UI Design

Once a concept is approved for further development, we begin to design the interface so that we can begin to see what the user will see. To enhance this step, we employ our Pixel Perfect concept.