Let's talk design!

Send me a hello, and I'll get back to you!

Name *
Name
         

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Hakuhodo

 

Hakuhodo Website Redesign

A website redesign exercise to learn Sketch

 

 

THE BASICS

Company

Hakuhodo

Client

Self-Initiated

Time

1 Day

Role

Interaction Designer

 
 

 

THE BACKGROUND

Hakuhodo is a Japanese brand known for making world class brushes but the old website is not modern to communicate trust nor does it communicate professionalism of the brand. I challenged myself to make the HakuhodoUSA.com look more modern yet classic to reflect the quality of the products, more usable, and consumer-facing. This is a one-day design challenge I gave myself to redesign the website as a practice for designing eCommerce web and mobile UI in Sketch. I

  1. Kept the visual language consistent across all pages with their iconic palette of red, black, and white

  2. Have consistent shapes and fonts

  3. Kept things simple, bold, and classic to emphasize the quality of their brand and products.

 

HERE’S WHAT I DID

NAVIGATION

I went through the current website and the Japanese website and mapped out the structure and content of the current website. I rearranged the information hierarchy and designed the global navigation bar to allow access to all pages and user account at any time.

INFORMATION ARCHITECTURE

NAVIGATION STYLES EXPLORATION

 

COMPARING INTERACTION IN SHOPPING CART

Buying brushes online is hard because it's difficult to tell their sizes and the differences between similar brushes when you can only view one product at a time. For users interested in comparing brushes, the shopping cart would act as the interface for comparing the options by providing references . Users can choose and rearrange the order to closely compare specific brushes of their choosing and edit their cart directly. I made a few variations on the layout to optimize the screen space.

COMPARISON COMPONENT CLOSE-UP

CURRENT SHOPPING CART PAGE

NEW DESIGN

 

PRODUCT PAGES

I used large close-up images so users can easily see the brush tips. Each brush has a indicator to indicate if the bristles are made with natural hair, synthetic fiber, or a mix. The user would be able to filter their results instead of having to click through several pages to browse for options. There is always a CTA when a product is presented.

CURRENT PRODUCT LISTING

NEW DESIGN

CURRENT PRODUCT PAGE

 

Landing Page

The new landing page design uses more imageries as routers to other pages, promotes purchases by presenting the products, uses a more visual way to display upcoming information, and a larger viewport for the brand video.

CURRENT WEBSITE

NEW DESIGN

 

Responsive Recommendation LAYOUT

Keeping the same component layout for web on mobile would causing a long vertical scroll. To reduce the height, I made an option using "see more", and another option with a more compact layout without sacrificing content.

 

FIRST ITERACTION

SECOND ITERATION

 
 

 

AT THE END

I focused on the UI and interaction design for this exercise so the problems I solved came from my personal struggles and observations from online reviews. If this is a project from start to deployment, I would do a deeper understanding in strategizing branding and conduct user research to understand the pain points to inform what features to build and prioritize. Also, test the designs with real people to get feedback on the usability and discuss with technical lead on feasibility.