Cupboard
As an exploration into the realm of Interaction Design, I created Cupboard, a rebrand of the tea tracking app MyTeaPal. I targeted my redesign on the user flow of creating a daily tea log, bringing in a cohesive sense of branding, delightful microinteractions, and an overall sense of playfulness.
role
UX/UI Designer
duration
April 2025 - June 2025
tags
figma
interaction design
jitter
user flows
Cupboard
Cupboard
Cupboard
As an exploration into the realm of Interaction Design, I created Cupboard, a rebrand of the tea tracking app MyTeaPal. I targeted my redesign on the user flow of creating a daily tea log, bringing in a cohesive sense of branding, delightful microinteractions, and an overall sense of playfulness.
As an exploration into the realm of Interaction Design, I created Cupboard, a rebrand of the tea tracking app MyTeaPal. I targeted my redesign on the user flow of creating a daily tea log, bringing in a cohesive sense of branding, delightful microinteractions, and an overall sense of playfulness.
role
UX/UI Designer
duration
April 2025 - June 2025
tags
figma
interaction design
jitter
user flows
role
UX/UI Designer
duration
April 2025 - June 2025
tags
figma
interaction design
jitter
user flows
I love hoarding tea.
I love hoarding tea.
I know as well as any tea lover that once you start stockpiling a collection of teabags and loose tea tins, it becomes tough to keep track of what you do and don’t have. This is where MyTeaPal comes in.
I know as well as any tea lover that once you start stockpiling a collection of teabags and loose tea tins, it becomes tough to keep track of what you do and don’t have. This is where MyTeaPal comes in.
MyTeaPal is a well-loved, yet niche daily tea logging app catered towards tea lovers. Designed for both tea hobbyists and casual drinkers, the app provides users a one-stop shop for tracking their teas and teaware, as well as create logs about their daily brew. It also contains additional sections for internal community posts, articles written by users about their personal tea journeys, and the dedicated MyTeaPal Club membership.
MyTeaPal is a well-loved, yet niche daily tea logging app catered towards tea lovers. Designed for both tea hobbyists and casual drinkers, the app provides users a one-stop shop for tracking their teas and teaware, as well as create logs about their daily brew. It also contains additional sections for internal community posts, articles written by users about their personal tea journeys, and the dedicated MyTeaPal Club membership.
The Problem
The Problem
While the original app’s strengths lied in it’s comprehensive and community-centered features, it lacked user engagement and a strong sense of branding.
While the original app’s strengths lied in it’s comprehensive and community-centered features, it lacked user engagement and a strong sense of branding.
User Persona
User Persona
Olive, shown below, represented my target audience of routine-oriented young working adults with a strong interest in brewing tea.
Olive, shown below, represented my target audience of routine-oriented young working adults with a strong interest in brewing tea.
Goals
Goals
To ensure that I had specific end goals in mind for my redesign, I established two areas of focus prior to starting the design process:
To ensure that I had a target in mind for my redesign, I established two areas of focus before I started the design process:
To ensure that I had specific end goals in mind for my redesign, I established two areas of focus prior to starting the design process:
1.
Brand Identity
Brand Identity
Create a cohesive brand identity that connects with the user
2.
Interaction Design
Add playful, on-brand microinteractions that create meaning to the logging process
2.
Interaction Design
Add playful, on-brand microinteractions that create meaning to the logging process
3.
Connection With Users
Identify opportunities to enhance user engagement within the existing user flow
3.
Connection With Users
Identify opportunities to enhance user engagement within the existing user flow
Design Process
Design Process
Task Flow
Task Flow
To improve my understanding of how users typically create their daily logs in the original app, I focused my task flow around the process of creating a new log, adding a new tea and teaware in the midst of this process to cover all ground.
To improve my understanding of how users typically create their daily logs in the original app, I focused my task flow around the process of creating a new log, adding a new tea and teaware in the midst of this process to cover all ground.
App Flow
App Flow
This app flow dives deeper into the business logic of the task flow, utilizing the four key components of interaction design: triggers, rules, feedback, and loops/modes.
This app flow dives deeper into the business logic of the task flow, utilizing the four key components of interaction design: triggers, rules, feedback, and loops/modes.
Rebrand
Rebrand
My initial designs and naming conventions centered around tea-related terms. One word names appealed to me at the time, yet none of them really stuck when it came to expanding the branding of the original.
My initial designs and naming conventions centered around tea-related terms. One word names appealed to me at the time, yet none of them really stuck when it came to expanding the branding of the original.
initial redesign brainstorming
initial redesign brainstorming
A fitting name came to me eventually, however, centering the concept and branding of my app around the tea lover’s central hub: the kitchen cupboard.
My final font and color choices reflect the soft, earthy variety of natural tones that come about from brewing tea. Round, friendly typefaces were chosen to evoke a calming, inviting tone.
A fitting name came to me eventually, however, centering the concept and branding of my app around the tea lover’s central hub: the kitchen cupboard.
My final font and color choices reflect the soft, earthy variety of natural tones that come about from brewing tea. Round, friendly typefaces were chosen to evoke a calming, inviting tone.
final redesign sheet with color palette, typography, and icons
final redesign sheet with color palette, typography, and icons
Wire Flow & IX Flow
Wire Flow & IX Flow
With a brand concept in mind, new low-fidelity wireframes were created for each existing screen in the following Wire Flow to plan layouts and identify opportunities to implement microinteractions.
With a brand concept in mind, new low-fidelity wireframes were created for each existing screen in the following Wire Flow to plan layouts and identify opportunities to implement microinteractions.
The IX Flow adds my choices in color, icons, and content to create high-fidelity screens. I found the most exciting design inspiration from characteristics I had often overlooked, such as the placement of items on a shelf or the small tags attached to teabags.
Like my App Flow of the original MyTeaPal app, the IX Flow also details the specifics of each step via the four components of interaction design.
The IX Flow adds my choices in color, icons, and content to create high-fidelity screens. I found the most exciting design inspiration from characteristics I had often overlooked, such as the placement of items on a shelf or the small tags attached to teabags.
Like my App Flow of the original MyTeaPal app, the IX Flow also details the specifics of each step via the four components of interaction design.
Microinteractions, Jitter, and Finishing Touches
Microinteractions, Jitter, and Finishing Touches
Although the IX Flow details the main screens, additional screens were added later on to incorporate transitions in between. Simpler animations, such as the pop-up navigation and typing animations were made in Figma. More complex transition animations between screens were made using the Figma animation plugin Jitter. Microinteractions were simple, yet reflect the friendly and playful feeling I sought to bring across.
Although the IX Flow details the main screens, additional screens were added later on to incorporate transitions in between. Simpler animations, such as the pop-up navigation and typing animations were made in Figma. More complex transition animations between screens were made using the Figma animation plugin Jitter. Microinteractions were simple, yet reflect the friendly and playful feeling I sought to bring across.
figma wireframes and transitional animations
figma wireframes and transitional animations
figma components
figma components
Final Prototype
Final Prototype
Reflection
Reflection
Throughout this process, I ended up gaining a lot of knowledge on implementing effective microinteractions and prototyping in Figma as a whole!
Throughout this process, I ended up gaining a lot of knowledge on implementing effective microinteractions and prototyping in Figma as a whole!
If I could change one thing, I would have liked to conduct user research and testing before and during the creation process to gauge the effectiveness of my branding and interaction design decisions. I would have also liked to tackle some of MyTeaApp’s other features, such as user written articles and community posts, and explore creative solutions to incorporating the rebrand and microinteractions within these areas.
If I could change one thing, I would have liked to conduct user research and testing before and during the creation process to gauge the effectiveness of my branding and interaction design decisions. I would have also liked to tackle some of MyTeaApp’s other features, such as user written articles and community posts, and explore creative solutions to incorporating the rebrand and microinteractions within these areas.