Fitted App | Gugli

Exercise App

An app to motivate people into an exercise routine that suits their level, schedule, and interests.

Role

Responsible for the full Ux-Ui design
of the final product

View Prototype

Timeline

End 2021-Early 2022

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?

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.