UI for Responsive Web - Personalized Fitness Matrix  
FITTED Mockup AM

UI Design Summary

Goals

Find a way to make an easy to use and motivating fitness app that makes it easy for beginners to achieve their fitness goals. Add a layer of gamification and the ability to connect with friends to increase motivation and promote continued use. Make something that can change with the user as their goals and preferences change.

Easy to Use

I identified that the greatest struggle for beginning users is developing a schedule so I made this a priority of for app. I developed an onboarding experience that helps users set their goals and preferences so the web app can do the rest. Users do not have to rely on lengthy searches to find the right workout since the app does that for them.

Making it Fun

The personal and tailored schedules are automatically modified through post-workout, user ratings and continued adjustments. If the user does not like anything on the schedule, they can "Mix it Up," which adds another layer of control and fun all done without the user having to worry about planning their exercise routine.

Information Architecture

"User Tracking and Schedule" is the default page and dashboard that tracks user status and provides an overview of app generated schedules and daily challenges. Most of the work will be done through the app so users do not have to go too far to get started. Apart from the customization and user specified metrics, the overall app has a basic interface and minimal pages.

Low-Fidelity Paper Wireframes

The user persona was for an exercise novice and the web app itself is geared toward beginners with little time and no experience. That is why the app had to get them up and going as quickly as possible. More than that, it had to keep them motivated. A lot of fitness trackers and apps give you calorie readouts and tons of metrics and charts, but for a lot of beginners, those are often demotivating and do not focus on the true purpose of exercise. Exercise is there to help charge our life and keep us healthy and full of energy. So, in early paper prototypes, I focused on creating a simple interface and experience that tracked a single metric -- the user's charge.

Mid-Fidelity Sketch Wireframes

Mood Board and Icons

For color inspiration, I drew on the classic complementary colors of blue and orange. which reflect the high-intensity and cool down periods of exercise. Orange serves as a call to action, the light blue is used as a highlight, and the dark blue helps to subtly lift items off the black and differentiate elements. All of the icons are custom and have been incorporated into the full style guide, which is available on Behance.

View the Style Guide on Behance

Responsive Web Mockups

View Web App's Landing Page

Animating the Onboarding Experience with Principle

Clickable Prototype

Clickable App Prototype

Let's Talk Design