Fitted

Fit in that 5-minute workout.
Project Overview
Firstly, 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.

Secondly, finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to exercise get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
Objective:
Motivate people into an exercise routine that suits their level, schedule, & interests.
My Contributions
UI Design: User Flow, Low-High Fidelity Wireframes , Moodboard, High Fidelity Mobile UI Mockups, Brand icon & Icon set, Interactive prototype, Animated Interaction, Style guide,
Breakpoints: Mobile, Tablet & Desktop.

Tools
Sketch App, Invision, Balsamiq

Timeline
August - October 2020

Problem

Despite the number of workout programs available, many people still find it difficult to maintain a regular workout routine due to several factors such as long work hours or a lack of exercise options that suits one's level and interests.

Design Challenge and Process

Create a solution to enable busy people and those new or returning to working out to find a fitness routine that caters to their level, schedule and interests.

Building the Architecture

Userflow: This was structured around the primary user cases.Users find and filter exercise videos,  add sessions to calendar, create an account, track and chart their progression over time, and share their favorite routines or exercises.

Development

Gathering all information from my research, I was able to create a tangible UI prototype & flow. Low, Mid & Hi-Fidelity wireframes were done with mobile first approach and an iterative process. Here are a select number of screens with key features shown below:

Usability Test Insights

Usability Test Results left positive remarks on the prototype and majority of the testers were able to complete the main tasks. However users did mention about how the onboarding background page’s was a bit distracting.

Problem:
The written information on the Onboarding page is not clear.

Solution:
Remove the background image as to keep it clean and minimal.

Moodboard

Design System

Animation

Final Mockups