Fitnetic helps you to get in shape and stay in shape from the comfort of your own home

Fitnetic is a responsive web app that aims to help users to get into an exercise routine of their choice that suits their level, schedule and interest. Users can browse for specific exercises, programs, and daily challenges where they can find workout routines they can do at home.

Role : UI/UX Designer

Tool: Figma, Angle Mockups

Timeline: June 2021 - July 2021
What is it?
Fitnetic is an app that comes with all the things you’d expect from a fitness app: workouts designed by our fitness experts, different types of fitness programs and daily challenges, a tool to help you to keep track of your fitness goals, get access to your personalised fitness insights and learn how to reach your fitness goals and more.
How does it work?
The app displays all fitness programs and exercises according to your fitness goals. The daily challenges on Fitnetic will provide you a fresh and short exercises every day that helps you diversify your exercise to keep things exciting. You can also log your weight, calories and past workouts to keep track of your fitness progress.
My Role
As a UI/UX designer for this project, I'll be focusing on the UI stage based on existing or already made UX. I was responsible for the whole UI process from Define, Ideation to High Fidelity Prototype.
My Objectives
Design a fitness web app to encourage people who want to get into an easy routine for physical activities.
What is it?
How does it work?
Fitnetic is an app that comes with all the things you’d expect from a fitness app: workouts designed by our fitness experts, different types of fitness programs and daily challenges, a tool to help you to keep track of your fitness goals, get access to your personalised fitness insights and learn how to reach your fitness goals and more.
The app displays all fitness programs and exercises according to your fitness goals. The daily challenges on Fitnetic will provide you a fresh and short exercises every day that helps you diversify your exercise to keep things exciting. You can also log your weight, calories and past workouts to keep track of your fitness progress.
My role
My objectives
As a UI/UX designer for this project, I'll be focusing on the UI stage based on existing or already made UX. I was responsible for the whole UI process from Define, Ideation to High Fidelity Prototype.
Design a fitness web app to encourage people who want to get into an easy routine for physical activities.
PERSONA

Designing for our users

The primary persona of Fitnetic is Rebecca Smith. Rebecca is a 23-year-old Software Developer from London, UK and is a tech savvy, as she works on computers every day. I used this persona constantly throughout the project to make design decisions and build empathy with users.

INFORMATION ARCHITECTURE

Site Map

With the project goals and Rebecca's needs in mind, I mapped out the basic functionality and flow of the app. This allowed me to gain insight into every feature that the app would offer and how the user will go about using the features.

Low Fidelity Wireframes

Before moving onto mid or high fidelity wireframes , I wanted to get a feel for what the core of the app would look like. This is the step where I started to visualise the product.

Mid Fidelity Wireframes

Following my low fidelity wireframes, I designed them further into mid fidelity grayscale wireframes. By building the mid fidelity wireframes, I was able to focus on the functionality of the features.

VISUAL DIRECTION

Moodboards

I created 2 moodboards to visualise the direction I wanted to go with the app. It allowed me to collect thoughts, ideas, colour schemes and moods in one place. I have chosen to go with Version 2 as purple can be bold but also calming which makes it a very balancing color. My goal is to create a welcoming, motivating and soothing atmosphere for our users.

Version 1

Version 2

DESIGN SYSTEM

Style Guide

I created a Style Guide for Fitnetic using the elements from my design. This can be used to ensure that the visual design remains consistent as the app is further developed.

Getting in shape
has never been easier

Browse Program

Not sure how to start working out? Fitnetic helps you to personalize your plan according to your goals, workout duration, and how often you want to exercise. There are programs or exercises with levels ranging from beginner to advanced and lasting from 15 to 60 minutes, there is something for everyone.

Daily Challenge

Building new healthy habits takes time. Whether you're a beginner or skilled at working out, there is a mini challenge every day on Fitnetic. Our goals is to get you stronger, fitter, and healthier without getting bored.

Track your progress

It’s easy to lose track of where you are and where you want to be regarding your fitness. No matter whether you are trying to lose weight, gain weight, or maintain where you are, tracking fitness progress is an essential piece of your ongoing success. You will never lose track of your progress on Fitnetic.

Insights

Searching for reliable fitness tips? We've got you covered! You can access to personalised fitness insights and discover tips on fitness, nutrition and well being on Fitnetic.

Browse workouts

The browse program screen is the entry point for Fitnetic. Users are able to browse for programs or exercises according to their goals, workout duration, and how often they want to exercise. There are programs or exercises with levels ranging from beginner to advanced and lasting from 15 to 60 minutes.

Daily Challenge

Building new healthy habits takes time. Whether our user is a beginner or skilled at working out, they will be able to participate in Daily Challenge. This allows our users to find short exercises that they can do multiple times a day without getting bored.

Track your progress

Staying on track with your weight loss or fitness goals can sometimes be difficult. There is a way for our users to track their progress by logging their weight, calories and past workouts.

Insights

Searching for reliable fitness tips? Fitnetic got you covered! Our users will be able to access to personalised fitness insights and discover tips on fitness, nutrition and well being from our fitness experts.

Join the community

A community where users can share their fitness journey, discuss fitness topics, ask questions and get support from others.

Join the community
A community where users can share their fitness journey, discuss fitness topics, ask questions and get support from others.
FINAL PRODUCT

Lets try out the prototype!

Let's say you are a fitness beginner trying to get in shape at home. How would use Fitnetic to help you to achieve your fitness goals?

Link to prototype

Copyright © 2021 Nicole Lee. All Rights Reserved.