Hakuhodo Website Redesign
A website redesign exercise to learn Sketch
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
Kept the visual language consistent across all pages with their iconic palette of red, black, and white
Have consistent shapes and fonts
Kept things simple, bold, and classic to emphasize the quality of their brand and products.
HERE’S WHAT I DID
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.
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.
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.
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.
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.
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.