Eric Houng Portfolio

ERIC HOUNG

CONTACT

About

Resume

Case Study

Hocho Knife

description

Client

Hocho Knife

Timeline

2023 | 3-week sprint

Role

UX/UI Designer Lead

Team

Eric Houng

Services

Website Redesign, User Research, UI/UX Design

NO MORE NEEDLE IN A HAYSTACK EXPERIENCE WHEN FINDING YOUR PERFECT CHEF KNIFE

In this concept case study, I took on the challenge of revamping one of my favorite Japanese chef knife e-commerce site. Aimed to simplify the layout and enhance the user flow, I wanted to ensure a seamless experience for users of all expertise levels in selecting the perfect kitchen knife. The cherry on top is making the site mobile friendly for those shoppers on the go.

VIEW FIGMA

IMPROVING THE USER FLOW

Whenever I develop an interest or a hobby, I like to do extensive research on the best tools and equipments. Cooking was no exception, and it was how I became obsessed with Japanese chef knives. I was enamored by the art of precision and craftsmanship, and the different type of knives that serve their specific purposes. When I decided to take my cooking skills to the next level, Hocho Knife was one of the first websites where I purchased my first chef knife. If not for a friend's purchase recommendation, I would have struggled coming out of this site with a selection.

I wanted to do a concept case study that achieves the following:

In this concept case study, we explored how COVID has impacted readers' ability to engage and share in person. With face-to-face gatherings practically impractical for over a year, the practice shifted even more heavily online. As our world is increasingly defined by virtual interactions, companies look to adapt. We helped Kindle face the following challenge:

Improve the user flow experience
Enable mobile-friendly browsing

The purpose of this case study is to transform the store of over 1,000 products into seamless experience for users of all cooking expertise levels.

THE CURRENT WEBSITE

The home page feels cluttered and a lot of the content could have been fitted under the global navigation bar. A first-time customer or a user unfamiliar with chef knives would struggle knowing where to start.

The global navigation bar has a lot going on, and the dropdown lists are not alphabetized.

IDENTIFYING THE USERS

View Affinity Mapping

In order to know how to improve the user flow experience, I needed to identify the users, their goals, needs, and pain points. I conducted 6 user interviews to understand their shopping habits and preferences.

Based on our affinity mapping, some of the key trends revealed that our users:

Choose their source of purchased based on competitive pricing.
Make purchases based on price.
Like the convenience of online shopping.
Make purchases based on expert reviews.
Like to do thorough research before purchase.
Need to compare options before making a decision.

We then created two personas to help identify our potential users.

Getting to Know Our Users

Users like Chris often face decision paralysis caused by the overwhelming number of options and not knowing where to start. Many users face facing this challenge are typically new to kitchen knives but are interested in improving their knife and cooking skills without breaking the bank. Price is an important factor without sacrificing quality. Users like Chris would benefit from a guide upon landing on the homepage to navigate the product line effectively.

More experienced cooks like Tony would be looking to expand or upgrade their knives. Tony does thorough research and comparison before making a significant purchase. His purchase would be focusing on quality and durability. Tony and other users would find value in an intuitive product comparison feature that presents clear information and specifications.

MAPPING OUT OUR USER TASK FLOWS

Now that we know our users, I laid out the user flows depicted above. Based on the two personas, their task flows will look like the following:

Chris, as a new user unfamiliar with kitchen knives, starts with the knife guide from the home page. He learns about each knife type and purpose, which helps him decide the kind of knife that suits his need. The guide provides the direct link to the desired product listing page, where he utilizes the filters to help him narrow down the choices. Chris navigates to a product page to read the reviews, which confirms he has found the right knife. He adds the product to his cart and directly checks out. The order confirmation page provides details on his purchase and of the upcoming purchase email.

Tony is looking to upgrade his knife and has received several recommendations. He navigates directly to the product listing page, and selects the recommended products for comparison. The comparison table lays out products and their specifications, helping Tony select his choice of upgrade. He quickly reads through the reviews in the product page to make sure the knife is well-received by other users. Having made his decision, Tony quickly checks out and makes his purchase.

Now that we know our users, I laid out the user flows depicted above. Based on the two personas, their task flows will look like the following:

Chris, as a new user unfamiliar with kitchen knives, starts with the knife guide from the home page. He learns about each knife type and purpose, which helps him decide the kind of knife that suits his need. The guide provides the direct link to the desired product list page, where he utilizes the filters to help him narrow down the choices. Chris navigates to a product page to read the reviews, which confirms he has found the right knife. He adds the product to his cart and directly checks out. The order confirmation page provides details on his purchase and of the upcoming purchase email.

Tony is looking to upgrade his knife and has received several recommendations. He navigates directly to the category product list, and selects the recommended products for comparison. The comparison table lays out products and their specifications, helping Tony select his choice of upgrade. He quickly reads through the reviews in the product page to make sure the knife is well-received by other users. Having made his decision, Tony quickly checks out and makes his purchase.

Now that we know our users, I laid out the user flows depicted above. Based on the two personas, their task flows will look like the following:

Chris, as a new user unfamiliar with kitchen knives, starts with the knife guide from the home page. He learns about each knife type and purpose, which helps him decide the kind of knife that suits his need. The guide provides the direct link to the desired product list page, where he utilizes the filters to help him narrow down the choices. Chris navigates to a product page to read the reviews, which confirms he has found the right knife. He adds the product to his cart and directly checks out. The order confirmation page provides details on his purchase and of the upcoming purchase email.

Now that we know our users, I laid out the user flows depicted above. Based on the two personas, their task flows will look like the following:

Chris, as a new user unfamiliar with kitchen knives, starts with the knife guide from the home page. He learns about each knife type and purpose, which helps him decide the kind of knife that suits his need. The guide provides the direct link to the desired product list page, where he utilizes the filters to help him narrow down the choices. Chris navigates to a product page to read the reviews, which confirms he has found the right knife. He adds the product to his cart and directly checks out. The order confirmation page provides details on his purchase and of the upcoming purchase email.

REDESIGNING THE WEBSITE

I sketched out ideas for the different pages and sections of the website. I kept in mind that our users value convenience of online shopping and ease of product comparison. The redesign would emphasize on user journey that is informative and ultimately leads the users to select the right product for purchase.

CLEANING UP THE HOME PAGE

Before

After

I simplified the global navigation menu by reducing the dropdown menu down to three links. All products, sales, and newly releases resides under the Shop dropdown menu. The Learn menu contains informative links about the types of knives, knife purposes & design, and materials. The Support menu would include links such as knife maintenance, FAQ, Shipping & Payment.

Before

After

Because of the overwhelming number of products available, I wanted first-time users to easily identify a starting point. This is achieved with a link that informs users of the knife types and their specific uses. The new home page eliminates clutter and prioritizes a knife guide, new arrivals, top three knife types & brands, and preview of its social media page.

Before

After

The lists of brands and knife types were alphabetized for easier navigation. I took the original links under "Navigate" and arranged them under "Customer Care" and "About."