I.aligned

i.aligned

Case Study | 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.

Goal | Motivate people into an exercise routine that suits their level, schedule, and interests.

Type | Designed from scratch.

Prototype

Client

Career Foundry

Project Date

2021

PROCESS

1

RESEARCH

2

EMPATHIZE

3

CREATION

4

TEST

5

DELIVERY

1

RESEARCH

Defining project brief

Objective

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 get into an easy routine for physical activities.This means fitting in as little as a 5-minute routine.

The 5 W’s

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 – The web app can be used wherever it fits best to the users. Depending on the exercise, it can be done in their workplace, outside or in their house, It is a matter of the user´s choice.
Why – To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new); Exercise should be fun and suited to each user; To save time by fitting exercise into daily routines, such as walking or cycling to work or school.

Meeting the user

User stories

As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
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 be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.

User goals

Jessica wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
To help with this goal, Jessica wants to find a tool that will help her fit exercise routines into her busy schedule.
As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.
Jessica wants help finding routines she can enjoy.

1 | RESEARCH

2

EMPATHIZE

3 | CREATION

4 | TEST

5 | DELIVERY

User persona

Meet Jessica

Assumptions

Trying to empathize Jessica I have adopted the mindset of a beginner. None judging what I observe but to question everything. Even If I think I know the answer/solution I didn´t implement it but jotting down to find solutions from real users through tools like A/B testing or usability test.

User scenarios

Storyboard

Here some of Jessica´s scenarios

1 | RESEARCH

2 | EMPATHIZE

3

CREATION

4 | TEST

5 | DELIVERY

Features

I.aligned features

Browse exercise videos, based on type, intensity and duration
Choose the layout color based on the user´s mood
Schedule exercises and join challenges based on personal needs.
Create a user account and share content with friends
Earn achievements and track personal progress

User Flows

Sitemap

low fidelity wireframes

navigate through mobile

Medium fidelity wireframes & prototype

navigate through mobile

Grid & Breakpoints

style guide

Preview the full style guide

1 | RESEARCH

2 | EMPATHIZE

3 | CREATION

4

TEST

5 | DELIVERY

Usability test

Accessibility & inclusive

Figma Plugins

Taking advantage of the fact that Figma has access to many plugins that help on creating an inclusive design and expands the scope of design especially in the case of ensuring accessibility to all users. Readability and legibility in accordance with the criteria defined in the Web Content Accessibility Guidelines (WCAG).I have used the following plugins to take “i.aligned” to its next level at the stage it is right now.