Company Overview
Volkshochschule (vhs) offers a comprehensive continuing education program for adults in the areas of foreign languages, German and integration, health and nutrition, work, profession and career, politics, society and the environment. A well-functioning search function is essential for finding the right course from the thousands on offer.
Role: UX/UI Designer
Date: April – August 2024
Challenge
Search results and search filters are currently displayed visually separated from each other. This is confusing for visitors to the website: they have to scroll down from the search input field to the results and scroll up again for further filter settings.
Solution
In future, we will link results and search filters more closely together visually. On the desktop, the filters will be displayed in a small column on the left-hand side and the results directly next to them in a list. If you then select a filter, the results display on the right-hand side will be automatically adjusted. On the smartphone, you can filter using an overlay so that you always stay in the same place, even when you close the window.
To maintain an overview, all selected filter elements are marked with an additional active colour. This colour is a completely new colour that lies outside the vhs colour world. It has a contrast ratio of 4.6:1 and therefore fulfils the accessibility requirements.
The design is barrier-free in accordance with the requirements of BITV 2.0.
Features
You can use the radio buttons ‘On-site’, ‘Online’ and ‘Hybrid’ to narrow down the search results in advance. If you select ‘On-site’, the search radius is extended with a radius search if there are too many or too few results for a location. This is done using a slider with which you can continuously adjust the number of kilometres.
