Ccalories: a mobile app for tracking calories

light-mockup.png
 

2017 Feb | 6 Weeks Personal Project

 
 

Intro

 

CCalories is a mobile application for audiences to track their intake of calories, in order to assist them to achieve their diet goal, in the context of daily life.  

 
 

Problem

 

1.  Online diet plan is hard to fit with different person's physique, diet goal, and life routine. 
2. Following a diet plan requires lots of dedication to keep notes on daily eating, drinking, and activities.
3. It's hard to track the progress of calories intake due to the lack of nutrition knowledge.
4. Most of current mobile solutions don't provide specific nutrition information & organized visual feedback of users' daily intake. 
5. Current solutions have poor logging experience, which create barriers for user to input their diet and activities.
6. Unaesthetic user interface leads to lack motivation of logging information consistently.

 
 

Solution

 

A lifestyle application that promotes and maintains tracking engagement through an entertaining, interactive, and efficient user interface, leveraging the dieting experience.

 
 

Goal

 

1.  Easily logging activity
2. Customized diet plan
3. Organized Intake visualization feedback
4. Clear diet & weight progress
5. Stylish user interface

 
 

Phase

 

1.  Competitive Analysis
2. User Interview & Creating Persona
3. Creating Information Architectural
4. Designing User Flow & Wireframe & User Testing & Refining On the Wireframes
5. Visual Reference Research
6. Starting Off Visual Atoms & Developing the Style Guide
7. Designing User Interface
8. Creating Motion Graphic
 

 
 

competitive
analysis

Artboard 4 Copy 2.png

UI Patterns

Artboard 4 Copy.png

Persona

 
Apple TV Copy.png
 
 

Information
architectural

 
 
 

Wireframe

 
 
Artboard 2.png
 

UI Inspiration

ui_inspiration.png
 

style guide

ui_styleGuide.png
 

User
Interface

 
Scene_2.png
 

features

 

onboarding

 

quick adding

 

logging weight & view weight history

viewing intake history

 
 

interactive prototype