UI Design
Find a daily challenge, routine, and guidance to a healthy active life.
Fitted is a product that came to life through UI for UX design training program at CareerFoundry. The user persona Rebecca, design criteria, and feature deliverables were given.
The focus of this project was the UI part of the web app. The web app is designed to encourage people who want to get into an easy routine for physical activities.
My role
Fitted was an individual project which allowed me to learn more about UI design. At the start of the project, UX elements such as user personas, user stories, and visual design principles were given, so the focus would be on UI design.
Project duration: DEC 2021 - Feb 2022
Problem
Create a web app for people who are new or returning to fitness, want to find activities they like, and get into a good routine. The web app aims to get users to a routine that suits them, it can be used whenever they like. This is to help the user become healthy and enjoy associated benefits.
Solution
User stories
The information given in the brief was the starting point of this project. Derived from the user stories I was able to create a user flow to then start with Low-Fidelity wireframes and go in-depth on UI elements.
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 track progression and record what I’ve done, so that I can see my progress over time.
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.
Low-Fidelity
Mid-Fidelity
Visual hierarchy & Spacing
Steps such as determining visual hierarchy were important in the design process as they helped me to determine the lay-out of the web pages. Next to this, I used grids to create visually appealing spacing between elements. Overall the web app should look clean, modern, and fun for the user.
Visual design principles
Rationale
I want to app to motivate its users, evoke the feeling of passion when working out. The user should feel satisfied that she/he has find the time in their busy schedule to workout.
The mood board focusses more on the vulnerable side of working on yourself through the app. The rounded shapes in a soft texture represent a feeling of being open and vulnerable. The color scheme consists of bright orange with natural shades of green/brown.
Mood board
Using my mood board as inspiration and doing research to create a good color pallet I knew I wanted to have the accent color orange. The color orange is commonly used with workout apps as they evoke emotions such as playfulness, warmth, and energy. Next to this, I felt that the vulnerable side of the user should be portrayed. I started off with dark colors but realized this wouldn’t be optimal for my web app/ I decided to play off the brown color and go towards a more green/brown tone. This way the web app has the perfect balance between being reliable and fun/quirky at the same time.
Rationale color
Style guide
The overall style of the web app should reflect the user persona and its goals. The brief gave partial branding guidelines but were open for interpretation.
Breakpoints
Desktop
IPad
Mobile
High-Fidelity prototypes
Learnings
The most interesting part of this project was translating the UX information into a good UI design. I purposely experimented with the color scheme as I had the freedom to do so within this project. Going more into depth on the UI part of a web app design has allowed me to focus on details such as typography, animation, and overall layout.
The area I would like to develop further is usability testing, to gain feedback and iterate to enhance the UI elements even further.