For KH Group Holland I’ve rethought the design and some functions on their webshop. Now visitors can perform searches more intuitive and navigate to products. Everything in a clear design that reflects the brand identity super sharp.
Intuitive search
First the website had a search function with a dropdown. There you could select the kind of term you were about to type. After research I discovered visitors did not use the dropdown and for that reason did not find what they were looking for. They typed article number while the dropdown was on “search products”. More research told me that the function of the dropdown was not clear. People that did use it did not find what they were looking for and ended their session. I focussed on what visitors used the searchbar for and compared it with the results it gave. The two main types that were searched for were product names and article numbers. While there were two types of numbers (one catalogue page number with 3/4 characters and one article number with 5) a search with 3 characters would give many unusable result.
In the new search bar people could search on product name, article number and catalogue page number with the webshop choosing what kind of results would fit.
Small animated video
To introduce the new way of searching I made a small animation. Because the video was for Facebook where multilingual fans would see it, I made it (almost) square and with abstract shapes in stead of choosing a specific language or lorum ipsum.
Highlighted marketing
KH Group Holland has a special marketing strategy with personal discount. When you buy a group of products you get a discount. The benefit for them is that customers buy all products in a group and not only a few. For that reason I made the “buy set” more striking in the design. The background of the button is designed to show a overview picture of all products. For new customers there’s also a info icon so they can get more information about the
Super sharp brand
Earlier the new branding of KH Group Holland was released. In the new webshop all headings and elements with a higher hierarchy were designed with the font Montserrat – Bold. A font with a sister, Montserrat Alternates, that is a bit more playful and used as vibrant variation. The paragraphes and lower hierarchical elements were designed in Open Sans. This is a more natural font in good contrast with the heavy Montserrat. For the better displays the new website now uses only SVG’s for icons and graphic elements. SVG is a format that is always displayed super sharp and bright.
Before
