I redesigned a local tea shop’s storefront to attract a more diverse customer base and increase website engagement by 39%


ROLE: UX/UI Designer, Researcher
TEAM: Gendarme Docena, Grace Chen, Nancy Zheng
TIMELINE: 3 months



ICMonstar is a local tea and dessert shop in San Diego that’s very popular amongst young families. However, despite the many unique offerings and cute characters ICMonstar provides, they struggle to attract the large college student population in the area.

Understanding the Client

To gain a better understanding of the client, we spoke with the owner and CEO Jenna, who gave us insights as to the current state of her shop and what ambitions she has for its future. From the initial conversations, we learned that the shop is one of the only ones offering rolled ice cream in the San Diego area. However, ICMonstar’s constantly changing menu and aesthetic has dissuaded her from pursuing the daunting task of developing a website. Jenna is dedicated to building the best business she can and believes that a well designed website will be able to increase sales. Unfortunately she is limited on money and time, juggling two locations and another business at once.

Charming Mascots
ICMonstar separates itself from other cafes with their delightful cast of mascots.
Steep Competition There are many tea and dessert shops in the area serving similar options.
Identity Crisis The shop recognizes that their current branding may be turning off potential patrons.

Understanding the competition

As a dessert shop, there are many features that must be represented in ICMonstar’s webpage especially with the large menu they have. To gain some insight on what works and doesn’t work for branding, content, and site architecture, we conducted a competitive analysis on websites with a similar menu and market: 7Leaves, Bing Haus, Guiltea Cravings, Kung Fu Tea, and The Alley. These competitors were chosen as a mix of renowned local and international shops that we felt could give us some valuable insights into their design thinking. After some analysis, we noticed that the different competitors shared several similarities regarding navigation labels and menu categorization:

  • The majority of the cafes had a Menu, Locations, Hours, Social Media, and About page on their websites.
  • Niche features such as merchandise from Kung Fu Tea and catering / fundraising from 7Leaves were noted for future use on the ICMonstar webpage.
  • Most shops used black and white as their primary colors and reflect their aesthetic through their logo, fonts, and let their photographs take center stage.

Understanding the User

We conducted user interviews with a mix of customers, potential customers, and employees to gain some insight on ICMonstar’s current reputation and their clientele. Below are some initial gatherings from this round of interviews:

  • An extremely common first impression of the store was “cute”
  • ICMonstar appealed more towards women (67% of those interviewed)
  • Different demographics at each location (Millenials and Gen Z frequented the Convoy location)
  • Typical customer behavior: Purchase rolled ice cream(most popular order), find seating, socialize

From these initial interviews, we found that our users valued three key features when deciding on a dessert spot: savings, aesthetics, and hospitality.


Based on the three key features above, we created personas in order to gain a deeper understanding of the different clients and how we can target these user needs in the redesign.

Janet the Aesthetics Admirer
  • Scours social media photos for attractive decor and drinks
  • Values recomendations on what items to order
  • Wants to take some nice photos to share on their story

Theodora the Deal Hunter
  • Checks website and menu for prices and current deals
  • Appreciates variety in options to order for her kids
  • Looks for clean seating suitable for her whole family

Bob the Hospitality Hound
  • Loves a quick ordering and pickup process 
  • Values positive interaction and service with workers
  •  Wants to easily figure out catering options for office orders

Understanding the Website

ICMonstar’s existing website places a large emphasis on their mascots, making it very family-friendly. Because of this emphasis on mascots, there is a lack of focus on the actual desserts and drinks offered. There are also no pictures of the cafe itself, therefore potential customers are unable to gauge the aesthetics of the cafe before visiting. 
In terms of the overall navigation of the website, many menu items were redundant and the menu itself involved a lot of scrolling while neglecting pricing information, an important factor for many potential ICMonstar customers.


We started with some initial sketches in order to quickly explore different layouts to iterate on before settling on one design. For these sketches, we focused on the following pages that were essential to the final website based on client needs and ICMonstar’s competitors:

  • Home
  • Menu
  • Merchandise
  • About
  • Catering
  • Contact


Once we were able to focus in on a basic website structure, we started wireframing more detailed mockups, making sure to add features requested by the client as well as making sure to emphasize the aesthetics, savings, and hospitality aspects of ICMonstar. 

From these wireframes, we began user testing to gain some early insights before proceeding with the prototype. We interviewed some ICMonstar customers and found that there were gaps between the user’s mental model and the conceptual model of our wireframe. 

  • Scrolling on the menu page was not immediately obvious 
  • Menu toggle was obscured by the page fold
  • “Image galleries are the first thing I would look at”

First Prototype

Since we had limited time, we had to design in tandem without a concrete style guide which proved to be quite difficult. Despite this, we were able to quickly focus on function first and to decide on copy and graphics later. The greatest challenge for me was finding a way to present ICMonstar’s large menu without having the users scroll excessively. To solve this, I divided the menu in two with a toggle for Drinks and Rolled Ice Cream and further categorizing each drink type into an expandable menu.

Final Design

After some additional user testing and feedback, we found that many users felt that the prototype came off as slightly uninviting and felt more like a startup’s website rather than one of an ice cream shop‘s. A couple users commented that the “Lucky to have you” opening text was very vague so after some suggestion from Jenna and testing with users, we changed it to “Lucky to have you”. I then overhauled the design to be more warm and welcoming, incorporating pastel colors to imitate the creamy colors of ice cream. We used a rounder font and button elements to make the design friendlier and less rigid. This final design was received warmly amongst potential customers and based on Google Analytics data, the average website session duration was increased by 39% as well as a 27% increase in the click through rate . 

Check out the interactive prototype here!