Interaction Designer and UX Advocate
iceskimo_banner4.jpg

CASE STUDY 1:

 
 
 
 
 
 
 
 
 

PROJECT OVERVIEW

Role: UI/UX Designer

Collaborators: Fairy Bui, Kathy Hoang

Timeframe: 10 weeks

Contributions: User Interviews, Personas, Low- and High-Fidelity Prototypes, Slide Decks, Front-end coding

In this course, our group had the opportunity to personally find a client to work with and design or redesign their website. We ended up working with Iceskimo, a shaved snow place in San Diego.

We designed their website from scratch, given that they had no precedents. We handled everything from beginning to end, including user research, competitive analysis, iterative prototyping and coding a responsive website.

MY ROLE & THE GROUP DYNAMIC

 strong rapport created solid communication & collaboration

strong rapport created solid communication & collaboration

I have collaborated with Kathy and Fairy in previous projects and took most of my HCI curriculum with them. As a result, we started off with strong rapport and a keen understanding of each other’s strengths and weaknesses. This created a necessary foundation in communicating with each other and enabled us to push each other's limits as designers.

Given that we’re all designers by trade, our greatest challenge was in coding a responsive website.  Before the project we only knew the basics of HTML/CSS and bootstrap. As a result we spent many late nights coding and debugging the website. In the end, however, our efforts paid off and we were able to code a responsive website.

CLIENT & USER GOALS

 iceskimo's logo and brand colors

iceskimo's logo and brand colors

One of the first things we set was client goals and user goals based on user research.

Our client goals included:

 iceskimo's interior design features consistency with the clean, minimalist branding

iceskimo's interior design features consistency with the clean, minimalist branding

  • Maintaining consistent branding with the company
    • lean, minimal design with more visuals over text
  • Conveying Iceskimo’s artisanship in its usage of high-quality, natural ingredients
  • Having a one-page design that focuses on enticing customers with a teaser of Iceskimo, rather than being informative and text-heavy
 a picture we took to help convey iceskimo's high quality, and use of natural ingredients

a picture we took to help convey iceskimo's high quality, and use of natural ingredients

Our user goals included: 

  • Familiarizing themselves with Iceskimo
    • by discovering what Iceskimo has to offer and what the interior vibe is like
  • Finding relevant information quickly
    • e.g. store hours, address, what Iceskimo has to offer
  • Learning what sets Iceskimo apart from other dessert places

 

 

UNDERSTANDING THE CUSTOMER

Once we consolidated our user data, we built user groups in order to understand our users. Within these groups we included personas, use cases and user scenarios.

David Krobin, the persona based on the "Family Diner" user group: 

David's user scenarios and use cases:

Cindy Nguyen, the persona based on the "Student" user group.

Mitch Henderson, the persona based on the "Regular Diner" user group

OUR APPROACH

COMPETITIVE ANALYSIS

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. I compiled an analysis on Boba Guys and Snow Fluff.

 boba guys branding: a sample from our competitive analysis slide deck

boba guys branding: a sample from our competitive analysis slide deck

WIREFRAMING

Before we started wireframing, I suggested that each of us sketch out our version of the Iceskimo website. This was to promote divergent thinking in order for more creative outputs and a larger pool of ideas to choose from. Afterwards, we did a brief critique session, giving feedback on each other's sketch before we consolidated our ideas into a wireframe.

THE CHALLENGE

During the beginning stages of wireframing and prototyping the website, our client became unreachable. Given that we had weekly deliverables we had to continue forth, making design decision based solely on user-centered design. When we were able to get in touch again, he proposed a redesign of our website to a one pager, cutting more than half our content including the menu. This caught us off guard, as it was nearing our high-fidelity prototype deadline and seemingly went against our user data. Even though our intuition as UI/UX designers told us the one pager wasn't the best route, we considered our client's perspective as he wanted a website with minimal content and mainly visuals.We overcame this by considering the one page design and looked into how we could take his proposal and address more of our user needs. We made a quick re-sketch, walking through the possible layout and if there were any parts we could add or redesign to better fit our user's needs. Once we were satisfied with the sketch we had in mind, we ran it by our client, explaining our design rationale and got approval to move forward with the design. 

 our resketch of the iceskimo design into one page

our resketch of the iceskimo design into one page

HIGH-FIDELITY PROTOTYPE

Before we started coding, we made high-fidelity versions and created an interactive version on Invision. We performed some user testing and got feedback from our class before make more iterations of the website and coding it.

A few screens from our high fidelity prototype:

 
 

OUR FINAL DELIVERABLE