ROLE

UX/UI Designer, with mentor and peer reviewing.

TIMELINE

80 hours over 2 weeks, with time spent revising.

TOOLBOX

Pencil+paper|Sketch|InVision|Adobe Illustrator.

Project Background

Crisp has been in business for just under 10 years. They are known for their award winning Korean fried chicken and are a neighborhood favorite that people like introducing their friends to. Their Seoul Sassy Sauce and Buddha bowls have a sort of cult following. They have communal style dine-in as well as online ordering options. However, the site itself is about as old as the store and is entirely unresponsive, they are also not on any third party ordering sites.

Objectives

1. To create a mobile responsive website for Crisp.

2. To do a brand refresh and update the aesthetic.

3. To find out what the best options are as far as online ordering goes.

Secondary Research

I conducted initial Market Research to get an understanding of both about Crisp’s business goals and their current positioning, but also how the Korean restaurant market as a whole positions itself in the United States. Crisp has been committed to providing award winning made-from-scratch, authentic Korean food using generations old family recipes. A new website would provide them with the opportunity to honor this legacy and their current customers, but also draw in new diners as they compete for market share in this booming food segment.

I also conducted a Competitive Analysis; diving into how other Korean restaurants served their customers via their websites, branding, and positioning. The fried chicken restaurant segment as a whole is on an upswing, so I included research on some other growing Chicagoland friend chicken restaurants as well.

Primary Research

With market and competitive research under my arm, the next step of my research involved conducting 1-on-1 Contextual Inquiry Interviews with potential customers. I spoke in-depth to eight Crisp diners, aged 20-37, and collected qualitative data on their paint points, wants, needs, and behaviors when it came to their dining experience at Crisp. My goal was to understand:

• How customer decided where to eat that day.

• What positive or negative experiences they had dining at Crisp.

• What their experience has been ordering food online, if they have.

View interview script here

Empathy Map

Next, I took the data I uncovered from user interviews and constructed an Empathy Map in order to identify patterns that emerged between different people. This allowed me to keep a human-centric view of the product as I further the customers of Crisp.

I distilled key insights from the categories that emerged from the patterns, and identified needs based on those insights, as follows:

INSIGHTS

1. Most diners do not enjoy a crowded restaurant space.

2. Customers found the Crisp site to be confusing.

3. People found ordering from the Crisp site to be unreliable.

NEEDS

1. Customers need more seating options to enjoy their food.

2. Customers need to be able to find restaurant information more easily.

3. Customers need to have an online ordering platform they can trust.

User Persona

After identifying those insights and needs, I was able to create a fictional User Persona to represent what the ideal customer of Crisp would look like look like. Giving the data an identity with context and personality, which helped me empathize with the customer as I built a site to suit their needs.

POV Statements / How Might We?

To take this a step further, I crafted Point of View (POV) Statements and How Might We (HMW) Questions to empathize with the problems at hand from Tom’s point of view and create questions that would help ideate solutions to Tom’s most pressing needs.

Product Goals

Before approaching the task of creating solutions for the above persona and addressing their pain points with a website and features, I found it helpful to combine the project goals, as defined in the project briefing, with the user goals as defined by research and taking a look at how they overlap with each other.

Product Roadmap

With the product goals defined, I was able to create a Product Roadmap that listed all of the different features that would satisfy the business and customer needs - ranked in order of priority based on development time and cost.

Sitemap

Everything I learned from the product goals and product roadmap went into creating the Sitemap for the new Crisp site. I included the various proposed web pages and structured them in such a way that helped me visualize what the eventual site would look like and how the basic navigation would be.

User Flow / Task Flow

With the site map charted out I moved on to the initial stages of prototyping by creating a Task Flow and a User Flow.

The task flow I devised showed the direct path between a customer finding hot-wings in their neighborhood by googling it, and leading them on a journey to learn about the restaurant and finally decide to visit Crisp.

Building on this, the user flow I devised followed took potential customers on two journeys:

1. Discovering Crisp on Yelp and deciding they want to learn a bit more about the business.

2. Customer decides to order online and wants to see what sides they can also get.

UI Requirements

Using these flows and the and the features roadmap from earlier, I created a UI Requirements document that listed out the exact pages that I would need to build and all the elements to include on them.

