Case Study - Leaf n Cream

Leaf n Cream is a boba store located in Tustin, CA, run by Sam and Teresa. They were looking to refresh the brand of their boba shop in hopes of modernizing their brand. Our goal was to create a consistent brand and website that would better connect their business with their customers.

Role: Website, Graphic, UX Designer
Date: February - May 2024
Platform: Website
Tools: Adobe Illustrator, Figma

Insights from Research

To understand the potential users of the website, I used two different methods to collect user data.

I conducted an observational survey 🔎 on-site as well as a self-guided questionnaire 📝.
A competitive audit was also created to compare successes in other well-known boba franchise websites 🌐.

Who and why:

Most customers are working professionals who are in the area to grab lunch/drinks. This includes regulars.

Students come from the nearby schools to hang out and study.

The smallest demographic is newcomers.

Trying out the shop for the first time, seeking out new cafes, new to the area, etc.

Researching website structure:

Five similar companies were researched as part of a competitive audit to help determine the most optimal website infrastructure for Leaf n Cream.

All websites included a home 🏠, about ℹ️, menu 📃, and rewards 🌟 tab.
A must-need for all company websites included an online ordering system to provide accessibility and increase customer conversion rates.

Depending on the company’s goals, additional tabs were added.

Extrapolated Pain Points

The most common pain points among the users were that:

Lack of organization of products creates a frustrating user experience.
Customization of drinks is hard to understand and/or not comprehensive.
Menu is overwhelming and difficult to navigate.

Reported pain points from the self-guided survey have also led us to believe that the menu was one of the main points of frustration.

The current menu is hard to navigate, making it unclear for customers to follow through and make decisions.

Breakdown of Solutions & Ideation

Because there was no pre-existing framework to work upon, it was exciting to see where the results of our research have led us. A goal was re-worked to reflect our findings from earlier:

Establishing an online presence 🌐.
Optimizing user experience specific to the Leaf n Cream customer base 👥.
Increasing customer satisfaction with more accessible information ℹ️.

Fortunately, a lot of the research and initial goals went hand in hand. Pain points brought up during research helped us better identify what we could do to connect the customer base and business together.
Based on the insights received from research, three new systems were implemented into Leaf n Cream’s new website.

previous in-store menu

proposed online menu

1. Menu reorganization:

Some drinks were discovered to be unique from other typical boba shops, despite having the same names.
- Changes to the menu were made to reflect that
New sections were created in the menu to help customers make better mental connections between similarities and categories of drinks.
- This allows information to be better digested and understood.
Build Your Own drinks are a unique feature of Leaf n Cream. They were better explained to new customers.
- Flavors were also grouped in similar categories.

✨ Changes after user testing included adding a key to quickly answer common questions and drink characteristics.

2. Leaf n Cream’s site map was constructed based on the information gained from research.

3. Lastly, based on the owners’ feedback, a cohesive brand was created to bring consistency to the business.

You can check out the designs in the design tab at the top of this case study. :)

take me to the top!

Conclusions

💭 Ending Thoughts and Reflections:

Creating a website for Leaf n Cream was a huge learning experience for me. I worked with real-world interactions and gained first-hand experience with the people I would be working to help. I learned a lot working with Sam and Teresa to create an experience that suited their tastes as well as find a better solution for their customers. I visited the café in person, changing how my user research was conducted. I interacted with customers and users directly to determine what they thought was important for this brand and gained different perspectives.

💫 For the future and lessons learned:

Because I was able to communicate with customers firsthand, I received immediate feedback on my questions. The much more open-ended aspect of conversation tested the survey questions I had come up with, and oftentimes, the questions themselves were lacking.

They often lost a purpose as I was required to dig deeper to find an answer that would facilitate my design choices.

I can improve upon my questionnaires by subjecting them to a more rigorous standard, ensuring they answer the questions or problems I want to tackle.

You can check out the full Figma file here:

a mock up of the leaf n cream website on a laptop and phone side by side

a website mock up of the leaf n cream home page

a mock up advert poster for leaf n cream

mock up business card designs for leaf n cream

a boba ball shaped mascot with leaf n cream and slogan written underneath the mascot.