CoolFit

UI/UX Design

Screen Shot 2018-10-07 at 02.57.06.png

2018.9

UI/UX Design | User Research

Team Member: Nana, Janae, Alexis, Yanyan, Leo

My Role: ​

Competitive Analysis;

Part of the Wireframe Constructing;

Design System Building;

UI Design;

Visual Design;

Fitness can be an ever-lasting topic in our daily life. Girls are eager to have beautiful body shapes while boys want to be robust and muscular, plus, keep an excellent exercise habit can guarantee a healthy lifestyle.

 

According to our previous research, 66% of Americans who make New Year's resolutions about fitness, but 73% of those people gave up before their goal; and nearly 50% of them quit on their decision in 6 weeks or less. Three main reasons contribute to this result - 42% of people think it is too difficult to follow a diet or workout regimen; 38% of them consider it too hard to get back on track once they fall off, and 36% people complain about the lack of time.

 

"How can we help?"

 

That's the time when we came up with Coolfit.​

Overview

Coolfit is a social fitness app which helps people who can't stick to a regular exercise or develop good exercise habits. By adding functions such as social, competition, and rewards, Coolfit aims to turn every user into an active fitness talent.

Possible Solution

- Provide specific guidance for users to do fitness, such as using tutorials via gifs, images, and videos;

 

- Show wide-ranging service to help users, such as by registering an account, a user can generate his/her own fitness goal based on their physical data and goal setting;

- Coolfit generates a specific to-do list for the user, the interface we imagine should be a progress bar and specific to-do items underneath;

- Social function is a unique function we add to Coolfit. It can connect you to nearby users, form a live fitness competition to encourage both you and your partners, match you to users who share the same goal, and let you find the experienced trainer at the virtual community.

- Reward function is another mechanism to drive users' enthusiasm for fitness;

- Coolfit should be able to work with other wearable devices and health apps, such as sports wrist band or Apple health. 

Competitive Analysis

CompetitiveAnalysis-01.png
CompetitiveAnalysis-03.png
CompetitiveAnalysis-04.png
CompetitiveAnalysis-02.png
CompetitiveAnalysis-05.png

Part of the Wireframe

Design System

During this project, I spent most of my time building the design system. As the single source of truth which groups all the elements that allow the teams to design, realize and develop a product, a well-equipped design system enables the whole team to work more seamlessly (even within a group of six people). Here is the design system I made for the CoolFit app. It contains the basic tools for designers and developers, such as patterns, components, and guidelines.

Artboard – 5.jpg
Artboard – 3.jpg
Artboard – 4.jpg
Artboard – 6.jpg