Rebuild of the Official Website on Vocational Training
SDBB | Vocational Training Media Department
The official Swiss website for vocational training is geared towards all stakeholders in vocational training: Vocational trainers, specialists in cantonal offices, examination experts and apprentices can find information on basic vocational training here. In addition, the website holds all the required forms, documents, guidelines and legal information – in German, French, Italian and English.
How did we design a website for so many different needs? Here is our solution.
- Customer
- SDBB | Vocational Training Media Department
- Customer since
- 2019
- Go-Live
- June 2024
- Website
- www.berufsbildung.ch
Seek and You Shall Find?
The Berufsbildung.ch website had already been online for a few years. However, the structure was outdated and the user interface was not adapted to smartphones, which are often used to visit the site now. At the heart of the relaunch was a complete redesign with an entirely new architecture.
A Smarter Search Bar
First of all, we wanted to understand who uses the website, and for what. Through interviews and workshops, we learned about the needs of the different target groups. We used a card sorting method and the expert knowledge of our customers to develop a new structure for the content.
Filters Deliver Faster Results
The new search function is the centrepiece of the new website. Together, we structured and tagged the existing content: glossaries, documents, frequently asked questions, news and pages. This enables us to automatically add related content to content pages, such as news on the subject or useful downloads.
Next to the search bar, users can select different fields along with their search terms and filter for topics. Depending on their selection, they will find specific information, required documents, the latest news, in-depth information or answers to frequently asked questions.
UX Writing and Typography Concept
For a website that is made up almost exclusively of facts and information, an attractive typeface is a must. To ensure legibility and create a visually appealing design, we optimised the structure of titles and subtitles and carefully considered the selection and use of fonts:
Title and subtitle direct the readers’ gaze and improve navigation.
Font, font size, spacing and hierarchy are key in helping users focus in a text-heavy environment and preventing fatigue. The fonts used, IBM Plex Sans and IBM Plex Serif, were selected to complement one another and ensure flexibility and consistency across the entire user interface.
The line spacing must also be considered as it has a significant impact on legibility and visual appeal. Adequate spacing improves the legibility and overall aesthetics of the text.
To ensure optimal legibility, we also paid close attention to the width of the text component on the grid: Users should be able to comfortably read an entire line without having to move their head, just by moving their eyes.
The combination of serifs and sans serif fonts, the deliberate use of words in capital letters and font styles ranging from light to semibold create variety. They all help with orientation and make it attractive for users to consume a lot of easily legible text on one page.
A Step by Step Approach
With a new structure in place, we developed a new visual design. We created wireframes and templates in agile sprints. We then took the new design system live as an MVP (minimum viable product).
Everyone Finds What They Are Looking for
The new structure strictly follows the needs of the users:
A simple and logical navigation based on the different phases of vocational education.
Trainers have access to general information in the glossary with more than 200 entries.
Employers and examination experts have direct access to important documents.
Experts will find in-depth information in 30 topic dossiers .
News on the latest events and developments are available to everyone.
Additional information, forms, services and the shop are linked where necessary.
Related topics at the end of the page offer relevant next steps.
This makes the new website a comprehensive platform with information on basic vocational training for all defined target groups and stakeholders.
For berufsbildung.ch, we needed more than just a facelift, we needed an entirely new concept. As a partner, Unic understood our needs, constructively questioned ideas/goals and developed creative solutions. We are very happy with the result.
Alexander Graf | Head of Vocational Training Media Department
Contact for your Digital Solution with Unic
Book an appointmentAre you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you.
