× Intro Context & Objective Process User Flow Wireframes Moodboard Branding Illustrations Polished Screens Responsive The Solution Interactions Animation Peaks & Valleys Potential Improvements

≫

Fitted

Created for Careerfoundry’s UI for UX Designers course, Fitted is an app that is designed to guide users through an easy, fun and interactive journey to reach their fitness goals, whatever they may be.

My Role

UI/UX Designer - Wireframes, Prototypes, Web Design, Interaction & Motion Design.

Timeline

Jan 2020 - Apr 2020.

Tools

Photoshop, Sketch, Invision

View Prototype Case Study Summary

Context

Fitted was created as a requirement for Careerfoundry’s UI for UX Specialization course. Primary specs detailed in the project brief were a mobile first approach to a fitness app that caters to fitness beginners and all levels of tech savvy. The market for fitness apps is oversaturated, with established apps falling into different categories like short workouts, workouts on demand, nutrition, activity tracking, and music. The challenge with Fitted is to stand out while catering to beginners by providing them tools to keep them motivated so the app blends with their lifestyle.

Objective

Primary Goal

Motivate people into an exercise routine that suits their level, schedule, and interests.

Questions to be answered

What features do beginner users really want in a fitness app?
What are proven design patterns that keep users motivated ? What patterns annoy users ?
What causes users to stop exercising ?
What are the most effective search criteria to keep the app personalized ?
What is the best way to visualize user workout history data so it provides value to the user?

Process

User centered Design Thinking and mobile first design were the main focus of the app.

User Flow

For user flow, I kept track of what exactly a beginner would need from a customized app that was user friendly.

Typical patterns from a perspective of an engaging fitness app -

Efficient and value adding onboarding.
Robust search - Multiple levels and options for exercises.
Flexibile scheduling and reminders.
A gaming and social aspect to keep the user motivated.
Quick access to easy to understand visualizations of workout history.

Sketches & Low Fidelity Wireframes

I began with rough sketches based on the user flow. These quick sketches helped greatly with getting the bones of the app in place. Analog sketches were then digitized to low fidelty wireframes. Through this, I began to get a feel for the architecture & design of the app. Without distractions like colors and fonts, I was able to -

Map out the functionality of the app - The onboarding section took shape during this phase of design and really came to be a major feature of the app. I got an idea of what the search feature would look like and what primary menu items would be. Wireframing also gave me a idea of which features to prioritize.
Recognize constraints - Time. With these early sketches, I quickly recognized that executing a high fidelity prototype with good research baked in would require sacrificing the complexity of some of the features, or entire features altogether I had envisioned in the user flow. A MVP was the first goal, sticking to the project brief, while allowing for feedback based improvement before adding bells and whistles.
Catch usability problems early - With the rapid sketches, I was starting to realize that font size would be a factor that I would have keep a close eye on when it came to layouts. Being new to mobile design, I needed to make sure that the font was not too small to read on the screen and that the layout accounted for this.

Moodboards

I drew inspiration from sources of flat design, bright colors and a desire for a high level of interactivity for the moodboards. My final choice of colors was a blend of the two moodboards.

Logo

The logo for fitted is a stylized take on the letter 'F'. The use of primary or secondary colors is meant to gather attention to the brand.

Typography

The primary typeface, Futura has an appearance of efficiency and forwardness and uses simple geometric forms: near-perfect circles, triangles and squares. It is also easy to read from a distance. Avenir, an organic interpretation of the geometric style, even in color and suitable for extended text is used for body copy and accents or moments of discovery.

Color

Since boldness was a big theme with the design, I used a complementary set of lively colors from the moodboards. These choices signify activity, positivity, peace and change.

Illustrations

I used my own illustrations for this app, with influence from flat(ish) design. Fitted makes use of illustrations liberally. I was particular about showcasing my illustrationskills during this project. I was very organized with time in that sense and was able to achieve the goals that I had set. The illustrations are stylized, the animation smooth and most importantly, works with the vibe of the app.

High Fidelity Screens

Some polished screens from the final prototype.

Responsive

I approached the design process with a Mobile first strategy, but the idea of Fitted is of an app that can handle multiple screen sizes well, so responsive and wearable design were constant aspects of the creative process. While I would have been happy if I could have begun the design process with a responsive approach, the grid system allowed me to adapt the design to different sized screens.

The Solution

Primary Features

1. Onboarding

Onboarding is one of the key factors that can make or break user retention in an app. Fitted uses an extensive and easy to use onboarding section to collect user information and permissions, should the user allow access to information. The information collected personalizes the app and allows for a richer experience. This section also indicates to the user the benefits of using the app, while also giving a quick glimpse of functionality. To this end, I used benefits oriented onboarding.

2. Personalized Exercise Routines & Search

Options. Options. Options. The use of multiple filters is key to choices that a user can make with Fitted. A strong search feature will help identify user likes and dislikes and help with identifying an exercise routine that the user is willing to adhere to.

3. Scheduling

Setting up a exercise calendar should be a seamless experience for a user. Fitted does this, along with allowing the user to set notifications during the scheduling or changing the notifications in Settings.

4. Exercise Breakdowns

As beginners, users need some hand holding when it comes to exercise routines. Exercise breakdowns, step by step, are available on Fitted. These help users make informed desicions about exercises they would like to pursue and instruction, should they need to refer to it.

Interactions & Gestures

Interactivity and motion exploration were high priority for the design of this app. I was particular about showcasing animation skills during this project. The gestures run smooth and most importantly, works with the vibe of the app.

I explored different masking and animation techniques to best achieve the goals of making Fitted fun and easy to use.

Animation

Onboarding

Fitted has an extensive, fun and interactive onboarding section that collects relevant information to personalize user experience. This section also offers a glimpse all the features that the app provides. The user can opt out of onboarding at any point in the process.

Scheduling

Users can search for exercises based on keywords and explore the exercise in detail on the Info page for a Step by Step breakdown. Users can then proceed to schedule their desired sessions easily by using the calendar to set up a workout plan.

Step By Step Instructions

Users can get a detailed breakdown of the steps involved in an exercise by using the Info button on the Exercise screens.

Peaks

Research

Illustrations & Animation

Valleys

Typography

Accessibility

Future features

Daily Challenges

Workout History

Achievements & Rewards

Potential Improvements

Rapid Prototyping

Design Feedback

Design Patterns on multiple OS