Focusight is a caffeine management app that helps users regulate caffeine intake to maximize focus and maintain a healthy lifestyle.

BeeThere is a drone delivery app concept that provides unwavering support to individuals in need, wherever and whenever they may be.

Interaction Design

Duration

14 weeks, Jan - Apr 2023

Team

Claire Li, Andrew Huang

My Role

User Research, Design System, Desktop Application User Interface, Prototype

Overview

In the context of one core course at ArtCenter, Interaction Design 2, we were challenged to invent a personalized productivity solution for daily routines. My partner, Andrew, and I decided to explore the relationship between caffeine consumption, human circadian rhythms, and its impact on productivity.

" How might we help habitual coffee drinkers
feel confident to keep track of productivity and
health after consuming caffeine beverages? "

Problem

Research by Lincoln Park Strategies show that 93% of Americans consume caffeine daily to boost their energy and concentration. However, many struggle to optimize their focus due to underestimate or lack awareness of FDA’s safe caffeine limit and individual caffeine tolerance.

Goal

The goal was to design an ideal concept that provides a personalized productivity experience and brings value by enhancing users' focus and productivity.

Design process

Research

Understand

Analyze

Design

User Test

Presentation

Outcome

Researched and designed solution with a supporting design system that supports mobile and desktop platforms. I worked specifically on the experience for the desktop platform.

Qualitative Research

Can you measure time focus through caffeine consumption?

To answer this question, I conducted 10 qualitative interviews to discover a diversity of unique or very personalized ways that interviewees consume caffeine and track focus.

"

“When it’s getting too late or too far from urban areas, it can be actually hard for people to reach

“When it’s getting too late or too far from urban areas, it can be actually

Caffeine triggers heart palpitations
causing discomfort and hindering my
ability to concentrate throughout the day”

“When it’s getting too late or too far from urban areas, it can be actually hard for people to reach

“When it’s getting too late or too far from urban areas, it can be actually

- Sandy L, Age 40, Nurse

“

“The outstanding feature of DoorDash was its

I spend time calculating the best time to
intake caffeine to keep focus during work.”

“The outstanding feature of DoorDash was its

- Tommy K, Age 23, Medical Student

“

“The outstanding feature of DoorDash was its

I drink 5 shots of espresso per day and still struggle to manage time and maintain focus.”

“The outstanding feature of DoorDash was its

- Atoosa B, Age 20, Mechanical Engineer

Research Insight

“While individuals start their day with caffeine consumption, many of them struggle with time management during their work hours.”

Secondary Research

Understanding habitual coffee drinkers time struggles

To understand why individuals struggle to focus at work despite consuming caffeinated beverages, we conducted secondary research and identified the three most common concerns among habitual coffee drinkers to guide our project.

Increased

Heart Rate

Increased

Heart Rate

Increased

Heart Rate

Caffeine can elevate heart rate and blood pressure leading to feelings of anxiety, stress, making it challenging to focus and concentrate.

Lack Awareness

of Caffeine Impact

Lack Awareness

of Caffeine Impact

Lack Awareness

of Caffeine Impact

Consume a large amount of caffeine without considering the consequences of individual caffeine stimulant effects, tolerance, sensitivity.

Disrupted

Sleep Patterns

Disrupted

Sleep Patterns

Disrupted

Sleep Patterns

Caffeine consumption late in the day can disrupt sleep quality and cognitive performance the next day due to caffeine’s prolonged presence in the body.

Persona

Ruben, Age 38, Mechanical Engineer

Oregon, CA

Goal

I want to focus at the right time. I hope to discover the ideal level of caffeine for myself after each intake and optimize productivity during work.

Frustration

When caffeine fails to enhance focus at the right time
When lack awareness of caffeine level during work hours
When caffeine disrupts sleep patterns

Ideation

Getting to the desktop

With design challenges and key research insights in mind, I prioritized features and developed top task flows that I want our target audience to achieve using our application, including the experience of evaluating individual caffeine sensitivity, discovering caffeine impact, and effectively scheduling caffeine intakes.

One-time task

Evaluate individual caffeine sensitivity

Primary task

Schedule ideal time for caffeine intake

