The Challenge
I chose to create a workout app prototype that tracks workouts into a game. In the game, the user's character gets stronger the more they workout, and this character can then take on stronger foes. The game is meant to give a visual representation of the user's progress to motivate them to stick to their workout routine.
Problem Space
"How might we motivate millennials to start new fitness habits?"
Research
Research was done through conducting surveys, reading articles, and taking ideas from personal experience.
How Do People Commit to Exercise?
Fitness Knowledge
|
|
80% of respondents were familiar with a limited number of exercises, often learned from friends or trainers.
|
|
Other Insights
|
"I get discouraged when I don't see progress."
|
"Visualization of how I could look motivates me to do more."
|
"It's easier to workout in a class or with friends."
|
Personas
Experience Map
Vision
Gamification Loop of Fitness
|
|
|
|
Information Architecture
App Map
Main Task Flow
Design & Testing
Through the design process I went through many iterations. Those iterations were based on several rounds of user testing. Things from colour changes, to UI compromises, and complete overhauls were done in accordance to feedback. Below are some of the changes that taught me the most.
Order of Interaction
The first round of user testing taught me mainly about order of interaction. Two screens, the workout tracker screen and the notification of stat increase screen, were moved when it seemed users were being impeded by their placement.
Original Workout Tracker Flow
This flow is based on the idea that you would want to pick your workout, see the instructions directly after, then tap "start" to begin tracking your workout.
|
Updated Workout Tracker Flow
The updated flow leads directly to the workout tracker, removing the barrier of having, instead leading directly to the tracker. The option to for the instructions is now in a "how to" section that is optional to view.
|
Original Notification Placement
The notification after working out is meant to tell the user how much their avatar improve because of their workout. User testing revealed that receiving that notification might interrupt their workout, as they now have to close the notification and get back into working out, or they might be distracted and want to play the game instead.
|
Updated Notification Placement
The updated flow placed a quick "Good Work" notification, simply reminding users that they're doing well and should stay hydrated. When they close it, they are returned to the muscle groups page to track their next workout. They will only receive notification of their avatar's gain in level once they return to the home page, removing the distraction from working out.
|
NAVBAR
The navbar was a visual design challenge. A traditional navbar caused the whole app to feel like just an app, taking away from the game built into it. Users had a look at a traditional navbar, which evolved into a flyout navbar & finally a Snapchat style navbar all through their feedback.
Users made comments about the navbar and were asked about how they felt using it during their experience in both the Train and Battle section. Based on feedback, the 3rd attempt Snapchat Style navbar was favoured. The art style was solidified in the 4th attempt with the Arcade/Snap Hybrid, making the experience feel complete through and through, as the 3D button layout was easy to use in an app environment and heavily reminiscent of arcade buttons.
Tracking Exercises
Original Exercise Tracker
The tracking screen was a several step process. This was done to simplify the process. Users found that there were too many screens with this method. Jumping from one to the other for each rep of an exercises felt like a hassle.
|
Updated Exercise Tracker
The update served to combine all of the needed information into one place, removing the timer as well. This served to give users a one-stop tracker to make combine the process into one coherent experience.
|
F-Shaped Pattern
Every time a user test was run, users would hit Battle before they hit Train. The app requires users train in order to battle. I discovered this behaviour was strictly due to positioning. The Battle button was on the left, and often seen first. This is due to F-shaped reading patterns, meaning users will always read content in the form of an F.
After this realization, the app layout was changed. Now Train mode and Battle mode were switched, so Train could be on the left. Though seemingly minor, this change led to more users hitting Train before Battle at first glance, decreasing the amount of guidance needed for their first user test.
After this realization, the app layout was changed. Now Train mode and Battle mode were switched, so Train could be on the left. Though seemingly minor, this change led to more users hitting Train before Battle at first glance, decreasing the amount of guidance needed for their first user test.
Prototype
Art & Branding
App Icon Iteration
Pixel Art
