Habfit

User Interface Design | Branding

Company

Design a fitness app that appeals to users of most experience levels and encourages users to be habitual about their fitness.

Challenge

Tools

Habfit

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 Users

2017

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.

UX Wireframes

2017

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.

Wireframes provided by the UX team.

Competitive ANalysis

2017

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.

In-Category
  • Fitstar gave off the feeling of comfort and security, it also seemed rather professional. This was in-part to its color palette and certain UI elements such as its imagery and the layout/organization of information.
  • The Johnson & Johnson Official 7 Minute Workout's interface seemed dull despite its amount of color. It was a little buttoned up because of its lack of imagery and toned down minimal iconography.
  • 7M Workout (For Women) was better for tracking weightloss but had some different features than a general workout app. The use of pink made the app as gendered as the name suggested.
  • Sworkit relied heavily on photos versus iconography. It also used a lot of cool colors in photos and remained consistent throughout the app. It had a sports drink commercial aesthetic.
Out-of-Category
  • Fitbit had a bright and friendly design due to its light color palette and rounded UI elements. It utilized both iconography and basic imagery to keep things simple yet interesting.
  • Connect had a sporty and intense design. It had a feeling of authority because of its very dark background and bright UI elements.

Logo Conception

2017

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.

Key Screens

2017

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.

Dashboard

I moved the current day to the bottom of the screen because it wasn't as important as some of the other information on.

Dashboard
(featured)

I added this screen because I wanted to offer users the option to workout even if it wasn't on a pre-scheduled day.

Select playlist + current song

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.

My work

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.

Activity + profile

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.

Plan run
+ start run

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.

Other deliverables

2017

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.