Building Your Matcha Experience 🍵

As a designer, I thrive on projects that allow me to infuse creativity and problem-solving into interactive experiences. My latest project, Build Your Matcha Experience 💚, is a delightful, customizable matcha latte creation tool that lets users play with various customizations to craft their perfect drink. Here’s a behind-the-scenes look at my thought process and design journey.

My Design Thought Process

The inspiration for this project was simple—matcha is one of my recent obsessions, and I wanted to create an experience that mirrored the joy of customizing a beverage in real life. My goal was to make this process not only interactive but also visually appealing, with every element thoughtfully designed to bring out the essence of matcha.

I asked myself —

How can I design something fun, yet easy for users to interact with? How can the visuals communicate a sense of playfulness and personalization? 💚

Getting Creative with AI: My Brainstorming Buddy 🤖💡

Since I aimed to complete this project in just 3 days, I knew I needed to streamline my tasks and maximize both my brainstorming and efficiency. At the initial stage, I turned to ChatGPT as a brainstorming partner. I prompted it with questions to help me refine the direction of the experience—whether it was thinking about different ways users could interact with the interface or the type of customizable elements I should include. 

Initial brainstorming on FreeForm

Once I had a clear concept, I started sketching on my iPad. This phase allowed me to quickly jot down user flows, initial UI ideas, and interactive components. I also worked through the aesthetic details—what colors would make the interface feel calming and fresh, how user interactions should feel seamless, and the type of visual hierarchy that would make each step of customization intuitive.

Let’s Dive into Design: My Happy Place! 💚

Now, let’s dive into the design phase, where I brought those early ideas to life in Figma.

Introducing Miu, an adorable matcha blob!

One of the most fun additions to the project was Miu, a cute matcha blob character who interacts with users, giving quirky messages as they customize their latte. I wanted Miu to embody the playfulness of the project while also acting as a friendly guide throughout the experience. Miu reacts to user choices, adding an extra layer of engagement.

Color Palette

The color palette was crucial to setting the tone for the entire experience. I chose shades of green for matcha, paired with soft neutrals and pastels for the background, creating a peaceful, inviting atmosphere. These colors also allowed the interactive elements to stand out, making the interface easy to navigate.

Designing UI Components 

With the basics in place, I moved on to designing the components, all on Figma:

•  I designed both a traditional matcha mug and an iced glass option for users to choose from.
• Next, I designed the interactive buttons, sliders, and icons. The interaction points—like selecting the milk base or adjusting the sweetness—had to be both functional and visually appealing.

Prototyping

Figma was my go-to tool for developing the entire project. I began by creating detailed wireframes, which then evolved into high-fidelity designs. Finally, I built interactive prototypes to bring the project to life, allowing users to slide, select, and customize their drinks in an engaging experience. These prototypes were essential for testing and iterating the design, ensuring the final product was intuitive and delightful. I dedicated significant time to refining the user flows to make the experience as smooth as possible, mapping out each step to ensure it was logical and easy for users to navigate.

Now, watch the prototypes 💚

Onboarding users never felt this cute! Miu keeps you company as you explore the experience, guiding you through each customization step with fun and quirky comments.

Making a hot matcha latte on a chilly fall day sounds so soothing, right? Well, now you can see how it works with just a few clicks.

Or, if you’re somewhere hot, build yourself an iced matcha latte with Miu’s help—she’ll guide you through every step!

This project was a great reminder of why I love UI/UX design—balancing aesthetics with functionality, while also injecting a bit of fun. Through creative thinking, user empathy, and the use of powerful design tools, Build Your Matcha Experience has shaped into a joyful, interactive experience that brings the art of matcha customization to life.

Now, go treat yourself to a delicious matcha—whether hot or cold! 💚