Secondary & Tertiary task

Personalize caffeine beverages, Review scheduled intake time

User Test

User testing, findings, & iterations

To get early feedback about navigation and top user flows, I created prototype with Figma and conducted user testing with 8 users. Below are the key changes I made based on observations and feedback received.

01 The layout of the landing page was so busy, that users didn’t know where to focus their attention.

Solution: Establish a clear visual hierarchy with scale & grouping. Explore charts and visual language to communicate through form.

01 The layout of the landing page was so busy, that users didn’t know where to focus their attention.

Solution: Establish a clear visual hierarchy with scale & grouping. Explore charts and visual language to communicate through form.

Home Page / Before

After v1.

After v2.

02 Users were frustrated with putting extra mental effort into completing the task of adding personal drinks.

Solution: Explore a new visual language to simplify the task flow. Create an intuitive and effective experience by providing visual breathing room, visual cues, and feedback to guide users.

02 Users were frustrated with putting extra mental effort into completing the task of adding personal drinks.

Solution: Explore a new visual language to simplify the task flow. Create an intuitive and effective experience by providing visual breathing room, visual cues, and feedback to guide users.

Schedule Caffeine Intake / Before

Schedule Caffeine / Before

Schedule for later / After v1.

Drink Now / After v2.

03 Users expected to see their 'past intake' on the list.

Solution: Added a 'Recent Intake' section alongside the existing 'New Intake' section, allowing users to schedule based on their recent intake and make edits to their scheduled future intake based on caffeine health recommendations.

03 Users expected to see their 'past intake' on the list.

Solution: Added a 'Recent Intake' section alongside the existing 'New Intake' section, allowing users to schedule based on their recent intake and make edits to their scheduled future intake based on caffeine health recommendations.

View Caffeine Schedule / Before

Caffeine Schedule / Before

After v1.

After v2.

Information Architecture

Final Design

01

Personalize caffeine preferences

The onboarding flow informs how the app optimizes caffeine intake by customizing users' preferences, tolerance, and sleep schedules.

02

Track caffeine consumption with ease

Caffeine consumers are able to track their current caffeine level by effortlessly dragging and dropping the selected caffeine intake.

03

Schedule intake for optimal productivity

Planning allows users to align their caffeine intake with their individual tolerance levels and preferred sleep patterns.

04

Ensure caffeine health & safety

Users can manage and prevent from exceeding safe caffeine limits through alert notifications.

Brand visual identity

To ensure effective user communication and maintain a consistent system design across screens, we integrated a collection of accessible visual components that represent the core of our project.

Focus and
energetic

Minimalism
and rhythm

AA+ Primary Orange

#E06926

primary action button

AAA Primary White

#F5EDE9

background color

AA+ Secondary Blue

#11A9DB

interactive controls

AAA Tertiary Light Blue

Tertiary Blue

#DOF4FF

cards, input fields

Primary Gray

#4E4E4E

Secondary Gray

#909090

Tertiary Gray

#B8B8B8

Quaternary Gray

#E6E6E6

Reflection

Takeaways

01 Importance of a design system

I’ve learned how to consider all the use cases and states in a component library and color system to ensure accessibility, consistency, and brand enhancement across various platforms and devices.

02 Less is more

I've learned how to apply the 'less is more' principle and how designs can be effective with simple and subtle micro-interactions that provide clarity.

03 Giving and receiving good feedback

Design systems continually grow and evolve through observation, usage, and thoughtful feedback, ultimately serving as the driving force behind constant improvements.

Interaction Design

Duration

14 weeks, Jan - Apr 2023

Team

Claire Li, Andrew Huang

My Role

User Research, Design System, Desktop Application User Interface, Prototype

Overview

" How might we help habitual coffee drinkers feel confident to keep track of productivity and health after consuming caffeine beverages? "

Problem

Research by Lincoln Park Strategies show that 93% of Americans consume caffeine daily to boost their energy and concentration. However, many struggle to optimize their focus due to underestimate or lack awareness of FDA’s safe caffeine limit and individual caffeine tolerance.

Goal

The goal was to design an ideal concept that provides a personalized productivity experience and brings value by enhancing users' focus and productivity.

