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

Hakuhodo is a Japanese brand known for making world class brushes. How can I 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 kept the visual language consistent across all pages with red, black, and white, consistent shapes and fonts, and kept things simple, bold, and classic to emphasize the quality of their brand and products.

 
 
 
 

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

 
 

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

 
 

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

 
 

COMPARING 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. 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

 
 

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