Boedelbak

Type
Website

Role
UX | UI

Agency
Fabrique

Redesigning for a new generation while respecting the old

Boedelbak is an iconic name in the Netherlands with trailer rental services at over 550 locations, offering a convenient and reliable solution for individuals and businesses needing extra transportation capacity on the fly or the near future. Boedelbak is so iconic that the word ‘Boedelbak’ is featured in the Dutch dictionary, known for their distinctive yellow trailers, Boedelbak has been the go-to service for moving goods, furniture, and more for over 50 years.

Creating a new website with flexible design system

The Boedelbak website redesign posed an exciting challenge: to create a modern, user-friendly platform that not only simplified the process of finding and booking trailers but also aligned seamlessly with a pre-existing booking system developed by Q42 for Avis. This system served as the foundation for the redesign, where we improved the UX for a better booking flow, including a new visual design that fit the values of Boedelbak. Before starting the redesign, we kept in mind that this design system could be used to create a similar website for Boedelbak’s sister company Pak ‘n Bak.

Old homepage

New homepage

Clarity and engagement

We started by analyzing the existing website, its structure, features, components, and visual style, along with its audience and AG Connect’s goals for the redesign. It became clear that the old design lacked visual hierarchy, with uniform fonts and color schemes making it difficult to distinguish key elements and sections. This insight shaped our approach, leading to a more structured and engaging user experience. We introduced a clearer visual style, content hierarchy, while including new features fitting for a modern and future proof article based website like AG connect.

Making a chore more fun and hassle free

Moving houses, clearing your garden waste, moving big furniture around… let’s be honest; the usual chores people use a Boedelbak for aren’t exactly ‘fun’. This is why a custom illustration style was developed to reflect Boedelbak’s approachable and practical identity, to make things a bit more lighthearted and cheerful. The style was adapted into the website, promotional items, and later the Boedelbak App.

Because it is important to show the dimensions and capabilities of each different type of Boedelbak, a 2.5D illustration style was designed. This enabled us to show what each Boedelbak could possibly be used for in a simple way, which would be harder if the illustrations were made in 2D.

Because there were no good photo’s available, I illustrated every Boedelbak type in a side and top-down 2.5D style, so each Boedelbak and it’s specific characteristics are is easily distinguishable, even when viewed in small sizes.

For a wholesome experience the style is also applied to other parts of the website, like buttons and other UI elements, creating consistency and making the process of renting a Boedelbak more than just a chore. Many illustrations were made for the website, explainer video’s and promotional materials.

Custom iconography

To accommodate the website’s new features and responsiveness, a custom icon library was created, with distinct icons designed for buttons and other UI elements. These icons are modernized interpretations of those originally designed for early computer systems by pioneers like Susan Kare, but without the technical constraints of the past.

The success of this approach extended beyond the project itself—the design system became the foundation for the redesign of the Pak ’n Bak website. Pak ’n Bak, a similar trailer rental business owned by parent company Spuigroep, required a system that reflected its unique brand while maintaining consistency with its counterpart.

Building on the solid design system established with Boedelbak, we expanded the design system by making a new theme in Pak ’n Bak’s style. The design system was updated in such a way that components and pages could be interchanged between Boedelbak and Pak ‘n Bak on the fly, making it easier for developers to make the Pak ‘n Bak website by using the Boedelbak website as a baseline. This project proved how a well-crafted design system can improve scalability and innovation.

Dismantling components for control and flexibility

Each component in the design system is built with a clear hierarchy, allowing for maximum flexibility and future use cases. For example, the article preview header enables designers and developers to easily adjust or toggle smaller elements like the category, meta data for reactions and reading time within a component, ensuring it adapts seamlessly to different screen sizes and page types.

Built for a dynamic grid system

As mentioned earlier, even a component like the article preview block was carefully designed to integrate with our grid system. It is fully adaptable across 8, 6, 4, and 2 column widths in both row and column layouts, with or without preview images. The component is optimized for mobile, tablet, and desktop views, ensuring a seamless experience across all devices.

New features to enhance usability and user experience

The redesign introduces several new features like a reading time estimate, a progress tracker to show how far along you are in an article, and an upgraded comment section to encourage more engagement with the audience. Additionally, the site now offers an index for easier navigation, along with options to share, save, or gift articles. A standout feature is the AI-powered text-to-speech functinality, allowing articles to be read aloud to users for a more accessible experience.

Custom subscription website

In addition to the main website, we also redesigned the subscription site to better highlight AG Connect’s various subscription options. With both digital and physical magazine subscriptions available, users often face different choices regarding type and frequency. The redesign simplifies this process by clearly displaying how each option impacts pricing and features, allowing users to easily compare and select the subscription that best suits their needs. This subscription website was also design as a part of the design system and can easily be modified for other outlets of Sijthoff media, like Adformatie and Business Insider.

View the website

Click here to visit the AG Connect website in a new tab.