MySpine

My Role

I led the design and development of MySpine’s interface, focusing on translating complex posture data into intuitive, actionable insights.

My responsibilities included user research, prototyping, and iterative testing to ensure the app provided real-time feedback while maintaining simplicity.

I explored multiple visualizations, information architectures, and color schemes, ultimately creating a user-friendly experience that enables better posture habits with minimal effort.

TEAM

Rannie L.
Una Z.
Dahyun K.

Contextualize

Competitive Analysis
Secondary Research
Interview

Development

Form Iteration

Deliverable

Visual System
Prototype
Video

What is MySpine?

MySpine is a mixed interface that mitigates posture-based concerns with interactive posture data visualization.

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.

Correcting posture with MySpine posture data visualization

In App Info

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.

The Button

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 in the app.

Two Piece Sensors

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.

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.

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.

J.J.

Throughout the development of MySpine, we focused heavily on actionability, we want the users to never feel stranded without any options.

Research Process

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?

Secondary Research

Our Competitive Analysis includes gathering possible pro and cons of each application.

In addition, we looked for both positive and negative buyers’ comments.

*We found 8 posture related products for competitive analysis.

Competitive Analysis

Products are either profession and hard to use or usable with little knowledge/insight.

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

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.

*We found 8 posture related products for competitive analysis.

literature review

J.J.

*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

Primary Research

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.

Interview

“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.”

Master Engineering Student

Interview

“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.”

Office Worker aged 25 – 30

Interview

“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.”

Office Worker aged 40 – 45

Insight

Based on analyzing the qualitative data we gathered in primary research, current social context, we came up with these insights.

Thematic Analysis

J.J.

Initially we strived for non GUI products because we want to ask our users to get off screen more. However, the deeper we went with that direction, the more convoluted our design become. We eventually steered towards a GUI but with some limitations of interactions, stacking the phones together.

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.

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.

Mission

How might we leverage modern technologies to improve the welfare of the forced sedentary lifestyle?

Data Vis 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.

Iterations

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.

→more items

Main user flows

Based on the specific functions and problems MySpine addresses, we designed three core user flows: Onboarding, Posture Correction, and Analytics. Each flow ensures that no matter when users need MySpine, there will always be a meaningful response.

Interface iterations

A major challenge was building an experience around posture data visualization. The interface needed to work seamlessly with this complex model, providing additional clarification when necessary.

I led exploration of various information architectures, color palettes, and visualization techniques to ensure clarity and functionality, making the app intuitive while conveying essential data for posture correction.

Iterations

Visual

Setting the project apart from conventional social media apps, we want to break free from the modern rigid look of the UI. Instead, we wanted our interface to be organic and welcoming. Considering college life, or work life, is already stressful, we plan to make Clink an application of laid-back vibes.

What if the app is like a reminder of retreat? I took inspiration from photos I took earlier on a trip to Hawaii and created island visuals representing individuals. We like the idea of individual users having their own island, so they can do island hopping. When two islands decide to connect, clink is the tectonic force that brings people together.

Reflection

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.

Acknowledgements

Many thanks to our friends and instructors who helped in this project in our most need.

Instructor

James P.

Participants

Our Friends and Families