project case study

Osteocare

Mobile app to track the health & recovery status of Osteoarthritis patients.

Complying with non-disclousure agreements, information presented in this case study is limited.
A screenshot of web page

Problem Overview

One of the leading medical technology company reached out to us to design a  platform anchored through a mobile app for onboarding and providing support to patients dealing with Osteoarthiritis.

Osteoarthiritis patients need physio therapies and constant follow ups to check on their progress with needed excercise and medication. The mobile app was to act as a source where complete care plan, support and info needed by the patients can be accessed.

My Role & Duration

I was responsbile for defining, planning and executing the entire experience strategy.
I collaborted with the user research team lending support for preparing the user interviews, forming and baselining on the main design prinicples and use cases, understanding the end-to-end care plan journey of the patients and collating all inputs together.

I also carried out design implementation including putting up the  navigation flows, sketching, wireframing the screens for various fidility, designed the interactions, prototype and evaluation. I also supported the visual designers during vsual design phase and finally handover of design to the engineers.

The project was to  be completed in 5 months time. I carried out the comeplete end-to-end experience design for the feauture including user research and analysis, concepting and designing wireframe of various fidelity, pitching it to the wider audience for approvals and finally the visual designs and handover to the engineering, providing any design support as and when needed until final launch.

Research

What is Osteoarthrits?

The process was kept simple aOsteoarthritis, commonly known as wear and tear arthritis, is the most common type of arthritis. It is associated with a breakdown of cartilage in joints and can occur in almost any joint in the body. It commonly occurs in the weight-bearing joints of the hips, knees, and spine. It also affects the fingers, thumb, neck, and large toe.nd followed the user-centric design principles.

Body parts most commonly affected due to Osteoarthritis

Osteoarthritis causes the cartilage in a joint to become stiff and lose its elasticity, making it more susceptible to damage. Over time, the cartilage may wear away in some areas, greatly decreasing its ability to act as a shock absorber. As the cartilage deteriorates, tendons and ligaments stretch, causing pain. If the condition worsens, the bones could rub against each other.

Cause & Symptoms

Most people above the age of 60 will have OA to some extent with only the severity being different. This can also occur in younger people but it could have occurred mostly due to a joint injury or overuse. People above age 50, especially women are observed to have more OA conditions than men.

The most common symptoms are :

  • Joint pains
  • Inflammation at joints
  • Pain during movement
  • Stiffness in joints because of overuse or long period of inactivity

Treatment

Treatment for OA differs based on the various factors like the severity of the pain,age, activities, medical condition, etc. and is usually a combination of medication, physical therapy, exercise. Surgery would be an option when none of these other treatments have been effective. Treatment timeline also is dependent on the factors like severity, recovery progress, consistent follow ups and so on.

OA Stages

Based on the severity of the condition of the symptoms and pain, OA is divided into 5 stages - from Stage 0 which is for normal knee without any symptoms to Stage 4 which is the most advanced stage of OA causing severe pain and disrupting joint movement and everyday function.

Symptoms and Treatment at different stages of Osteoarthritis

User Inputs

User interviews conducted by the research team brought in a ton of insight about  the needs and pain points of the patients. For the initial release, the solution was targeted for the senior citizens experiencing OA and hence the interviews were mostly with them.

One in five or about 22.7% adults in the United States reported of having docotr diagnosed arthritis. More than half of the adults having arthritis also have diabetes and heart disease. It is estimated that by 2030 about 67 million people above the age of 18 are most probable to have doctor diagnosed arthritis.

Based on the inputs received, we were able to classify the needs in to 3 main categories. These categories would later help us in identifying the possible feature list that could be included in the app.

User inputs categorised

As per the information collected from our reasearch and through our interactions with senior adults, we got to know that most of them used smart phones for various activies like taking photos of their grand children, track events using calender, communicate with family through messages, audio and video calls, to find info about their intersts, read articles, connect with friends using social media and so on.

Keeping this information we had collated from the patients, we obsereved that most of the senior adults, had other age related impairments apart from OA . Identifying and knowing more about these common age related, inevitable physiological and cognitive changes causing issues, would help us in designing the app interface more effectively.