Design process

Outcome

Researched and designed solution with a supporting design system that supports mobile and desktop platforms. I worked specifically on the experience for the desktop platform.

Qualitative Research

Can you measure time focus through caffeine consumption?

To answer this question, I conducted 10 qualitative interviews to discover a diversity of unique or very personalized ways that interviewees consume caffeine and track focus.

"

Caffeine triggers heart palpitations causing discomfort and hindering my ability to concentrate throughout the day”

- Sandy L, Age 40, Nurse

“

I spend time calculating the best time to intake caffeine to keep focus during work.”

- Tommy K, Age 23, Medical Student

“

I drink 5 shots of espresso per day and still struggle to manage time and maintain focus.”

- Atoosa B, Age 20, Mechanical Engineer

Research Insight

“While individuals start their day with caffeine consumption, many of them struggle with time management during their work hours.”

Secondary Research

Understanding habitual coffee drinkers time struggles

To understand why individuals struggle to focus at work despite consuming caffeinated beverages, we conducted secondary research and identified the three most common concerns among habitual coffee drinkers to guide our project.

Caffeine can elevate heart rate and blood pressure leading to feelings of anxiety, stress, making it challenging to focus and concentrate.

Caffeine can elevate heart rate and blood pressure leading to feelings of anxiety, stress, making it challenging to focus and concentrate.

Caffeine can elevate heart rate and blood pressure leading to feelings of anxiety, stress, making it challenging to focus and concentrate.

Consume a large amount of caffeine without considering the consequences of individual caffeine stimulant effects, tolerance, sensitivity.

Caffeine consumption late in the day can disrupt sleep quality and cognitive performance the next day due to caffeine’s prolonged presence in the body.

Persona

Persona

Ruben, Age 38, Mechanical Engineer

Oregon, CA

Goal

I want to focus at the right time. I hope to discover the ideal level of caffeine for myself after each intake and optimize productivity during work.

Frustration

When caffeine fails to enhance focus at the right timeWhen lack awareness of caffeine level during work hoursWhen caffeine disrupts sleep patterns

Ideation

Getting to the desktop

One-time task

Evaluate individual caffeine sensitivity

Primary task

Schedule ideal time for caffeine intake

Secondary & Tertiary task

Personalize caffeine beverages, Review scheduled intake time

User Test

User testing, findings, & iterations

To get early feedback about navigation and top user flows, I created prototype with Figma and conducted user testing with 8 users. Below are the key changes I made based on observations and feedback received.

01 The layout of the landing page was so busy, that users didn’t know where to focus their attention.

Solution: Establish a clear visual hierarchy with scale & grouping. Explore charts and visual language to communicate through form.

Home Page / Before

After v1.

After v2.

02 Users were frustrated with putting extra mental effort into completing the task of adding personal drinks.

Solution: Explore a new visual language to simplify the task flow. Create an intuitive and effective experience by providing visual breathing room, visual cues, and feedback to guide users.

Schedule Caffeine Intake / Before

Schedule for later / After v1.

Drink Now / After v2.

03 Users expected to see their 'past intake' on the list.

Solution: Added a 'Recent Intake' section alongside the existing 'New Intake' section, allowing users to schedule based on their recent intake and make edits to their scheduled future intake based on caffeine health recommendations.

View Caffeine Schedule / Before

After v1.

After v2.

Information Architecture

Final Design

01

Personalize caffeine preferences

The onboarding flow informs how the app optimizes caffeine intake by customizing users' preferences, tolerance, and sleep schedules.

02

Track caffeine consumption with ease

Caffeine consumers are able to track their current caffeine level by effortlessly dragging and dropping the selected caffeine intake.

" How might we help habitual coffee drinkers
feel confident to keep track of productivity and
health after consuming caffeine beverages? "

Caffeine triggers heart palpitations
causing discomfort and hindering my
ability to concentrate throughout the day”

I spend time calculating the best time to
intake caffeine to keep focus during work.”

When caffeine fails to enhance focus at the right time
When lack awareness of caffeine level during work hours
When caffeine disrupts sleep patterns

Focus and
energetic

Minimalism
and rhythm