Andrew Huang

Projects

About

Resume

Andrew Huang

Focusight

A caffeine management app that enables users to maximize their daily intake to focus and maintain a healthy lifestyle.

Problem

People around the world consume caffeine to help themselves focus at work, but most struggle to utilize their caffeine potential.

Project Vision

Focusight is made to help caffeine consumers focus better and increase their productivity by maximizing the usage of caffeine without distressing their daily healthy limits.

Focusight

A caffeine management app that enables users to maximize their daily intake to focus and maintain a healthy lifestyle.

Problem

People around the world consume caffeine to help themselves focus at work, but most struggle to utilize their caffeine potential.

Project Vision

Focusight is made to help caffeine consumers focus better and increase their productivity by maximizing the usage of caffeine without distressing their daily healthy limits.

FEATURE 01

Personalize Caffeine Preferences

Caffeine consumers first start an onboarding process that helps personalize their caffeine consumption to track accurate caffeine level, heart rate, and caffeine tolerance.

Caffeine Consumers go through a starting process that personalizes their caffeine consumption to track an accurate caffeine level, heart rate, and tolerance.

FEATURE 02

Track Caffeine Consumption

Caffeine consumers are able to track their current caffeine level by simply tapping the add button and selecting their caffeine intake which is then added into the caffeine system.

Caffeine consumers are able to track their current caffeine level by tapping the add button and selecting their caffeine intake which is then added into the caffeine system.

Secure a Healthy Caffeine Future

FEATURE 04

Users are able to view past exceeding caffeine intakes to prevent any future exceeding intakes by managing their caffeine health.

FEATURE 03

Schedule for Future Intake

Scheduling future intake helps users keep track of their upcoming caffeine levels to guide a healthy limit and meet their sleep goal.

View your Recent Intake
Schedule your Future Intake
FEATURE 04

Secure a Healthy Caffeine Future

Users are able to view past exceeding caffeine intakes to prevent any future exceeding intakes by managing their caffeine health.

“

Most Americans underestimate the safe amount of caffeine to consume for a healthy adult on a daily basis.”

Most Americans underestimate the safe amount of caffeine to consume as a healthy adult on a daily basis.”

- Food Insight Article

Design Journey
key Research learnings

15 Minutes After Consumption

The effects of caffeine can be felt.

1 Hour After Consumption

The level of caffeine in your blood peaks and stays at this level for several hours.

6 Hours After Consumption

Half of the caffeine you have consumed is still in your body.

15 Minutes After Consumption

The effects of caffeine can be felt.

1 Hour After Consumption

The level of caffeine in your blood peaks and stays at this level for several hours.

6 Hours After Consumption

Half of the caffeine you have consumed is still in your body.

Caffeine Affects Everyone Differently

I learned that caffeine affects everyone differently, so personalizing each individual's caffeine intake through heart tracking is crucial.

Learning the Daily Healthy Limit

It is generally agreed that healthy adults can consume 300mg – 400mg of caffeine daily.¹

Focusight

Product

Research/Design

Outcome

Interview Insights

“

“

“

It is difficult for me to know how much caffeine I need in order to focus better.”

It is difficult for me to know how much caffeine I need in order to focus better.”

Breanna, College Student

“

“

“

I am cautious about how caffeine can impact my sleep and overall health.”

I am cautious about how caffeine can impact my sleep and overall health.”

Dr. Mark, Nuerologist

Information Architecture
Challenges

Features Were Overwhelming and Confusing

Overwhelming and Confusing Features

After user testing, users felt overwhelmed by various features and were struggling to keep track of their caffeine system.

New Approach

Clear and Simple Task for User's Goals

The new visual language improves clarity of caffeine levels with clear hierarchy, guiding a simple interaction for caffeine consumers to add their caffeine into the system.

The new visual language improves clarity with a clear hierarchy that helps caffeine consumers reach their goal to adding caffeine into the system.

Visual Language WIREframes

Graph Charts Were Overwhelming to Track Caffeine

My first iterations of the charts were found to be difficult for users to track their caffeine. Users mainly struggled to find their current level and average consumption, so I continued to explore more visual languages for users to track their caffeine.

5am

6am

7am

8am

9am

10am

11am

12pm

1pm

0

50

100

150

200

250

5hrs ago

Now

In 1 hour

In 2 hours

100

150

200

250

mg

5hrs ago

Now

In 1 hour

In 2 hours

100

150

200

250

mg

Data Visualization Ideation

Current Caffeine Level

182mg

􀋲

Best to Limit Caffeine

9:41

Final Visual Language

Finalizing a Simple Task For Users

Final decisions led to the packed circle chart, providing visual clarity for caffeine consumers to keep track of their intake without feeling overwhelmed. This helps users easily visualize the amount of caffeine intake being consumed.

Color system

Energizing the Environment

Orange is used as a primary color to set a positive energy for users when they need to focus. Blue is used as a secondary color to compliment with the primary color and as a selection state for personalized intakes.

Primary Orange

AA+ 4.10

Used for Primary Actions such as adding caffeine in landing screen.


#E06926

Light Orange

AAA 9.02

Background color for each screen in our application.

#F5EDE9

Secondary Blue

AA+ 3.27

Used for selected states in the onboarding screens as well as in the caffeine health screen.

#11A9DB

Tertiary Light Blue

AAA 9.10

Used for actionable items such as intake cards and certain input fields.

#D0F4FF

Dark Gray

AAA 17.47

Used to show key information for users to quickly understand such as icons, titles, and captions.

#4E4E4E

Medium Gray

AA+ 4.09

Used for less prominent information such as sub captions, search icons and borders.

#909090

Regular Gray

Used for boarders and small details and not for text.

#B8B8B8

Light Gray

AAA 8.22

Used for slight change in background to distinguish modules and screens.

#E6E6E6

Component System

Prioritizing Consistency and Hierarchy

The use of rounded corners and bold text represents energetic and focused appeal. Circles are the primary style to communicate the brand's playfulness, conveying how caffeine is working with the user and not against them.

Conclusion

What I’ve Learned

Conducting user interviews helped me identify the key problem for caffeine tracking.

Conducting user interviews identified key problems for caffeine tracking.

Usability tests helped me refine my design iterations, resulting a clear task to track caffeine.

Usability tests helped me refine design iterations, resulting a clear and simple task.

Usability tests helped me refine my iterations, resulting a clear task to track caffeine.

Component library streamlined consistency from early design process to finish.

Component library streamlined consistency from early design process to finish.

Component library streamlined consistency from early design process to high fidelity prototypes.

Next Steps

Personalize Caffeine Goals

Allowing users to set personalized goals and limits for their consumption based on their preferences and health.

Community Sharing Tips

Building a community to share tips, experiences, health insights, and strategies to enhance focus.

Integrating Sleep to Focus

Integrate tracking for activities and sleep patterns to provide users insights to optimize energy and focus.

Personalize Caffeine Goals

Allowing users to set personalized goals and limits for their consumption based on their preferences and health.

Allow users to set personalized goals and limits for their consumption based on their preferences and health.

Community Sharing Tips

Building a community to share tips, experiences, health insights, and strategies to enhance focus.

Integrating Sleep to Focus

Integrating a tracking system for activities and sleep patterns for users to optimize energy and focus control.

View More Projects

@ Andrew Huang 2023