01. The Challenge
Brief
To create a web app to motivate people into an exercise routine that suits their level, schedule, and interests.
Context
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.
Feature Requirements
Search and filter exercise videos (based on type, difficulty level, length, etc.)
Exercise scheduler (based on exercise interests and actual daily routine: commute, sit at desk, etc.)
Option to add sessions to calendar
Create user accounts
Tracking and charting of users’ progression over time
A game layer with individual daily challenges, achievements, and/or rewards
Social sharing for routines or favourite exercises
02. Low-Fidelity Wireframes
After creating users flows and a site map, I decided to follow the mobile-first responsive design methodology. Low-fidelity wireframes for the mobile web app were created. Being hand drawn meant that this was a rapid iterative process focussing on the high level functionality of the app.
From these hand drawn wireframes via a 12 column grid, something of a higher fidelity was produced:
03. Moodboards
Once the wireframes were established, mood boards were created to try and help communicate a distinct style and visual direction for the web app. Two were created (below).
From the brief and the personas provided, the moodboard to the left was deemed more appropriate as it has a aspirational, warmer, more inclusive tone then the rather more brutal tone of the moodboard to the right.
This fits with the brief in that the app is aimed at those starting or returning to fitness.
04. Mockups
Now a style was agreed on, it was time to to create full mockups of the mobile site. This involved deciding on the correct colours, imagery, typography and iconography that would help fulfil the desired tone of the web app.
05. Style Guide
Overview
Fitted aims to promote a vibrant, healthy, aspirational and accessible brand. The style choices made are designed to make a user feel a sense of inclusion- that they are capable of making a lifestyle change - while also helping them believe they are part of a modern, lifestyle community - helping to build a sense of extrinsic motivation to aid long term engagement in the site.
From a content perspective, it offers a simple route to those wishing to get fitter using the tried and tested method of HIIT workouts. No equipment, no gym, no fuss. The option to share with friends is available is the user needs this kind of motivation.
The style choices made should consistently reflect three core experience principles to convey this - inclusion (I can do this), vibrancy (this is fun), while also provoking a mild sense of aspiration (I want to do this).
As such the colour palette and typography is modern and should reflect ‘lifestyle’; this should feel like it could be just as at home in a lifestyle blog or on instagram. This coveys the experience principle of aspiration - provoking a sense of inspiration for the user, building the desire to be part of this lifestyle through use of the site.
Images show fit - though not overly muscular - individuals working out alone and without equipment and not in a gym to keep users motivated. Images that have been obviously staged/posed should be avoided.
Colour Palette
Typography
Icons
Images
Suitable image examples - vibrant, colourful, fit
Unsuitable image examples - cheesy, muscular, sexualised
UI Elements
06. Responsive Mockups
From the mobile mockups and using the style guide, final responsive tablet and desktop web apps were created at different breakpoints, along with the mobile version.
