Airy
Scoliosis brace shopping website
(work in progress)
About
The Airy website explains why Airy is superior to other scoliosis brace brands, how to order the proper size, set up the brace at home, and answers common customer inquiries.
MY ROLE:
-
Product strategy
-
Wireframes
-
UI Design & Prototyping
-
Illustration/ Icon design
-
Usability testing
-
Web front-end development in HTML, CSS and JavaScript.
Research & Problem Definition
Research
Conducting user surveys (Survey based on 50 responses)
I conducted a user survey with 12 questions to gain useful insight. I posted this survey on Facebook, Groupchat, and Wechat, and received 50 responses.
Results:
-
54% of people say that they prefer to work out with 1 or 2 friends rather than with a group of strangers.
-
34% of people do low-impact exercise, and 60% of them are male. This suggests that the popularity of low-impact exercise has nothing to do with gender stereotypes.
-
40% of people couldn't persist in a fitness routine because they simply don't enjoy it, while the other 40% do not feel motivated.
-
Weight loss is the major reason why people work out.
-
86% of them reflect that they would love to work out with a fitness influencer.
Customer Journey
To understand how customers interact with the traditional fitness service and what pain points lie behind it, I created a Customer Journey Map.
Findings
-
A lot of frustration happens when training starts, such as a lack of instruction and motivation, as well as a lack of data on training history, limiting the user from making a breakthrough in fitness effect.
-
A sense of accomplishment and an improvement in mental health, in addition to weight reduction or increased muscle percentage, is the driving force behind users' exercise routines.
-
Data means a lot: a notification of heartbeat over 120 can effectively prevent injury and restore stamina; a real-time fat burn report may significantly enhance user engagement.
Personas
Based on the survey, I set up two personas. We 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 designed a user flow diagram to depict every stage of the user interaction necessary to fulfill the app's core aim, which is to work out confidently inside a private community.
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.
Low-fidelity Wireframes
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
Mid-fidelity prototype
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.
Log in & sign up
Personal training
Customize health data
Family workout
Validation test
UI Animation
For the published website: