Keuken Kampioen

In recent years I am lucky enough to be able to do some design projects for Keuken Kampioen. My role was to design and prototype new features on the website. Alongside my team that consists of two conversion rate specialists we tested several variations of my design proposals. I highlighted a couple projects in my portfolio that vary from user-interface design, interaction design to concepting.

About the company

Keuken Kampioen is a Dutch kitchen supplier that focuses on offering high-quality kitchens at a competitive price. The brand wants to position itself as a reliable and customer-friendly kitchen supplier, where personal attention and excellent service are central. Keuken Kampioen was founded in 1981 and has been part of Mandemakers Group, one of the largest kitchen companies in the Netherlands, since 1995.

The day I started as a ux designer at the company we transitioned over to figma as a design tool. We hadn't had a design system yet, so I've been working on a design system that insists on all elements on site. A design system has many advantages, especially for a large website like Keuken Kampioen that has many elements built into its CMS in years. Because of a design system we found out we could just make elements more multifunctional and modular. To have a clean insight on all the elements we cleared out all unused elements and ordered the one we do use. For me as a UX/UI designer I still have the responsibility to update and maintain the design system regularly.

Step by step

As result of our own user research that consists of interviews, Hotjar analysis, Google analytics, surveys. We knew our website could improve a lot in terms of user-friendliness. Together with the CRO-team we have filled our backlog to address those problems.

One of the problems we tried to solve I’ve highlighted here on top. We knew users were confused about what was actually customizable when they entered a kitchen product page, which is actually anything and therefore we tried several design variations to get the message clear. We found out it was better to be transparent about what was possible directly on the product card. Communicating everything wasn’t possible within the limited space but the amount of information we showed was enough to improve CTR. I’ve also tried to improve the interaction on the product page by designing an hover effect to give the user a clear feedback on what was clickable.

Filtering done right but is there another way to enhance user-experience?

The collection page is one of the most visited pages on our site so we wanted to improve every aspect of the page. One of those aspects we wanted to improve was the way users were filtering because we noticed a lot of interaction on the element’s but it felt very sluggish. After testing a couple of prototypes we noticed that we didn't have enough items in our catalog to make proper use of the advanced filtering. To do so we need to create more products like the same kitchen in different colors and setups for each individual kitchen. This would drastically scale up our design scope which involves more stakeholders. Therefore we decided to save the concept for future improvements and held on to the initial scope. To solve the sluggishness of the filtering we did the opposite of advanced filtering and we simplified the filtering and introduced instant filtering instead this enables more fluid filtering so it didn't feel sluggish. It is still in the development phase.

Although we noticed users prefer to search by scrolling through the collection then using the search bar -This because of the hard to memorize kitchen name so it's easier to scroll through the collection than actually search by name-. We are aware we could still improve the search experience, also because we believe it will be more used in the future when we decide to increase the kitchen collection to meet up the requirements for the advanced filtering. This concept I made is to visualize how the user would use the search bar and how we could improve the way users find their kitchen or other content within our website.

Tone down a little

With this concept I tried to minimize the excessive use of primary colors and implemented some learnings I’ve gained in my career to improve user-experience. My vision on the site is to use colors wisely and consistently. To achieve this I’ve changed the color blue to match the color saturation of red and to meet the required WCAG (Web Content Accessibility Guidelines) contrast ratio on buttons. If we use blue buttons consistently I strongly believe we don't need the color yellow anymore which only contributes to confusion between red and blue. Throughout this concept design I’ve only used color red for certain objects which need to stand out. Alongside the more toned-down color pallet on the website you will notice that the red and blue colors will pop more in the eye. Which is exactly what I tried to achieve with this concept.

Visit the current website