View the full UI requirements document here

Low-Fidelity/Sketches

Next. I moved onto designing the page. I created low fidelity sketches of potential homepage layouts as a way to visualize different design directions before committing to any particular design patterns that I had seen on other restaurant websites.

I then created Mid-fidelity sketches of several pages - Home, About, Menu, Visit, Contact, Blog, Online ordering.

And then I created Responsive Wireframes as a way to see how the homepage and menu would look on different devices including desktop, tablet and mobile. This helped me consider the layout and visual hierarchy of the pages on different devices.

View the Responsive Wireframes here

Prototype

Using the mid-fidelity wireframes, I built a prototype so that I could test the functionality and layout of the website with users before committing to a high-fidelity design. I used InVision to create the prototype that I then did my usability testing on a laptop.

View the full Prototype here

User Testing

With the mid-fidelity wireframes and prototype completed, I set out to test the design before committing to a high-fidelity wireframe or mockup. A lack of visual UI to distract the user of the site helped be get unbiased feedback on the layout and usability of the site. The key elements of my testing plan and it’s eventual findings are as follows:

OBJECTIVES

1. To observe how users interact with the Crisp website and it’s navigation.

2. To assess whether or not task are easy to perform and if they make sense.

3. To uncover anything that is confusing or missing from the users perspective.

USER TASKS

1. Go to the Crisp website to learn more about the business.

2. Look for a menu page and discover what Crisp has other than wings.

3. Find a page that lists Crisp’s hours and location.

View full Usability Test Plan here

Test Findings

I conducted my interviews in-person at a local coffee shop, and attempted to test with people who met my testing criteria of users aged 20-44. I ended up interviewing five people aged 23-43.

I had the users narrate what they were doing as they ran through the tasks, as well as tell me their feelings and thoughts as they completed their task.

I took their feedback and put it into findings document that summarized everything I learned from user feedback.

View Test Findings here

Affinity Map

I then took this feedback and organized it into categories of - success, patterns, and, comments- that I further organized on an Affinity Map, where I further distilled my findings into insights and recommendations to make revisions to the prototype.

The recommendations I uncovered are as follows:

INSIGHTS

Users cared about content and imagery on the site.

1. They also find icons and informational graphics helpful in understanding a page.

2. There are familiar naming conventions that shouldn’t be strayed from in sites like this.

3. People wanted more access to the navigation.

RECOMMENDATIONS (HIGH TO LOW PRIORITY)

1. Fill out content on the pages.

2. Add icons to Menu.

3. Make names of navigation links more clear.

4. Add scroll to top button on pages.

Style Tile

Before implementing the feature recommendations into a high-fidelity wireframe, I set out to create the UI design and visualization of the elements on the new Crisp website. Using the inspiration I collected on a mood board, I put together a Style Tile that defined the final colors, fonts, and other elements that would make up the visual look of the final site.

I based these UI decisions follow four main adjectives that I decided represented Crisp’s brand and business ethos.

1. Fresh

2. Tasty

3. Welcoming

4. Communal

These along with previous research, would go into the decision of what colors, typography, imagery, and layouts the Crisp website would be built out of.

Responsive UI

With the UI elements finalized, I started to build a High-fidelity prototype of the Crisp website by building out the pages based on the mid-fidelity wireframes, and the recommendations from the affinity map.

The prototype was completed in InVision and is workable for the same tasks that were available in testing. In addition, users can view the blog pages and content, as well as run through a test of sending a message via the contact form.

View the full Prototype here

UI Kit

I prepared a UI Kit using the elements I included on the high-fidelity prototype. This guide includes all colors, font sizes, icons, and other graphic elements that the Crisp website is built of.

Key Takeaways

1. Become more familiar with design patterns

   In doing research for this project I looked to other Korean restaurant websites for inspiration but found that many of them were fairly sparse or with dated design patterns. At the recommendation of my mentor, I looked to brewery websites and even to broader design trends for inspiration in building a modern page for Crisp.

2. Customers expect more

   For the most part, Crisp’s customers first came to the store as a referral. But in some cases, those whose first introduction was the Crisp website found themselves confused. Often it would be months before they’d actually visited the restaurant. The readily available information and, in the case of online ordering, a reliable platform goes a long way in the buying decision.