My Role: UX Designer

Timeline: October 2023 - Present

Team Members: Samson Hong (UX Lead), Nick Hoang (Front - End Developer), Jaylyne Nguyen (Graphic Designer)

Tools: Figma, Figjam

Located in Addison, Texas, The Cultured Cup is a longstanding local tea company that has been operating for over 30 years. They offer a wide range of tea, coffee, and sweets, and additionally conduct weekly educational workshops for customers eager to explore and understand the diverse world of tea varieties.

Disclaimer

Due to unforeseen circumstances, the client faced challenges in moving forward with the project, resulting in the inability to complete the wireframing, prototyping, and testing phases of the product. However, this case study will delve into the comprehensive research and ideation phases that were successfully carried out collaboratively.

Update: As of May 2024, we've resumed work on this project and revised its scope. Our team is now actively engaged in its redesign, and I'll provide a comprehensive update on this case study upon its completion.

The Problem

In addition to requiring a significant makeover, The Cultured Cup's website posed difficulties for its customers seeking information about tea. For novice tea enthusiasts, discovering personal preferences can be a time-consuming process, particularly for those unable to visit the store to sample various blends.

The Solution

The Personali-tea quiz was designed to aid both new and returning customers of The Cultured Cup in discovering how their taste preferences match up with the various tea or coffee blends offered by the store. The quiz aims to simplify the process of selecting the perfect beverage, ensuring a delightful experience for every sip.

Our Approach

Design Audit

User Interviews

Personas

01 Research

HMW Statement

Ideation Exercises

Tea Quiz Ideation

02 Ideate

03 Design

Wireframing

Conclusion

Research

Design Audit

Before we began our approach to the research phase of this project, we conducted a UX audit with the client to discuss potential improvements to the website.

During our first initial meeting with the client, we discussed 7 different elements or sections on the home page and how to page, explaining reasons where we can potentially see improvement.

Lack of CTA (Call To Action):

A website without a CTA is like looking at a map without a destination. The user will be confused about the purpose of the website.

1

Video can be moved to a different page:

This video highlights how to use Gaiwan Tea Set, so it can be moved inside the Gaiwan Tea Set product page or part of Tea/How to Choose guide page.

2

‘Choose Options’ is lacking options

Some items such as Rainbow Rhapsody Teabags and Earl Grey in Love Teabags lack options, so these buttons could be changed to Add To Cart.

3

White Background

The white background is interfering with the visual rhythm. Unless the font color doesn’t meet the accessibility guideline with the grey background, removing the white background would be ideal to keep consistency.

4

Increase Width

The width of this element is not consistent with the rest of the website.

5

Lengthy sentence/Lack of Visual Context

The optimal line length for reading is 50-75 characters. Therefore, text width can be reduced and supplemented with graphics for better context.

For example, there can be a graphic for Tea vs Tisane to better illustrate the difference instead of wordy explanation.

Considering the older age group of the main users, pictures and graphics will significantly help them navigate these explanations.

Source: https://baymard.com/blog/line-length-readability

6

Adding a FAQ section

Inserting a FAQ section before the Contact Us form can help the user find answers to questions they commonly have. This will reduce the burden of having to reply to questions through email/phone.

7

Conducting UX audits is crucial in this process as it allows us to pinpoint the main issues to tackle before interacting with users. It also lays down a solid groundwork for formulating the right questions to ask during research interviews.

User Interviews

The primary objective of these interviews was to gain insights into the customer's in-person shopping experience at brick-and-mortar stores. The key areas we addressed in each interview are outlined as follows:

  • Exploring Motivations for Choosing The Cultured Cup

  • Website User Experience & Pain Points

  • Exploring Customer Preferences & Values in Tea/Coffee Selection

  • Understanding the In-Store Customer Experience

  • Identifying Sources of Awareness

  • Mapping the User Journey

In total, we conducted interviews with 10 customers of The Cultured Cup on a busy Saturday afternoon over a span of 3 hours. Among these 10 individuals, 7 were returning customers, while 3 were new to the establishment. The main insights and information we acquired are as follows:

Preference Matters

Customers select tea for various reasons, considering factors such as mood, flavor, quality, benefits, and aroma to find the ideal cup of tea.

Positive In-Store Experience

Customers prefer in-store tea purchases over online due to the sense of community, exploration of new flavors, and opportunity to learn from TCC employees.

Learning Challenges

New customers often struggle with the initial learning curve of understanding and distinguishing between different tea blends.

Personas

To improve our design approach and ensure everyone on the team can empathize with our users, I synthesized the interview results to create the following personas:

So…what’s the tea?

Ideate

“How Might We?” Statement

Now that we've understood the users we're designing for, the next step is to pinpoint the specific problem we aim to solve for this audience.

The approach for the HMW statement we implemented is a 5W1H (Who, What, When, Where, Why, and How?) questioning approach and a problem-solving method that aims to views ideas from various perspectives with the goal to gain an in-depth understand of a specific situation.

