ABUS

WEBSITE RELAUNCH

As part of the ABUS brand relaunch, the first digital design ideas for the new website appearance have emerged. The area of mobile safety, which includes bicycle helmets and locks, is the first to benefit from the new design – large, emotive imagery and bold typography that highlights both products and brand, as well as a sophisticated user experience.

01_Abus_casestudy_intro_devices01_Abus_casestudy_intro_devices

Digital Design

The design contains four main website templates as well as different modules, including a product and store finder, a product search and filter function, and a fully functional comparison tool to enable easy navigation of a complex product portfolio. A strong and extensive editable module toolkit, which allows website editors to tell rich stories and create landing pages on their own, combines both worlds – brand and product.

02_1_Abus_casestudy_digital_design02_1_Abus_casestudy_digital_design
02_2_Abus_casestudy_digital_design02_2_Abus_casestudy_digital_design
02_3_Abus_casestudy_digital_design02_3_Abus_casestudy_digital_design

Main Templates

The four main templates – home page, category overview page, product overview page and product detail page – enable a fast and intuitive route from the first touchpoint on the website to the respective product. All pages are designed to ensure fluid responsiveness and to adapt perfectly to all mobile devices and large retina displays.

03_Abus_casestudy_main_templates03_Abus_casestudy_main_templates

Design System

The Design System follows strict rules for every supported breakpoint. A percentage-based grid system with separate columns for UI elements and typography allows a highly flexible and responsive design with a state-of-the-art digital typography system.

04_Abus_casestudy_designsystem_responisve_hover04_Abus_casestudy_designsystem_responisve_hover

Colours

The ABUS main colours are translated from the brand design to ensure compatibility with digital interfaces. The use of paper white backgrounds allow a flat design.

05_Abus_casestudy_designsystem_colors_hover05_Abus_casestudy_designsystem_colors_hover

Typography

Creation of a detailed typography system with an elegant corresponding headline and copy sizes, including the signature red ABUS anchor.

Product Card

The product cards lay flat on the darker background, show more product information and also accommodate the comparison function.

Image Crop

An intelligent cropping system was created for images used on the website. This system ensures that the important picture information is displayed with a fluid layout at all times.

Controls

All control elements exist for different backgrounds and contain all relevant states and micro-interactions.

Icons

Custom icon sets for controls, UI elements and technologies were created to maintain the overall brand language.

Mobile Design

The responsive design includes a consistent and holistic approach to whole-screen design for both mobile and desktop. This enables a unique experience to be created – even on smaller devices.

12_Abus_casestudy_designsystem_mobile12_Abus_casestudy_designsystem_mobile

Photography: Michael Müller, Scott Markewitz
Renderings: KRB.BERLIN
Development: Interlutions, Inwebco