About the Fit In Web App 

The objective
Motivate people into an exercise routine that suits their level, schedule, and interests.

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 providing routines, guides, interactive examples and info. Finding routines that fit into your schedule is not easy either, therefore exercises as short as 5 minutes are offered, and users can build their own collections overtime.

My role
I was the UX/UI designer for this project. I executed this assignment as part of my User Interface Design course at Careerfoundry, where Pia Klancar was my mentor for this assignment.

The persona Yasmin 

User stories & User flows

The assignment came with a written persona and included 7 written user stories: 

1. As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
2. As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
3. As a frequent user, I want to be able to schedule exercises for working out, so that I build
   positive habits.
4. As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
5. As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
6. As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
7. 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.

Based upon the user stories I created all the user flows, below the user flow for user story 1. 

Wireframing

The next step was starting with the low fidelity wireframing and prototyping on paper to come up with some solutions to the design challenges encountered. 

After setting up the paper wireframes based on the user flows, I set up the first version of the sitemap and went on to digitize the paper wireframes. In this phase I also looked at UI design patterns like coach marks and error fields.

Moodboard

Yasmin is tech savy and therefore chances are she is visually spoiled. The Yasmin I imagine, she’d like a badass app. I want Yasmin to feel immersed in the app when using it, so she’ll come back and see it as a ‘break/getaway’ from all the day to day stuff. She has a little child and I also want the app to differ from mum life. The moodboard has a sense of toughness and matureness that fits this concept best.

Design

The moodboard was the starting point for a visual study into typography, colours and imagery. 

For the typography I went with 2 Google webfonts, Anton & Oswald. They have that tough, empowered sport vibe. 

For colouring I choose a soft, but fresh and peachy orange. I combined this with a bright purple to make it stand out in contrast, give the web app a bold feel, while staying away from a sense of urgency (and/or aggressive vibe). A purple-ish black is used for the background for a sense of intense depth, and of course white, mostly used for typography.

For the imagery I decided on stylistic and clean images. They are colourfull, but with a minimal colour scheme, this means that the clothing of the trainers has to be consistent as well as the background. The vibe for the visuals is friendly, but serious. 

Different Breakpoints

This web app has a mobile first approach. After all the mobile screens were completed, 2 extra breakpoints were designed. Below the filter feature is shown on all 3 breakpoints. 

Styleguide

In the styleguide the logo and branding (typography, colours, imagery) is shown and explained. Also all UI design elements are collected and explained as to how they are constructed, so other designers and developers can work with the styleguide, this includes: buttons, error handling, icons, cards, sliders, filters, data visualistion. Have a look below: 

Learnings

Keep it simple
When it comes to user flows, leave as much out as you can. If there's no more one can leave out, then the user flow is done. 

Teamwork makes the dream work
Even tough this is an assignment from an educational training, I know from my experience as a visual designer that team work is very important. On a project like this, keeping close tabs with your developer is very important. 

Every stage is important
This assignment once again made it clear to me that thinking of all the stages in which a UI element or screen can occur is very important regarding interaction, error handling and the UX for the user. It's not just one form field, but also an active form field, an error form field and so on. 

What went well
> I quickly and smoothly transferred my paper low fidelity wireframes to digital mid/high fidelity wireframes based on grids, which set a very good base for the next steps.
> As a visual designer I know how to go about branding for a project, so this went well. And I even took some time to explore and have fun with that.
> I love grids, systems, and am very thorough, so the setting up of the styleguide was just up my alley. 

What did not go well 
> My initial user flows showed all options possible from a page, which was too much too have a clear overview. Then after mentor feedback, I took everything out that was not needed, and was left with very clear user flows. 
> At some point the design looked somewhat cramped, and I realised that there needed to be more space between all elements. It was an easy thing to fix, but I learned that testing on the device throughout is crucial. 

Fit In
This project is part of the User Interface course by Careerfoundry. Over a period of 2 months I worked on this project, and dived deep into UI design.