MySpine

Mobile Interface | UI/UX

MySpine is a mixed interface that mitigates posture-based concerns in an actionable, direct, and, insightful way.

My Role

UX Researcher
UX Designer
Visual Designer
UI Designer

Span

6 weeks

Instructor

James P.

MySpine is an in-class project of Interaction design I.

In this project, we first looked at posture related products in market and dissect them for UX weakness. Then we worked on possible solutions to a better posture experience based on our findings.

We focused mainly on Posture Data Visualization and App Interfaces.

Overview

Contextualize

Competitive Analysis
Interview

Development

Form Iteration

Design

Visual System
Architecture

Background

As modern lifestyle kept people working indoor and seated, posture related issues became increasingly prevalent. What can we do to improve the welfare of such lifestyle?

Competitive Analysis

Our Competitive Analysis includes gathering possible pro and cons of each application.In addition, we looked for both positive and negative buyers’ comments. Interfaces are categorized into two scenarios based on how often they are expected to be used.

Secondary Research

Some of these posture correcting products might give false confidence to people while not understanding the full range of posture related problems. For example, Upright only detects posture through a gyroscope. It will miss subtle muscle tension imbalances. This might cause injury in the long run even when the app tells the users that their postures are correct.To fully detect possible range of posture problems, it’s important to detect subtle difference in muscle strain.

*This finding directly resulted in our two piece muscle electrode design.

Czaprowski, D., Stoliński, Ł., Tyrakowski, M. et al. Non-structural misalignments of body posture in the sagittal plane. Scoliosis 13, 6 (2018). https://doi.org/10.1186/s13013-018-0151-5

Most current products are either professional and hard to understand or understandable with little knowledge/insight to provide.

Our chance lies within the quadrant of more professional applications for more general public usages.

Interview

We conducted interviews with five participants of different age group and different occupation on their thought of posture health. We searched specifically for participants with previous back injury concerns.

“I had a serious back pain once earlier last year, like it didn’t feel fine for a while. So I did some research on the internet and went to a chiropractor for a few weeks. They helped me with my back pain and gave me a lot of stress relieving exercises.”

“My neck hurt a lot several years ago. Doctor says that my muscle is too tight and that was because me was sitting for long time and never exercise.”

“It[Upright app] was helpful, because it reminds me to correct the posture, it trained me.”

“It[Upright app] was helpful, because it reminds “Sometimes just don’t want to open the app, seldom check back. I hope the app can work as easy as Apple Watch, which you only need to wear it, without additional attention.”me to correct the posture, it trained me.”

We found gaps in posture awareness and current experience in the market.

While realizing the problem from the apps, users don't have actionable feedback and are left stranded.

Experience Map

Looking holistically on the posture correcting experience, we found specific challenges that we can address to ensure a pleasant experience.

User Flow

Before commencing UI iterations, we planned a user flow that covers all necessary steps of the experience. We decided to focus on Onboarding, Actionable feedback, and Clear visuals. The three focus then translated into three flows of onboarding, posture correcting, and analytics.

Design Principles

Attention Management

We need to avoid unnecessary information that could lead to wasting energy or confusion.

All information displayed should have solid reasons to be there.

Our interface should be non-distractive and efficient

Actionable Feedback

Every person has different need and back health situation. With the data collected, we should be able to tailor the experience to their need.

Profound personalization should instill more interest on back health in users.

Privacy & Transparency

As a service that concerns personal data, how the data is being used and who can access the data should always be transparent and actionable to the user.

In addition to data privacy, making suggestions transparent can help users understand how our interface works.

Visualization Iterations

Throughout our journey of MySpine, how to clearly and informatively display posture data has been the main focus in response to many problems spotted. We conducted informal user testing specifically on these posture visuals. We found that just seeing their posture visualized, people immediately understood how to adjust to correct posture.

Initially we devised a simple abstract visualizations to represent back in real life. This iteration, however, was proven to be hard to understand when it's static.

Building upon the first iteration, we incorporated corresponding motion and strain points to convey more information. Still, this version is bad on learnability.

We thought turning to 3D model might solve the issue of relatability. However, 3D model brought in much more unnecessary details.

We eventually shift focus on abstraction and created vector mannequin with just enough detail and possibility for indications.

MySpine

MySpine watches over your posture health with two-piece sensors. With the posture data it collected, you can see actionable insights of your posture data and lead a healthy posture lifestyle.

Onboarding

Posture correction is an ambient action. We don’t want users to check their phone every time they have a bad posture. Thus we focused on a comprehensive onboarding experience to inform users the alert behaviors. This should allow for a more convenient posture correction experience.

Two Piece Sensor

The two piece muscle electrodes sensor picks up slight movements and strains of your back and waist muscles. MySpine uses data from these two sensors to determine your posture.

Because we used unconventional muscle electrode sensors, MySpine can precisely detect underlying back health problems which are impossible for other services to find.

Back Muscle Strain can be caused by prolonged use or unbalanced use of back muscle.

Ligament Stain can be caused by bad spinal posture and involves numerous symptoms.

The two piece sensor also acts as an alert for bad posture. When you experience extended bad posture, the sensors will gently tap on your back to remind you of your posture.

In App Information

When users need more information, they can also go into the app to check their visualized posture.

Visualization alerts are localized to different part of the body and the ring guides user through posture correction process.

Immediately below the visualization, a step by step how to return to correct posture is provided that user can follow for more posture awareness.

If no reminder is desired, users can turn off the alert by tapping the alert button or press the button on sensor for 3 seconds.

Delay time is also easily adjustable on the button

Insights & Analytics

MySpine also provides meta data analysis of previous posture information and give out insights and recommended actions.

If unexpected pain occur, MySpine will also do simple diagnostics and recommend best course of action based on collected posture data.

Visual

We chose SF fonts and SF Symbols for a clean and clear interface detail.

As an app meant for everyone, we also chose basic colors to invoke positive and joyful feeling overall.

Acknowledgements

Many thanks to our friends that agreed to participate in our research and provided valuable insight.

Many thanks to our instructor James P. for his guidance and support.

Further

We focused mostly on the behavior of app interface during this project since the requirement is app UI design. However, from our user study and competitive research, we found more prominent design space in tangible feedbacks.

For future considerations, it would be beneficial to consider more holistic experience including off app behavior of the sensors and other scenarios outside of office setting.

I learned a lot from this project about app architecture and need based interface design. However the focus on mobile app interface has also made me realized how much limit there is on an app format experience. This makes me consider more on how users could experience the product rather than the interface itself in my design process.