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
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.
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.
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
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.
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)
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)
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)
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.
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.