INFO

Hi! I’m Lam, a UX designer based in the Bay Area. I graduated from UC San Diego with a B.S. in Human Computer Interaction and a minor in Design.



PROJECTS

ICMonstar
Pharmate
SAP Personas @ Cubic
Point Poppy


Mark

ICMonstar



Redesigning a local tea shop’s storefront in order to attract a more diverse customer base


//CASE STUDY
//REDESIGN

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

  

Problem

ICMonstar is a local tea and dessert shop 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 mountainous task of developing a website. Jenna is dedicated to building the best business she can. 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.



Personas

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
As a socialite, Janet values looks over anything else in a dessert shop, with an eye for well-designed decor, a clean environment, and beautiful and unique drinks.
Theodora the Deal Hunter When she's out enjoying family night, Theodora keeps an eye out for discounts and deals. She doesn't mind trying new things, especially with her finicky kids, but wants to get the best bang for her buck.
Bob the Hospitality Hound Bob's in charge of getting lunch for the office, so he needs to get back fast with delicious goodies. He wants to know what ICMonstar offers at a glance and order without hassle.



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.





Sketches

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




Wireframing

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 us was finding a way to present ICMonstar’s large menu without having the users scroll excessively. To solve this, we 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. As a result we 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 many said that they would definitely visit ICMonstar with this website.

Check out the interactive prototype here!







Mark