-FITTED-
A Responsive Fitness App
UI Case Study: FITTED
About
A responsive, fitness web app designed to motivate people to find a workout routine that fits their level and schedule.
Role
UX Designer
Tools
Pencil and paper
Figma
Invision
01/Project Overview
Objective
Motivate users who are new or returning to fitness by getting into a good workout routine so that they can enjoy better health and the associated benefits (better mood, weight management, reduce risks of illness, learning something new).
Our Product
Our responsive web app will provide busy users with the tools to search activities and view routines, guides, daily challenges, and other information on any device. Provide a way for users to keep a schedule by adding sessions to their personal calendar and track their progress.
My Role
I received a UX brief that included user personas, user stories, and features for Fitted. After the handoff, I worked on the UI of the application, created the logo, wireframes, mood board, style guide, and prototype.
02/Empathize
To better understand our users’ needs, motivations, and pain points, a proto persona was created from the information provided in the project brief.
03/Ideate
The user stories in the project brief were used to to help build user flows diagrams. These diagrams provided guidance when deciding on what screens to design for our app to help our users reach their goals.
User Story
As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
As a new user, I want to be shown how the exercises are done, so that I know I am doing them correctly.
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
04/Design
The process from paper wireframes to high-fidelity prototype.
Low fidelity screens
Low fidelity
Responsive breakpoints for the homescreen.
mobile / tablet / desktop
Mid fidelity screens
While working on the mid fidelity screens, basic UI elements and text was added to help convey the form and function of the mobile app.
Moodboard
In this step, a mood board was created to help set the tone for the app. I came up with two boards and asked potential users for feed back.
Visual Styleguide
Break Points and Grids
High fidelity responsive breakpoints for the homescreen.
The Outcome
High fidelity responsive breakpoints for the program screen.
