Workout 365
(Case study)
Ⅰ. The Overview
My Role : UX/UI Designer (User research, conducting Interview, wireframe, usability test, low and high fidelity prototyping)
Tool : XD, Figma, Photoshop, Miro
Duration : 07.2021~09.2021
About Workout365
Workout365 is an app that helps its users work out easily and regularly at home based on their own needs.
Workout at anytime and anywhere your want
Recommend workout programs at the right level for you.
Provide a posture guide & feedback report based on an AI motion detector
The challenges
How to provide users with a positive home workout experience from beginning to end
How to guide users to exercise with correct posture within the restrictions of a home workout.
How to encourage users workout regularly until they achieve their goals
Ⅱ. Design Process
I wanted to understand users’ pain points as much as I could to suggest solutions not only for users, but also for the fitness industry which went through a hard time during Covid-19 pandemic. In addition to formal research process, I worked out at home by myself for 2weeks to understand users and figure out design opportunities to help users maintain a regular workout routine.
Research
I interviewed two people who have worked from home since the pandemic started. They also have experience with working out at home and at a fitness center. They used to work out at a fitness center before the pandemic, but their busy schedule did not allow them to workout regularly. Since the outbreak of the pandemic, they stopped going to the fitness center and started to work out at home but they couldn’t continue for more than a week.
Pain point
I grouped pain points through the interviews. Busy people couldn’t make time to work out at a fitness center, but they also had problems working out at home because there is no one there to guide their posture and motivate them.
Personas
According to the interview results, I created personas to represent potential customers.
Journey map
I grouped users’ journeys in their workout into 5steps as shown below and figured out the design opportunities to solve users’ pain points at each stage.
2. Ideate
Generated Information Architecture and user flow based on research findings. I put solutions at each journey step for a better user experience. After that, I drew my ideas through rough sketches.
Information Architecture
When I generated the sitemap, I kept in mind what functions users would use most in the app in order to find what they want easily.
User flow
I generated user flow based on predicting how users navigate an app
Sketches
I outlined some of my ideas before creating digital wireframes. I focused on drawing the screen based on user pain points.
Design Proposal
01. Make your own workout plan
I put an “onboarding quiz” on the home screen in order to provide recommendations for a desired workout program. Onboarding quizzes include the selection of the preferences and a level test based on an AI motion detector. In addition, users can receive a personalized free trial program that is based on their quiz results. Free trial sessions can lower the users’ entry barrier.
02. Workout Guide through motion detector
The biggest challenge with a home-workout routine is that no one is there to guide users towards the right posture. AI uses motion detectors to sense when the users are in the wrong positions during the exercises. If the user is detected to be in the wrong position, a voice alarm will be activated. A message will also be displayed across the screen guiding the user to the right position.
In addition, I put the progress bar at the top of the screen, and the number of exercises left to complete in the circle. This way users can see themselves in progress.
03. Report
Report page includes daily scores, workout analysis, and feedback.
Daily score calculates the amount of exercises the user performs.
Workout analysis provides the video recording and time stamp. Users can re-watch the recording and jump to a specific timestamp to see whether they have correct posture. This feature is a great alternative to having a live personal trainer.
Feedback tells users the exact information about which muscle group is actively engaged in the exercise based on the AI analysis. Furthermore, it will recommend specific workouts to strengthen their weaker muscles.
3. Wireframe & Usability test
I Created a digital wireframe to facilitate a smooth transition between each screen. In addition, I conducted a usability test in order to have users’ feedback before a high fidelity prototype.
Digital wireframe & Low fidelity prototype
Using the completed set of digital wireframe, I created the Low fidelity prototype. In this process, I only created simple transitions to check design flow
Usability test
I generated a research plan and conducted a usability study on two people through digital wireframe. After the usability study, I have reflected some insightful feedback to create more user friendly designs.
01. Onboarding page design
On the first screen, I altered the onboarding quiz pop-up to fill up the entire screen. I added this modification because the pop-up function may cause some users to feel annoyed and decide to close it without looking at it.
02. Free trial flow
I simplified the free trial process. Before then, users had to download a coupon and go to the program page to sign up for the free trial. It was time consuming process ; they would often give up before trying it for free.
03. Ready screen before starting workout
I added an additional distance adjustment screen before the start of the workout. This feature captures the users’ spatial environment, to ensure that they are at an appropriate distance from the camera.
4. High fidelity
Design system
Color : I chose the color orange to represent the brand, because the color elicits an energetic and inspiring mood.
Typography : I used the Roboto condensed font to make it distinguishable and prominent on the Home Screen and titles of the app.
High fidelity prototype
In the high fidelity prototype, I focused on visual consistency and creating unique transition effects.
