BMW

web platform

automotive industry

BMW

Even businesses that have been around since the 1920’s need a great digital presence. When BMW’s motorcycle division, Motorrad, decided to create a website app in 2016, cross-browser compatibility quickly made them hit the breaks. CubeZoo took up the challenge, creating an interactive web app that would allow biking enthusiasts to take a road trip around South Africa via a digital roadmap of on-road and off-road trails.

Not only did CubeZoo enable an unforgettable online journey, we ensured there were regular pit stops. At each of these pit stops, the user could enter the pitstop and browse Motorrad’s range of motorcycles and accessories, change the colours of the bikes, and even listen to them rev their exquisite engines.

client

BMW

duration

3 Months

resources

services

- Design

- Development

Design Direction: Mood Board

context

When crafting the mood board for BMW, we selected a palette of colours, typography, imagery, and visual elements that harmonise with BMW's brand essence of sophistication, precision, and cutting-edge innovation.

what we did

With BMW Motorrad, we embarked on a journey of meticulous craftsmanship, blending dynamic colours, refined illustrations, and elegant typography with elements reminiscent of automotive innovation to shape the application. This deliberate fusion of creativity and precision empowered us to sculpt a visual narrative that deeply resonates with BMW's dedication to excellence and driving pleasure. Our mood board acted as a guiding compass, steering the design course for the BMW Motorrad web application. By immersing ourselves in BMW's brand ethos and market standing, we curated a mood board that not only encapsulated their essence but also ignited ingenuity and nurtured synergy throughout the design expedition.

Style Guide

Design Elements

In BMW's automotive universe, a digital style guide is the compass guiding consistency. It defines typography, colour palettes, and layouts, enhancing brand recognition and user experience. It's a must-have for BMW's digital journey, ensuring every touchpoint exudes the brand's signature sophistication and precision

Colors

Typography

User Experience (UX)

In our collaboration with BMW Motorrad, our mission was to enhance the user experience (UX) by designing a web application that seamlessly integrated with the brand's ethos.

This app went beyond mere convenience, offering ease of use, personalised motorcycles, and crafting tailored challenge level roadmaps for both on-road and off-road trails.

Our journey began with a meticulous process, starting with the creation of wireframes. These wireframes acted as the blueprint for shaping a user-centric interface, emphasising intuitive navigation and seamless functionality.

By focusing on key features and incorporating BMW Motorrad's iconic design principles, we ensured that the app delivered a seamless and satisfying experience for every rider.

User Interface (UI)

Amidst the dynamic landscape of UI design, our alliance with BMW set the stage for an electrifying journey centred on seamlessly fusing aesthetics and functionality within their digital domain.

Taking cues from BMW's iconic design language, we embraced a sleek, minimalist aesthetic characterised by clean lines and precision engineering.

Our approach prioritised user-centric design principles, creating an inviting ambiance that beckons users to explore BMW's world of innovation and luxury.

Riders entered the captivating realm of BMW Motorrad's digital interface, where each interaction resonated with the thrill of hitting the open road and embodied the ethos of automotive excellence!

Our Challenge

Have the site load fast enough to retain customers’ attention and interest

Back then (In 2016), older browsers – Internet Explorer in particular – were still semi-mainstream. As a result, these browsers provided a number of technical challenges. Primary among these was the requirement to have the site load fast enough to retain customers’ attention and interest. The size of the app was therefore a massive factor.

In addition, BMW Motorrad embarked on an advertising campaign that shared the web app link via QR code in major print publications. This meant that the web app had to function and look equally good on smaller devices. CubeZoo had to figure out how to maintain the same memorable feel that people were seeing on larger screens and translate it onto a smaller mobile screen.

Our Solution

Implemented multiple pre-loaders to ensure the display on smaller screens was possible and offered a richer experience

We wanted to take the brand and give it its own feature digital space. This required thinking outside the box and using an agile approach. Careful planning was essential to the success of Motorrad’s digital initiative, and CubeZoo worked with and prototyped the heavy lifting challenges first. This meant that we worked backwards to complete the rest of the web platform, dealing with large file constraints and smaller screens.

By implementing multiple pre-loaders that would load just before executions were required, we ensured that displaying the web app on smaller screens was possible and offered a richer experience by forcing the user to orientate their device to landscape. This offered a wider and a more joyful journey experience, and allowed us to create a customer experience that allowed motorbike enthusiasts to take their BMW experience to the next level.

Similar Projects

SignalXpress

We had the privilege of collaborating with SignalXpress, a dynamic force in the beverage industry, since their establishment in 2012. With a steadfast commitment to crafting, producing, and delivering the most innovative beer and alcoholic beverage brands, SignalXpress has emerged as a leader in the field.

Cash4Trash

Cash4Trash is dedicated to revolutionising recycling practices across Africa, empowering communities while preserving our planet. Their innovative approach introduces the concept of green currency, incentivising individuals to participate in environmental conservation efforts.

Beancruncher

Beancruncher is a website platform that simplifies financial reporting for businesses. It integrates with major accounting software such as Sage, Xero, and QuickBooks, helping companies understand their financial data, create reports, forecast the future, track progress, and benchmark performance.