Role: UI Designer
Duration: 5 weeks, 5 sprints
Platform: iPhone 8
Tools: Sketch, Principle, Illustrator, Keynote
Stride 360 is a 2-in-1 cycling/elliptical in-home stationary fitness machine with a mobile app that controls the machine and records users' workout activities. In this project, I designed an iOS mobile interface, a logo and a mobile-first marketing site.
Joanne is ready to REPEAT a workout:
Low Impact Cycling
Please try out the interactive prototype below.
Interested in how I made this?
View my full case study below!
Suburban moms can’t keep the exercise routine
Technically, if I stop, no one is there to watch and tell me to keep going.
— Lisa C.
Our target users were suburban moms. The UX team conducted interviews with 12 suburban moms aged between the 40s – 60s, and the results indicated that our target users found it difficult to keep the workout routine as they can be distracted by other family errands every day. As they are aging, they can no longer handle the intense exercises. Therefore, our users aimed at staying healthy and motivated with low-impact workouts.
Meet Joanne, the casual fitness mom
Joanne is a 45-year-old stay-at-home mom who has two kids. Her goal was to exercise more regularly in order to maintain her weight and hopefully keep up with future grandkids. However, after viewing all the classes, programs, and fads, she was frustrated by too many options. She was definitely not a tech-savvy mom to try new technologies that she thought were built for her kids. With all the barriers, she found it difficult to achieve her fitness goals.
We found the opportunities within the market of fitness
Before getting deeper into the project, we conducted a domain research to understand our market position and potential opportunities. The data indicated that fitness apps has the most growth from 2017 to 2018. Given that it’s a relatively small segment within the category of wellness, there is both demand and space to continue to grow within this sector.
As for the target users, studies has shown that the population has growing interests in sport and exercise, in part, due to the decline of in their own health. Additionally, they are also the population that is willing to spend money on quality products to help them acquire better health.
With that in mind, the design of our app and machine will be able to capitalize on this demand and is well-positioned for the market.
VISUAL COMPETITIVE ANALYSIS
We were inspired by our competitors
We conducted a visual competitive analysis to better understand the designs of our competitors, including fitbit, weightwatchers, Fly, Peloton, MapMyRide, Strava, and Daily Burn HIIT. We also looked into peanut for visual inspiration.
Clean and simple interface using bold and light text for information hierarchy. The goal was to build a community around the movement and wellness.
Using cards with fill-in colors to make the content more prominent.The color usage makes the interface playful.
Using maps to visualize user's riding route. Support users using a reward system.
The color usage and imagery are warm and friendly, promoting sense of community.
Darker interface with red CTA makes the app professional and motivating, yet unfriendly.
Use of high-end imagery focusing on idealized bodies. The tone shows strong sense of competition.
Strong visual hierarchy with in-depth analytics. Motivate users with friendly competition.
Overall friendly and welcoming apeal. Generous use of white space, promoting the simplicity feel.
Use of informal and casual language, variety of colors, and custom illustration makes the interface more friendly and supportive.
Darker interface, ideal body image, and limited use of colors create high-end, high intensity, and exclusive feels.
We’re creating a friendly and intuitive product to motivate our users
We synthesized the information from the SME interview, UX hand-offs and research, and came up with 3 design principles for this project to create an user-centered interface.
Fitness as a Journey
Research shows that competitions don't motivate our users. For this reason, we will utilize supportive content and microinteractions to delight our users and promote consistent engagement with this application.
Keep it Non-Technical
Our users are not tech intuitive, so we will provide an interface with familiar UI patterns, concise text blocks and clear affordance that can be easily navigated.
Stride 360 is inclusive to all ages, sizes, and fitness levels. For this reason, our designs will also be inclusive by utilizing realistic imagery; as opposed to only showing the idealized body shape.
MOODBOARDS AND STYLE TILES
I created three concepts based on the brand values
In order to create an interface that fits the brand, I explored three concepts: The Journey, The Support and The Home. I started with moodboarding, followed by building style tiles based on the moodboards I created.
This design is my final direction. I used aqua as the primary color and orange as the accent color to show the motivation in the calmness. The rounded corners of images and cards make the design more friendly. The orange buttons invite users to click on, especially for the “quick start” button. In order to convey the idea of home, I used the shape of a home for buttons.
The reason I chose this design was that our users prefer gentle encouragement rather than intense competitions. The color combination was calm and gentle when the orange is carefully used. The style of imagery is community-oriented, encouraging users to workout more.
With the idea of “fitness as a journey,” I used the timeline bar to show the journey. The color combination and the illustrations made the design more friendly and motivating. I imagined that this journey is peronal, so I used photos with one person who enjoys the trip.
However, I didn’t move forward with this concept. Think of our users who are in their 40s---60s, this design may not fit in their homes.
A supporting system helps our users keep their exercise routines. I used warmer colors and supporting imagery to encourage our users. The rounded corners and gradient also make the design more friendly and approachable.
We assume that the male family members of our target population may also use this product. However, this design was too specific to the female population, so I didn’t choose this design either.
I created a logo that emphasizes the dual funtion of the Stride 360 fitness machine
In order to explore as many ideas as possible, I started with sketching. Most of the ideas were inspired by the wheel of the bike, the shape of elliptical and the speed and motion of the machine.
I picked a few logo concepts for digitalization and kept iterating on the feedback from the creative directors. And finally, I decided to go for the logo below because the rounded “S” represent the paddle of the elliptical as well as the wheel of the bike. I planned to create an animation on the splash screen that the S spins in from the outside of the screen, encouraging our users to keep spinning and moving forward on their fitness journey.
I revised the UX wireframes
Before working on the high-fidelity mockups, I evaluated the wireframes based on our research to further iterate the UX design and improve the usability.
The Home Screen
The home screen is composed of two elements: the overview of the workout of the week and the past workouts. The weekly overview was intended to encourage our users, while the history of past workouts was to motivate our users to improve on their previous workout sessions.
The accumulated workout duration at the top section notifies our users how far they have achieved in this week. However, it’s not as encouraging.
The visual hierarchy is not strong. The way they arranged the past workout information makes the date so prominent. However, the date should not be the most important information.
I created a wheel to show the weekly workout overview. With this idea, users are encouraged to fill up all parts (dates) of the wheel by exercise every day..
I rearranged the layout of the past workout to enhance the information hierarchy.
I added a filter. When there are too many options, users can still find their preferable workouts quickly.
The bottom navigation guides users to four main funtions:
Home is the landing screen where users can see the past workout history and weekly overview. Stats provides statistical data of users’ workout, such as calories burned, workout duration, and the dates of workout. Classes provide the training videos. Once users have played the videos, they can easily access to it through the milestone page. Profile is where users can see their own profile or personalize the app.
- The labeling was confusing. We weren’t able to tell the differences between milestones and insights, and we couldn’t tell what routines mean until we tap it.
- I changed the labels for the bottom navigation to make it more relevant to the functions.
Past Workout Insights
Once users tap any previous workout from the home screen, they’ll be brought to this workout insight screen where they can see a photo preview of the workout video, a workout summary from last time, the workout details, and a short description of the workout.
The text on the video preview may have legibility issues.
Most of our users didn’t know what output is.
Previous UX team emphasized that the repeat button should be always visible when scrolling up and down. However, the position of the button in this design may limit the length of the content.
I created a section of workout details so that I can move all workout-related information from the video preview to here.
I took the idea of visualized output and create a graph for the workout structure for users to easily understand the intensity of the workout.
I only kept the record of distance and calories and removed the output since most of our users didn't what that is.
Finally, I removed the “repeat this workout” button. To replace its function, I added a play button to the preview photo. The preview photo will be fixed (sticky/floating) when users scroll down, so that that can hit the button anytime.
Users can follow along the in-workout video during their daily workout with the machine. They can track the workout metrics in the process as well as change the resistance of the machine at the same time.
- The metrics and resistance control took up too much space. It can be hard to view the video especially in a small screen on the phone.
- To clean up the screen, I created a side panel that contains all the information needed as well as the resistance control. Users can call out the side panel whenever they want.If not used, the panel slides out of the sigh, making it more space for the video.
Users can see what dates they worked out on the calendar under stats. The calendar was tested positive as users loved seeing their workout journey at a glance.
- Previous UX team incorporated all the stats into one screen. The data presentation can be overwhelming when viewing all the information on the same screen.
I created a tap bar at the top for users to switch among stats they want to view.
I created a wheel of goal to motivate users to complete their monthly goal.
I wanted to motivate our users with microinteractions
Microinteractions play an important role in motivating our target users. I created some animations to delight our users during their fitness journey.
The Weekly Overview Wheel
I created this wheel to provide the overview of the weekly workout summary as well as motivate users to keep their exercise routine. Once users enter this screen, the wheel lights up with orange if users worked out on that day, or gray, if not.
The Filling Bars
On the stats screens, I used the idea of water and tubes to encourage users to fill up the bars by working out more regularly.
The countdown screen pops up after users hit the play button of the training videos. This allow users to step on the machine and be prepared for the exercise.
Suburban moms appreciated the large fonts
For the usability testing, we remotely talked to 4 suburban moms aged from 40s to 60s who had iphone. We asked them to download the Principle app to test the prototypes on their phones. All the users were asked to complete the task flow as below:
On the home screen, we asked users what they thought each components were and asked them to take a look at the first past workout.
02 Past Workout Info
Users were asked if the workout information was sufficient enough for them to decide if they want to repeat it. We then asked them to repeat the workout.
After they viewed the countdown screen, they were brought to the in-workout video. Here, we asked them to
1 call out the side panel and
2 leave the in-workout video.
After a workout, we asked our users to check out their workout calendar. I wanted to know if our users know that they can tap the check marks.
We asked users if the data presentation is helpful for them in terms of staying motivated. We also wanted to know if the graph was easy to understand.
Key takeaways—Things to keep
The color usage was tested positive. Many users mentioned that the colors were easy to the eye.
The Workout Structure
Our users indicated that the workout structure on the workout information screen allowed them to know what to expect on this specific workout.
The Font Size
Our users thought the text on the phone was big enough for them to clearly read it during a workout.
Key takeaways—Things to change
I noticed that some of the buttons were unnoticeable to our users, including the tap bar, calendar check marks, and the call out button for the side panel on the in-workout screen.
I created a wheel of goal to motivate our users. However, it did not test well. Users had to scroll down to see the detail stats, which is the main purpose of the stats screens. As for the graphs, users mentioned that it's too overwhelming to look at; especially on a small screen.
The Play Buttons
On the past workout info, users can start the training by hitting the play button on the video preview. However, many of our users got confused by the quick start button down at the bottom. They thought the quick start button can also take them to the exact training video as well.
Final product reveal
The following walkthrough was done with Principle, which allows me to create appealing animations to motivate our target users who need encouragements to keep exercising regularly.
Joanne has been using Stride 360 app for a few months. Today, she opened Stride 360 app and was immediately greeted by the splash screen where a circular S spinned into the screen followed by "tride360" moving in. She didn't feel bored looking at the screen while the app was loading with the background water filling up. She then was brought to the home screen where she saw the wheel of weekly overview lighting up based on her workout records. She's ready for a workout.
Past Workout Info
On the home screen, Joanne browsed through the workouts she has done over the past few days. She decided to improve on one of her past workouts: Low Impact Cycling. She tapped it and view the detail of this workout. Joanne decided to go for it.
Joanne hit the play button and rode on her Stride 360 fitness machine during the countdown. The video started after the countdown, and Joanne saw a side panel sliding out of the screen, giving her a hint that she can take a look at it by tapping the button on the right.
Joanne called out the side panel. From there, she saw her real-time workout metrics as well as the resistance control of Stride 360 machine.
After a while, Joanne decided to end the workout. She was immediately brought back to the home screen where she saw today's part of the wheel lighted up.
Joanne wanted to see how she has done for today's workout. She went to the calendar and tapped today's date for the workout detail. She then went to see her accumulated duration/calories of the month and was satisfied with her improvements over the past few weeks. Now Joanne is a happy and healthy mom because of Stride 360.
You can also check out the prototype done with InVision!
I created a style guideline for future app development
It's important to stay in brand in order to constantly motivate our target audience. For this reason, I created a style guide with the information of the brand elements, style elements and UI components to ensure that future designers and developers stay in brand while developing Stride 360 application.
Things I wish I had time to do…
Based on the UX team hand-offs, we built our project based on the persona who has been using the product for a while. Future developers and designers may want to design the empty state for users who use the application for the first time.
The User-generated Content
We opted out user-generated content because our users, during interviews, mentioned that they had little interest in it. We also believed that stride 360 should initiate the content production in the beginning to ensure the quality. In the future, user-generated content can be considered once the product has enough users and well-developed content policies.
Due to limited time, the classes and profile functions were not built out yet. Consider creating the content that provide user-centered expereinces to our target audience.
This project taught me what it means to be a good designer
When making the decision for the final design direction (moodboard and style tile), I did have my own preference. However, I learned to detach my preference by making all the design concepts equally good and likeable. By doing so, I’m sure I was fair and felt no pain when picking the design for our target users.
Being open to all the possibilities means that I may need to give up my favorite things. However, every time I did so, I found myself gaining a lot more than I would have expected. I enjoyed this process of reimagining myself and rebuilding my process. This project made me a bit better every time I opened up Sketch and iterated on my designs.