Here are some those which were considered.

List of all the common ailments observed in senior adults

Considering all these we revisited the different OA stages to mark down the different patient touch points at each of these stages. As a result we were able to understand that most of the patients at any stage had in some way connected online to either contact a hospital / clinic for appointments or just to know information about their medication and excercise.

Patient touch points identified for different stages of Osteoarthritis

Implementation

Persona

With these set of information and insight the plan was to put a user persona in place so that it would be our north star guiding us through the design activities.

One of the persona created for patient profile

Design Principles

I decided to to put together some basic but strong design princples to be my guide through out the design phase.

Simple & Minimalistic

The app had to avoid any kind of unnecessary clutter in any form and have minimalist approach to show information and interactions.

One task at a time

Keeping focus on one task and disclosing information or actions progressively to avoid or reduce any cognitive load was important.

Familiar mental models

Use familiar and simple straight forward icons, interaction patterns and content.

Help easily available

Needless to say providing supportive actions and info (contextual help, faq’s) to help the user complete the tasks easily was fundamental.

Clean, focussed, delightful

A clean interface with clear & focussed information and tasks with a sprinkle of simple delights will build trust and engagement.

Features

During ideation, I observed that there was great opportunity to include a number of features that could be on the app. Without much thought, I started listing them out on an spreadsheet. I ended up having more than 50 possibilities !

Overwhelmed, I stepped back a bit and thought of giving a structure to these and added them onto a mind map using Coggle.

Mind map of the possible feature list created on Coggle

Information architecture

Having the mind map in hand, I collaborated with the research team again to go back to the inputs we had received from the users to help us identify the most needed features amongst what we had. This would also to help me identify if there was anything that was missing.

Afer much deliberations, we narrowed down the list to a smaller set so that we have the most important features first and then improvise on them and also add in new ones at appropriate time.

Information architecture for the app

Sketches

I started with sketching out the screens once the initial sitemap and features were baselined.

Hand drawn sketches for inital discussions

Sketches went through a few iterations. After several whiteboard sessions & many sheets in the trash can, we arrived at these which was taken further for wireframing.

Wireframes

Wireframes also went through a few iterations whilst fine tuning the way information was to be displayed. Here are some of the key screen wireframes.

Login

Simple and straight forward login screen. New users had option to signup although most of the users would actually be signing up during their hospital visit with assistance from hospital staff.

Home

On successful login, patients are brought to the home page depicting their overall progress for the current day and also list all activities for the day including medication & excercise details along with their individual progress.  

Selecting either of those will navigate the user to their Care plan page.

Care plan

This is where complete details of the medicine to be taken , excercise to be done or therapy session details would be shown. Users can mark the completion as and when each of these are done.

This helped the patients to feel more confident of being on track and know their progress.

Doctor Connect

1. These pages enabled the users to check about their upcoming consultation schedule and also book new consultation with doctors as and when needed.

2. During any emergency, they had the option to call their doctor or an ambulance.

3. Once booked, user had the options to cancel or reschedule their consultation session if necessary.

OA Community

Users could find relevant news updates, find groups to join and also check out and enroll for any of the events specifically curated for OA patients.

Help

Help section provided all the basic info about OA conditions, various treatments available, relevant content about excercise and therapies, surgery related info and app related FAQ’s.
Emergency and support info provided details about the options available for patients during emergency .

Profile

Profile section essentially carried the details like name, age, location and email address of the patient.

Menu

The menu held all the secondary details about the patient. Most importantly it would also have the patients Emergency contact details.



These wireframes were considered for initial round of user testing using device prototypes. During same time in parallel, I further analysed these wireframes for improvements and noted them.

Several feedback was received from the user test and many points were similar to the improvements I had listed down.

Although there were positive response for the design, there were other requests and improvements sought by the users. All these feedback were analysed and added to the backlog for future implementation. Wireframes of all screens were taken forward to Visual design phase.

Learnings

Designing this app helped me understand and experience the unique challenges of crafting a solution for the healthcare domainand alsp specically for the Senior adult user group. Understanding  the constraints faced by patients is key. Here are some of the most important takeaways.

Other case studies