O yeah! Humanoids has a new website 🎉
Consumentenbond homepage op een laptop.


Enable consumers to compare products more effectively


We worked on the Consumentenbond website. Additionally, we set up the CB design system.

Power features

The Consumentenbond website offers a product comparison tool, allowing users to visually compare certain test scores of products (e.g., sound quality, image sharpness, or ease of use).

In a scrum team, we worked on optimizing this comparison tool by focusing on overall user experience, usability, accessibility, and customer benefits.

Two ways we improved the usability of this feature were by enhancing the comparison on mobile devices and introducing a 'favorite' functionality to save products for later and easily access them again. To validate the effectiveness of the improvements, we conducted multiple A/B tests for certain features.

Screenshot of the Consumentenbond Product Comparison Tool
The Consumentenbond Product Comparison Tool 👀

Improving the main navigation

By redesigning the navigation menu with a user-centered approach, we successfully improved its usability and accessibility, leading to increased user satisfaction and better item discoverability.

Screenshot of the new main navigation on desktop
The new main navigation on desktop 🚀

The Consumentenbond website comprises various sections and topics (such as the product comparison tool, financial advice, legal advice, and more). Users repeatedly reported issues with finding specific product categories and navigating through the website in general. Causes included a multi-layered page structure, the current categorization of product tests, and lack of responsiveness.

Throughout the entire design process, we closely collaborated with users to improve navigation by involving them where possible and validating ideas along the way. Some key aspects that were crucial included:

  • Accessiblity: The new menu design must prioritize accessibility, including keyboard navigation, compatibility with screen readers, and color contrast.
  • Information Architecture: Menu items should be arranged based on user feedback, grouping them into logical categories.
  • Responsiveness: The new menu should work equally well on mobile and desktop.

After a card-sorting session with users and several design iteration rounds, the team was satisfied with the final result. As the last part of the project, we created a clickable prototype to validate the redesign through user testing.

Homepage redesign

We conducted a user test to understand how users perceive the Consumentenbond based on the homepage and whether it aligns with their mission and identity. Additionally, we looked at the overall user experience, including the look and feel, and their expectations and needs regarding information on the homepage.

Based on the results, we created a new design with reusable components that allow content creators to personalize the homepage based on the user's subscription.

Reusable components in various layouts for desktop, tablet, and mobile.
Reusable components in various layouts for desktop, tablet, and mobile.

Design system

In addition to incrementally improving the current product, at the Consumentenbond, we took the initiative to enhance several work processes. One significant improvement was establishing a design system.

We noticed many inconsistencies in layout and design components (such as buttons and input fields), resulting in redundant work for the entire development team.

To address this, we set up a design system with clear standards for fundamental elements like colors, typography, layout grids, along with a set of standardized components. This not only improved product consistency and usability but also elevated collaboration within the team, leading to a more efficient design and development process.

Overview of buttons in the component library as part of the Design System.
Buttons in the component library as part of the Design System. 🛠️

A new way of working

Previously, the designers at the Consumentenbond used Adobe XD as their primary design tool. We guided them through the transition to Figma, resulting in significant improvements in the design process and collaboration with development.

Additionally, during development, we introduced a UX review as an integral part of the scrum process, reducing the gap between design and implementation and improving the quality of work.

stripes doodle
fireworks doodle
Femke Akkersdijk

Een digitaal product maken?

Femke Akkersdijk
Business Development Manager

Start your inquiry

Would you like to start a project with us or hire an expert? Complete your request and we will contact you as soon as possible!

What can Humanoids help you with?

Want to find out what we can help you with?Interested?