LAM PHAM

ICMonstar Redesign

ICMonstar Logo

Summary

Working with a group, I revamped the outdated website for a local dessert shop through meticulous research and visual design iterations. The redesigned website more accurately conveyed the shop's branding and showcased their offerings in a more appealing format.

The Problem

ICMonstar is a local boba tea and rolled ice cream dessert shop in San Diego that was in need of an updated website. Their website was so old that their domain license had expired. The website overall poorly communicated their brand and was also clunky to operate, with poor prioritization of information. As part of a group of students at UC San Diego we offered to help redesign their website in order to aply our research and design skills.

The old ICMonstar desktop homepage

The old ICMonstar desktop homepage

The Process

Working closely with the CEO of ICMonstar (Jenna Hu), I interviewed her to find out what sets ICMonstar apart from its competitors and what kind of goals the shop had for the future. The new design had to convey ICMonstar's intended brand and be able to entice new customers, something the current website was not accomplishing. Jenna, the CEO, wanted ICMonstar to appeal more to an older college-aged crowd rather than the families and kids that were frequent visitors to the shop.

After obtaining information from the CEO, we had to define the customers of ICMonstar and figure our their needs and goals. We interviewed 12 people to create three personas based on different priorities when visiting a dessert and boba shop. These interviews were composed of customers and employees from both locations of ICMonstar as well as other people who have not visited ICMonstar, but are familiar with the store’s concept. We identified savings, aesthetics, and service as three key features that people look for when finding a new cafe to try.

The three ICMonstar personas

The three ICMonstar personas

After our first round of interviews a couple of trends arose in the answers. Nearly all of our interviewees, when asked to describe ICMonstar, stated “Cute” without hesitation. Customers tend to purchase rolled ice cream and find seating in the store to socialize. ICMonstar also tends to appeal more to females. The two ICMonstar locations also differ in demographics; there are more families with children at Mira Mesa, perhaps unsurprising given that the Convoy location was recently remodeled to appeal to a more mature audience.

Competitive Analysis

As a dessert shop, there are a few key features that must be represented in ICMonstar’s webpage. We looked at ICMonstar’s competitors: 7Leaves, Bing Haus, Guiltea Cravings, Kung Fu Tea, and The Alley. The different competitors shared several similarities regarding navigation labels and menu categorization.

  • Most cafes had their 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 have black and white as their primary colors and reflect their aesthetic through their logo and fonts.
  • Competitive Analysis PDF

    The website site architecture

    The website site architecture

    Early mobile mockup

    Early mobile mockup

    The New Designs

    The final redesigns of the mobile and desktop sites utilize a colorful pastel theme to resemble the colors of the rolled ice cream ICMonstar serves. Rounded corners and a new sans-serif font continue ICMonstar's cute aesthetic while still appealing towards an older crowd through modern web design trends. These prototype screens won over the ICMonstar CEO and got her to change her mind about having a minimalist design and color scheme.

    Mobile Prototype

    Desktop Prototype

    The mobile homescreen and menu pages

    The homescreen and menu pages

    I learned a lot about working with a client on this project by learning to manage tradeoffs between the client's needs and ensuring the best possible end product. Many tradeoffs and disagreements had to be talked through but in the end, I learned that involving the client in the design process is beneficial.

    Roles

    • User Research
    • Prototyping
    • Interaction Design
    • Visual Design

    Date

    January 2019 — March 2019

    Class

    COGS 187B

    Team

    • Grace Chen UX Designer
    • Nancy Zheng UX Designer
    • Gendarme Docena UX Designer