UI Design

Fitted

Responsive web app that helps users to get into a fitness routine that suits their lifestyle

The Objective

To motivate people into an exercise routine that suits their level, schedule, and interests

Finding exercise routines for your level can be difficult, especially if you want to try something new. This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info. Additionally, finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
Persona

Empathising with the users

Rebecca

Software Developer
Goals

• Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
• To find a tool that will help her fit exercise routines into her busy schedule.
• To learn how to properly exercise, since she’s a beginner to working out.
• Finding routines she can enjoy.

“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”

Tasks

• Rebecca wants to be able to find exercises that match her goals of  getting in shape.
• She wants to find short exercises that she can do multiple times per day in between other activities.
• She wants the tool to keep her motivated as well, as her schedule can often be distracting.

Environment

• Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
• Social: A colleague recommended this tool as something she should check out to help her reach her goals.
• Technological: Rebecca is very tech savvy, as she works on computers every day.

“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”

Rebecca | Software Developer

Goals

• Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
• To find a tool that will help her fit exercise routines into her busy schedule.
• To learn how to properly exercise, since she’s a beginner to working out.
• Finding routines she can enjoy.

Tasks

• Rebecca wants to be able to find exercises that match her goals of  getting in shape.
• She wants to find short exercises that she can do multiple times per day in between other activities.
• She wants the tool to keep her motivated as well, as her schedule can often be distracting.

Mid-fidelity

Wireframes

After mapping out the user flows for the app I was ready to start creating the first wireframes with the main features. These were iterated and refined to then turn them into an interactive prototype.

Mood Board

Choosing a visual direction

In this phase I experimented with mood boards with very different directions. After analysing the project brief, and getting feedback from users with similar characteristics to our persona, I chose this mood board that uses bold, neon colours, bold sans serif fonts, and marker strokes and textures. This style feels fun and inspirational, which is exactly what the target users need now that they’re looking to get into fitness and start a new habit.

Style Guide

Colour & typography

UI Patterns

Download style guide
high-fidelity

Prototypes

Exercises

New to working out? Browse through the exercise collection and find detailed guides that will help you learn proper form.

workouts

Fitted helps you find a routine you love and make it fit into your daily schedule –no matter how busy it is. The app has a variety of customizable workouts with different durations, objectives, levels, and equipment.

workouts

Fitted helps you find a routine you love and make it fit into your daily schedule –no matter how busy it is. The app has a variety of customizable workouts with different durations, objectives, levels, and equipment.

Challenges

Have trouble staying motivated? Spice up your fitness journey by completing fun challenges that suit your lifestyle and goals.

Takeaways and

NEXT STEPS

This project, which was final assignment for my UI design training, was a great opportunity for me to challenge myself with a visual direction that is completely new to me, since I never worked with an edgy aesthetic with bold colours. In a real-world scenario, the ideal next step would be to conduct usability tests with the prototypes for each breakpoint. This would allow me to identify what works well for the users, as well as the areas that need improvement.
Interactive prototype

Sound like a fit?

ContactLet's Talk
Lissy González
ResuméLinkedinBehance