Habfit was an app created for the Virtual Phase of Designation. I had six weeks to create a visual design that reimagined how people can not only adopt, but maintain a healthy lifestyle. I was required to take the user research executed by a previous UX team and create high-fidelity designs. At the end of the six weeks I submitted a high-fidelity prototype of my solution.
Our two users were Nate Sato and Allie Smith. Nate's primary motivation was encouragement. His goal was to improve his confidence. His main frustration was intimidation. Allie was motivated by having fun and being social. Her goal was to maintain a fitness lifestyle. Her frustration was boredom.
I sketched out my initial designs and turned them into high-fidelity images. I drew inspiration from themes of activity, energy, agility, health, and tranquility.
From my research, I noticed there was a healthy mix of dark to light interfaces, but a majority of them had bright bold colors to express energy. I decided imagery should be a prominent feature of the app, though the images should feature relatively averagely fit people so as not to intimidate Nate. The app should also have encouraging messages sprinkled throughout the app and the features should be completely customizable.
I sketched out my initial designs and turned them into high-fidelity images. I drew inspiration from themes of activity, energy, agility, health, and tranquility.
Follow are the main screens from my previous design. One of the main differences besides the layout in the color of the nav and typography. I've included the screens from my original design to accentuate the evolution of my portfolio and tastes.
I moved the current day to the bottom of the screen because it wasn't as important as some of the other information on.
I added this screen because I wanted to offer users the option to workout even if it wasn't on a pre-scheduled day.
For the screen on the left, I decided to use tiles because it would allow for easy selection if a user were in a hurry. It would also accommodate larger fingers. I also added tiles for Spotify, Pandora, and iTunes so users could listen to their own music.
The reason I added the second screen was so users could have more control over what they're listening to and know more about the song. They would also have access to the original playlist view.
I added some icons to the music menu screens to allow for greater control over the music playing, and so Habfit could learn their music preferences and be able to suggest similar songs.
I changed the way the active dates were represented so it they would be easier to see the days. I also added a data visualization that would change based on the set goal of the user.
A ribbon was added to give more indication of the current settings the user has in place to show their overall progress. I also added stats and a place to view their earned badges.
I created an option to run because some people may want to run outside of their planned workouts. This includes setting a start and end point, past or favorite routes, and a music option.
Users would be able to see multiple route options and edit their course.
As part of my final deliverables, I created a style guide to help Habfit with future design decisions. I also created a prototype with the final screen designs. Since we didn’t have a complete flow, the prototype ran through the screens in chronological order to provide a better idea of how the end product would look.