As a team, we allocated 5 minutes to each section, dedicating time to categorize and formulate questions that aided us in pinpointing the problem we aimed to solve.

With the questions generated in this exercise, crafting the How Might We statement felt much more intuitive and organic.

Ideation Exercises

As a team, we engaged in several ideation activities, including an Opposite Day exercise, Crazy 8’s, and seeking inspiration from diverse websites similar to Pinterest. We brainstormed numerous ideas and then grouped them into different categories.

After categorizing the ideas, we collectively assessed which ones felt the most crucial to initiate the design process. Among these, we were particularly drawn to the concept of incorporating a quiz-like feature to assist new customers in selecting teas based on their preferences. Upon presenting this idea to the client, they enthusiastically approved of it. Consequently, we commenced discussions on all aspects of implementing such a feature, including determining the questions to ask, designing the layout of the questions and answers, exploring various "personali-teas," and outlining the presentation of results, among other considerations.

Tea Quiz Ideation

We began our ideation process with researching and learning about all the types of teas they offer. We categorized our findings into traits to factor into the development of a quiz. These traits encompassed aspects such as caffeine content, flavor profile, sweetness level, health advantages, preferred time for tea consumption, curiosity level, and additional factors.

The questions for the “personali-tea” quiz we curated are as followed:

As you can see, there are a number of things to consider when choosing the perfect cup of tea, let alone creating an entire quiz around it. That being said, we felt the most effective approach to curate results for this quiz was to determine which traits/questions were most significant for novice or expert tea drinkers.

Based off our prior research and drawing inspiration from other types of personality quizzes online, we decided that the three main traits to focus on were: caffeine content, curiosity, and knowledge level of teas, with micro traits in health benefits and flavor preferences.

By focusing on just three primary traits, the goal was to streamline the process and generate 12 distinct quiz results for users. This approach facilitated the naming of these "personali-teas." We derived our quiz results from the 12 Chinese zodiac signs to provide a relatable touch for users. Our strategy involved working backward, prioritizing the quiz results before crafting the questions. This method was chosen to simplify the process of creating questions and ensure alignment with the desired outcomes.

The personali-teas are as followed:

Enough yappin’…let’s design!

Design

Wireframing

Unfortunately, during this phase of the project, our team encountered difficulty in scheduling regular meetings due to uncertainties surrounding the project's future with the client. Nonetheless, the lead UX designer and I met up a couple times to transition the quiz results screen from low fidelity to high fidelity wireframes. Our initial focus was on creating a responsive mobile design for the screen, as we felt it was more practical to refine the layout on a smaller scale before tackling larger dimensions.

The wireframes we created are as followed:

Our intention was to enhance user engagement and interactivity, moving beyond a typical quiz format to create a more enjoyable and personality-driven experience. To achieve this, we expanded the content on the results screen to include fun traits and personality labels, along with tea recommendations displayed at the bottom. This approach aims to provide users with a more entertaining and personalized experience, transforming the quiz into a lighthearted and enjoyable activity.

Business & Marketing Impact

Although we were unable to finish creating more wireframes and screens, I still wanted to take the time to highlight the business & marketing impact of this project as if we were to continue on.

Enhanced Customer Experience

By offering a quiz to help customers discover their taste preferences, The Cultured Cup enhances the overall customer experience. It simplifies the selection process, making it easier and more enjoyable for customers to find the perfect beverage.

Targeted Marketing

With knowledge of customer preferences gathered through the quiz, The Cultured Cup can tailor its marketing efforts more effectively. It can target specific customer segments with personalized recommendations, promotions, and campaigns, increasing the likelihood of conversion.

Cross-selling & Upselling

The quiz can also serve as a platform for suggesting products or upselling higher-margin items. By understanding a customer's taste preferences, The Cultured Cup can recommend related products that the customer may be interested in trying, thereby increasing the average order value.

Brand Differentiation

Offering a personalized quiz sets The Cultured Cup apart from competitors who may not provide such a tailored experience. This can help the brand stand out in a crowded market and attract customers seeking a more personalized shopping experience.

Data Collection & Insights

Through the quiz, The Cultured Cup can collect valuable data on customer preferences. This data can be analyzed to gain insights into customer behavior, preferences, and trends, which can inform future product development, marketing strategies, and inventory management.

Word-of-Mouth Marketing

A positive experience with the Personali-tea quiz may lead customers to share their experience with friends and family, generating word-of-mouth referrals and potentially expanding The Cultured Cup's customer base.

Conclusion

To conclude this case study, I would like to mention how grateful I am to have been apart of this project and be able to work with a team of talented individuals. Although it did not end how we wanted it to, I believe this is the reality of working with clients. Embracing this reality is essential in the realm of project management, and understanding that it's okay for things to not always go according to plan is crucial for growth and resilience in the field. However, I believe this experience has been really important for my personal and professional growth as a UX designer. It has taught me insights and lessons that I will use to my benefit for future endeavors.

Previous
Previous

Project Mr. Philly