STEEP

BRIEF

Steep is a tea timer that ensures a perfect brew every time. Simply input tea type, quantity, and flavor preferences, Steep will calculate an ideal timer tailored towards each unique taste.

DETAIL

UI/UX
Motion Design
Visual Design

TIMELINE

4 weeks

TEAM

Individual

PROBLEM

So many variables.

For beginners, tea steeping can be challenging due to various uncertain factors: steeping times, water temperatures, types of tea, flavor preferences, etc. These uncertainties complicate the process and may discourage newcomers from fully exploring the art of brewing tea.

RESEARCH

Pain points!

The fundamentals of tea steeping include steeping times, tea quantity, and knowledge about the type of tea being brewed. However, these are often where beginners make the most common mistakes when starting out.

IDEATION

What does a timer need, and how is this one different?

First, I took some time to look at existing timer apps to familiarize myself with key functions and task flows. I chose the classic iOS timer, the visually pleasing Time Timer, and a physical analog timer, Minitimer.

All three timers follow three simple task flows:

Add a timer
Start a timer
Revise a timer

I sketched out the views, states and components for each app, and organized them into a quadrant analysis.

From the chart, I found that most timers strike a good balance between simple and complex, but tend to lean towards practicality rather than engagement. In my case for a beginner-friendly timer with an educational purpose, I want it to be engaging to use, simple to navigate.
‍
With that, I created the initial wireframes for each task flow, marking the start of the Steep journey.

ITERATION

An engaging, storytelling experience.

To craft a beginner-friendly educational experience, I envisioned the visuals to be playful, illustrative, and clean.

After adding the visual elements, I re-examined my task flows and made three major design decisions:

Start timer immediately

In the initial version, users had to return to the timers page after setting up the timer, resulting in a less streamlined experience. To simplify the user flow and reduce interactions, I implemented a "start timer" option directly after the setup process, allowing users to begin steeping immediately.

Progress bar visualization

Initially, I planned to use a tea cup filling up as a progress bar for the timer, but later I realized that the changing color of the tea better reflects the brewing process. Thus, I used a changing background color to represent the tea’s progression.

Compact timers list

I moved the "add timer" icon from the top right corner to integrate it into the list of timers, aiming for a smoother interaction. Experimenting with various layouts, I opted for a two-column list instead of full-width for better organization and readability.

FINAL DESIGN

Introducing, Steep.

Steep is a timer designed to simplify the tea brewing process. Through easy inputs for tea type, quantity, and flavor preferences, it calculates the ideal timer for each user. With playful and illustrative visuals, Steep guides users through the brewing journey, ensuring a delightful and personalized tea experience.

Give it a try!

Task flow 1: Add a timer

Home page with list of timers. Tap add.

Starting screen.

Choose tea type. User chooses green tea.

Step 1 complete.

Select basis for measurements. User chooses loose leaves.

Step 2 complete.

Input measurements and flavor preferences.

Steep calculates the water amount and steep time.

Calculation results. User clicks “add timer.”

Timer is added to the home page.

Task flow 2: Start a timer

Timer starts. Steep shows brewing progress.

1st minute, extracting flavors. Background color becomes darker.

2nd minute, intensifying flavors.

3rd minute, for the stronger flavor the user requested.

Timer complete. User can choose to restart or add time.

Task flow 3: Revise a timer

Lock screen. Timer goes off.

User taps on “add 30 seconds.”

30 seconds starts, added in addition to the timer.

NEXT STEPS

A more seamless experience.

The next phase of this journey involves conducting usability testing, and integrating a backend system that operates when the timer is still active.

REFLECTION

Let it steep!

First time doing illustrations!

I was super nervous when I put together my moodboard, unsure if my illustrations would make or break the project. I drew at least 100+ different teas on my iPad, asked my friends Cindy and Lea for pen recommendations and Procreate settings, iterated through countless exports until getting the results I was happy with. I learned that design is always going out of your comfort zone, learning new things, and achieving milestones that are totally unexpected.

Prioritize simplifying, not organizing.

Throughout the design process, one question that I got the most during critique was how to make the interactions as simple as possible. I thought about this question a lot. After each iteration, I would give it some time to let it marinate, and come back to it with a fresh eye. This approach allowed me to really empathize with the user’s experience and see the design from a different perspective. It became very obvious when certain screens had excessive layers for a simple task flow. I realized design is not about organizing information, but rather about simplifying it effectively.