UI/UX Design

Screen Shot 2018-10-07 at 02.57.06.png


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.​


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


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 – 2.jpg
Artboard – 3.jpg
Artboard – 4.jpg
Artboard – 6.jpg