Tiffany O'Keeffe
UX Designer

Range of Motion App

Providing real-time data to improve surgical decision-making


A medical technology company based in Ireland


Product Designer

User interviews, persona empathy mapping, competitive analysis, ecosystem mapping, customer and user journey mapping, wireframing, user flows, interaction design, visual design


A mobile app for medical practitioners which comes with wearable sensors that measure a knee replacement patient’s range of motion (ROM) and tracks physical activity outside of the clinic. This provides them accurate, quantifiable data to improve surgical and therapy decision-making.

A medical technology company is developing a mobile app to help doctors improve surgical and therapy decision-making. The app comes with wearable sensors that measure a knee replacement patient’s range of motion (ROM) and tracks physical activity outside of the clinic, providing accurate, quantifiable data to the physician.

The app is currently being designed for surgeons and general practitioners (GP), with the intention of including physiotherapists in the near future and is limited to leg measurements only. The long-term goal is to go full circle and develop the patient side of the app as well as capability to measure arms, hips, etc.

The client needed help in designing the whole end-to-end experience – from assigning the wearables to a new patient to generating reports for patients already in therapy.

Range of Motion App

Research involved face-to-face and remote workshops with the client, persona creation, ecosystem mapping, journey mapping, and competitive analysis of similar apps.

Mapping the journeys of both the surgeon and the patient helped establish the user flow and determine the different elements that need to be in the user interface (UI) prior to sketching.

I created paper prototypes for 3 different scenarios, using post-its to depict alerts and dropdowns. This step resulted in coming up with a better experience, such as more relevant information in the Patient Record, improved copy, and new features e.g. inclusion of pre-existing conditions and deformity. The refined solutions were applied to the high fidelity wireframes and presented to the client for sign off.

Range of Motion App

Design Decisions

Colour Palette

The colour palette consists of blue, orange, and grey. The main blue shade follows the brand colour. Orange indicates interaction and is used for buttons and links. I derived it from the blue brand colour, using the tetrad colour scheme.

Concave vs Convex

At the beginning of the project, the client provided a draft layout of the measurement screen. Their range of motion metre was concave in shape, similar to a car’s fuel metre. I decided to swap it to a convex shape, as it is easier to interpret since this is what the angle looks like when the knees are being measured, with the patient sitting down.