Introduction
Help people being motivated to daily exercise with simple daily workouts.
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 get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
Problem Statement
Motivate people into an exercise routine that suits their level and schedule
Challenge
Finding exercise routines for your levelcan be difficult, especially if you want to try something new. The Fitted webapp aims to help people get into exercise by providing routines, guides, interactive examples and info.
Goal
Create a fun and personalised web app thatis designed to encourage people who want to workout and develop an easy routine for exercise. This means fitting in as little as a 5 minute routine.
Design Process
User satisfaction went through five specific design steps.
In order for the problem to be solved so that our users are able to enjoy their time while sporting, specific steps must be taken. The design process followed 5 steps from thinking to refinement. This way it could be ensured that I was on the right path.
Creating the Personas
Base on the user personas, I had to create a scenario for these personas of how to achieve a goal while using the app.
I created scenarios that I think the user needs to go through in order to feel confident when going out in the sea.
Working on the flows
Base on the personal traits & habits of each user persona , I created user flows to be used as reference points for the wireframe procedure.
Sketching out ideas
Exploring layout options and modifications based on concepts
Brainstorming sessions, inspired by scrum meetings, helped on clearing the view on basic functionalities and pin point some pain points of the design system. Creating challenging assumptions, asking questions based research results to strengthen ideas, I started looking for possible visual solutions through sketching.
The road to conceptual and contextual solution
During the sketching sessions I arrived at results towards a solution, where every user has can get the most out the app with the least possible "back and forth" in the app, either through desktop or mobile.
The 5 W's of the Fitted App
Who?
People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.
What?
A responsive web app is best for Fitted, as users can search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.
When?
As the web app aims to get users into a routine that suits them, the web app can be used whenever they like. They will use the web app while they are searching for, scheduling, and following routines.
Where?
As the web app aims to get users into a routine that suits them, the web app can be used whenever they like. They will use the web app while they are searching for, scheduling, and following routines.
Why?
To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)
Wireframes
Wireframes were created to define features and placement
There were created 3 different type of wireframes: low fidelity, where elements where placed in order to check how they work on with layout. (see the section above) In a second phase the mid fidelity wireframes had the basic Ui elements and text were added to create a first visual draft of the design.
For these wireframes I chose a 6 column grid with a 12px margin and a 20px gutter.. This way I felt it would give my mobile design more space.
Wireframes helped me visualise how the user will get from point A to point B
Low/mid -fidelity wireframes allowed to design some of the basic details for each of the screens represented in the user flow diagram.
This way I was able to outline the steps already laid out in your user flows.
While a user flow diagram presents the overall progression of a user through the journey, wireframes show how a user will get there.
In other words, "What buttons will they need in order to progress through their flow?" "How will they navigate back?"
Ui & Visual Design
Typography
The font chose for this app is the Monserrat font.
Montserrat is a geometric sans-serif typeface designed by Julieta Ulanovsky, inspired by posters and signage from her historic Buenos Aires neighbourhood of the same name. It is rather close in spirit
to Gotham and Proxima Nova, but has its own individual appearance—more informal, less extended and more idiosyncratic.
H1: Montserrat Semibold - 30 pt
H2: Montserrat Semibold - 24 pt
Button: Montserrat Semibold -15 pt
H3-Title Categories: Montserrat Medium -14 pt
Text: Montserrat Regular -12 pt
H4 - Icon titles : Montserrat Semibold - 12pt
Colour
A so called neon palette was chose for the app. The reason behind is that t it would give a good variety of cool, calm and excitement.
There is also a use of gradients in the app as I feel that it would give a more “modern” look and feel style.
Use of images & Illustrations
Images for workouts
In this section the images that should be used, need to have a gradient background ( with according colours as
the gradients used in the rest of the app) and the athlete performing the specific exercise that the workout is about. images for the workouts for you sections
Images for the exercises guides
In this section the images that should be used, will be in the form of a technical illustration where it shows which muscles are being worked.
Images and style for videos
The trainer on the video should be alone in a coloured background only with the equipment needed: for example a yoga mat , or weights or rubber bands etc.
Icons
Icons were used throughout the web-app, following the colour scheme so nothing looks out of place.
Gamification badges were created to increase user engagement.
Users will be able to earn and unlock badges when they reach a certain milestone which can then be shared on social media.
