FITX

Get FIT with FITX workout

01

OBJECTIVE

To create a web app that motivates people into an workout routine providing exercise of their choice with instructional information, videos and schedules.

This responsive web app is designed to encourage people who want to exercise get into an easy routine that fit into their schedule.

02

UI/UX JOURNEY

UI
Brand Identity
Mood Board
Style guide:
IconographyTypographyColour PaletteImagery and Illustration

UX
User flows
Usability Tests
Low fidelity prototypes
Mid fidelity prototypes
High fidelity prototypes

03

PERSONA

04

DESIGN CRITERIA

User Stories

As a new user,
I want to learn about different exercises so that I can figure out what is best for me.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 be able to schedule exercises for working out so that I build positive habits.I want to track progression and record what I have done so that I can see my progress over time. I want to be able to share routines with my friends who may also be interested so that I can encourage them to become healthier.

05

USER FLOW AND
LOW FIDELITY
PROTOTYPE

In order to define the screens the user must interact with to complete the tasks on the web app, the first step was to create the user flows for each user story.

Once the user flows has been created, low fidelity prototype was created to conduct user tests with potential users.

User flow

Wireframe: setup preferences

setup preferences

Wireframe: Homepage, Workout Program

06

MID FIDELITY
PROTOTYPE

After user testing, the screens were updated with the mid-fidelity created. The key function and components of each screen are shown here - UI elements, hierarchy, spacing and UI design patterns.

07

MOOD BOARD

To communicate the visual direction of the web app, two mood boards were created to define different emotions.

Mood board <Retro Colours> was chosen after evaluating the 5 Ws and the goals, background, and environment of the persona.

The colours combined such as coral and aqua goes great with anything bright and dark background, similarly where most sports attire colours are made up of. It gives an engaging and energizing style to the users.

The bright coral could inject energy and passionate vibes to the persona whereas the aqua provides an inviting and playful feel. The colour scheme is more vibrant and lively. Also, the images is more accessible and playful communicating a more positive and approachable experience.

Also this option does not present the level of perceived professional skill level of <Olive Army Sport Mix>.

08

HIGH FIDELITY
PROTOTYPE

Once the visual direction of the web app is decided, high fidelity prototype is developed.

09

MOCK UP

Key features:
find workout videos exercise schedulecreate user accountadd workout program to scheduletracking user's progressdaily challengessocial sharing

10

RESPONSIVE DESIGN

The design of the web app has been adapted for different devices.

11

STYLE GUIDE

12

PROTOTYPE LINK

FITX: Click the link to see the clickable prototypes in InVision.