Airy

Monitor your scoliosis health
(work in progress)

About

The Airy APP, which is linked to the monitor, aims to take the patient's physical well-being to another level. It presents the patient's wearing time, provides core strength exercises to keep the patient's muscles active throughout treatment, and reminds them of the half-yearly X-ray appointments for new scoliosis progression input, so the doctor can analyze on the APP to adjust on the therapy plan.

I developed the app in a more playful and soothing color palette to alleviate the mental stress of having scoliosis and move away from the 'medical' image of competitors' APPs.

MY ROLE:

Product strategy
User research & Analysis
Wireframes
UI Design & Prototyping
Illustration/ Icon design
Usability testing

Research & Problem Definition

Research

Qualitative research

I examined 15 SOSORT academic theses on scoliosis therapy and interviewed 4 scoliosis patients to gain insights into scoliosis treatment effectiveness and progression.

Results:

84% of scoliosis patients have compliance problems: they wouldn't wear the brace for 18 hours a day.
Scoliosis therapy has included a wearing-time monitor as mandatory in recent years.
69% of patients who completed Schroth therapy has improved their spinal deformity, compared to only 6% in patients who did not complete the exercises
Strengthening the core muscles helps preserve the natural curvature of the thoracic spine. Therefore, keeping muscles engaged when not wearing the brace is very helpful for spinal deformity.
Every half year, the doctor will assess the new cobb angle of the patient to adjust their therapy plan.

Customer Journey

To understand what phases and how patients complete scoliosis therapy as well as what pain points lie behind it, I created a Customer Journey Map.

Findings

85% of the patients couldn't describe accurately how many hours have they worn the brace without the monitor.
An average of 42% of clinic appointments result in a no-show. If a notification shows before the appointment in 3 hours, the no-show rate could be decreased to 20%.
40-80% of medical information provided by healthcare practitioners is forgotten immediately.

Personas

Based on the survey, I set up two personas. I referred to them throughout the entire product development process.

Instead of tutorials, Pro-trainers hope that the system could tailor to their needs like exercise injury or customizable schedule and health data so that the system could give them wanted info more efficiently.
Beginners want tutorials that are professional and entertaining so that they can persist in exercising.
Beginners also expect that the system could recommend a diversity of courses at the beginning but gradually converge to meet their preference by learning their browse history.

Taking all the lessons I learned from our personas, I decide to implement a customizable user interface at the health data page and introduce Artificial Intelligence to adjust the exercise load and fitness schedule.

User Flow

I created a user flow diagram to show each stage of the user interaction required to achieve the app's primary goal, which is to track the wearing time and offer supporting information during the therapy.

Design Exploration

Low-fidelity Wireframes

At the beginning of my design process, I created wireframes in Figma for testing purposes.

Findings:

Users asked for implementing a "search" function that helps them find something in their minds quickly.
Users found it's hard to find out that the "fitness schedule" lying under the PLAN page.
Users value the customizable health data feature.

Solutions:

Implement the "search" function on the HOME page.
Re-organize the PLAN page so everything could be shown at first sight.

UI CMF

At the beginning of my design process, I created wireframes in Figma for testing purposes.

Mid-fi to High-fi Prototype

I have created 30+ screens for mid-fidelity prototypes to represent the interface layout, the flow between the screens, and its functional representations.

I followed a light and active visual language for a high-fidelity prototype in order to activate users' emotions and immerse them in the world of fitness, but keep it neutral so it doesn't feel intimidating for the novices. And the same time, integrating elements from Google GUI, so it enhances the visual brand identity.

Visual Design

Designed for Confidence

I designed the final screens with Figma after a few more revisions and conducted A/B testing.

My goal is to create a simple and modern interface that allows fitness novices to quickly locate the information they need while also allowing Pro-trainers to personalize their interface to make it serve them more efficiently.

To make the style vibrant and modern, I also designed the illustration.

Check weekly / monthly wearing time

Core strength exercise

Check torso and spine information

Communicate with doctor / therapists

Validation test

UI Animation

To make my design more comprehensive and to achieve a better visual effect, I scripted and created the UI animation in Adobe AfterEffect.

The Context

The UI design is applied to an industrial design project of mine. Here's a video that shows how the virtual user can effortlessly interact with it, which might lead to it being part of Google's future home product line.