Interaction Designer and UX Advocate

Iceskimo Website

iceskimo banner.jpg
 

My Role: UX Designer, Project Manager, Front-end Developer

Copy Editor, Designer, Developer: Fairy Bui

Visual Lead, Designer, Developer: Kathy Hoang

Software: Photoshop, Sketch, Invision, Balsamiq, Google Suite

Timeframe: 9 weeks


the context

What's Iceskimo?

Iceskimo is a dessert shop located in San Diego, CA. They sell Taiwanese shaved snow and various caffeinated drinks. 

What was my role?

As a close-knit team of 3 designers, we handled all of the research, design and development work collaboratively. However, each of us shined in certain project aspects. I handled the project management and was also the one who found and kept up communications with our client. Kathy handled all photography and final edits of our visual design and Fairy was the strongest writer and handled final edits of text.


my process

UNDERSTANDING the CLIENT AND the USERS

One of the first things we started with was understanding and defining the goals of our client and users.

Image 1: Iceskimo's Logo & Brand Colors  /  Image 2: We gathered user data via guerilla interviews.

iceskimo_branding.jpg

Our client's goal:

  • Maintain consistent branding with the company (i.e. lean, minimal, visuals over text)
  • Convey Iceskimo’s artisanship and usage of high-quality, natural ingredients
  • Use a one-page design that focuses on enticing customers with a teaser of Iceskimo, rather than being informative and text-heavy
user_interviews.jpg

Our users’ goals:

  • Familiarize themselves with Iceskimo by discovering what Iceskimo offers and what the interior vibe is like
  • Find relevant information quickly e.g. store hours, address
  • Understand what sets Iceskimo apart from other dessert places

We crafted a mood board to keep us and the client on the same page for the design direction.

Mood Board

digging deeper into customer needs

After we interviewed a variety of users, we consolidated our data into personas, use cases, and user scenarios. Each of us handled a different persona. I created the persona "David, the Family Diner".

User Interview Demographics

3 Personas and their Use Cases (Click to enlarge)

ANALYZING COMPETITORS

Before we started designing the website, we analyzed what competitors in the food industry used for their websites. We looked closely at what worked and what didn't work in terms of branding, content, site architecture, and more. Boba Guys is one of the competitors I analyzed. You can read what I compiled below.

Competitive Analysis (click to enlarge)

WIREFRAMING

As a team, we each sketched out possible layouts for the design and consolidated what worked best from each of our designs into the wireframe below. 

Wireframes built via Balsamiq (click to enlarge)

iceskimo wireframe 1.png


BUILDing interactive PROTOTYPES USING SKETCH & INVISION

Before we started coding, we made an interactive high-fidelity prototype. We performed some user testing and got feedback from users and our client before making more iterations of the website and coding it.

 

Our i Mockups

 


CODING THE WEBSITE

We coded the responsive website from scratch.

VIEW ICESKIMO WEBSITE (opens new tab) 

 

PERSONAL REFLECTIONS

Iceskimo was a great lesson on learning how to communicating with and understanding the client's needs and goals. Although we struggled a lot with the coding as designers, we were able to push through it and gain more knowledge into developing responsive websites.