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
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
One of the first things we set was client goals and user goals based on user research.
Our client goals included:
- 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
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
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.
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.
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.
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.