Hakuhodo Website Redesign
I gave myself 1 day to learn Sketch and do a redesign case study.
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.
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.
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.
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.
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.
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.