BMW
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.
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.
Similiar Projects
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. <br/><br/> When a client sought a custom financial solution built on Beancruncher, they turned to CubeZoo for their development expertise. CubeZoo spent significant time planning and designing the platform to ensure it met the needs of various teams and provided a great user experience. <br/><br/> With a production build spanning 18 months, this project marked CubeZoo's largest website endeavour to date. The success of the project hinged on meticulous planning and design, with CubeZoo dedicating significant time to producing a functional spec, creating user stories, and designing the user experience.
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. <br/><br/> After downloading the Cash4Trash SA app (for iOS and Android) and going through the recycling process, users can easily redeem digital rewards earned from plastic, aluminium, or glass bottle recycling using our RVM machines. <br/><br/> Once redeemed, users have the flexibility to share their rewards with friends or family or utilise them at popular retailers like Checkers, Game, Makro, Vodacom, MTN, Pick n Pay, and many others. <br/><br/> Cash4Trash isn't just about rewarding recycling; it's about fostering tangible change. By incentivising the proper disposal of beverage containers and mitigating the harmful impact of plastic, aluminium, and glass on our ecosystems.
Pfizer
Most cigarette smokers want to quit, but fewer than one in ten smokers succeed in quitting without the right support mechanisms in place. At CubeZoo, we believe in leveraging technology to create meaningful solutions that drive positive change. Our partnership with Pfizer Pharmaceuticals exemplified this ethos, particularly in our collaboration to support South African smokers in their journey to quit. <br/><br/> The app, called MyTimeToStart, educated smokers about the realities of smoking and used clever methods to engage their emotions to trigger them to quit. Ranging from money and fitness, to beauty and self-worth, the app emphasised the negative effects of smoking and the benefits of giving up the habit.
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. <br/><br/> When a client sought a custom financial solution built on Beancruncher, they turned to CubeZoo for their development expertise. CubeZoo spent significant time planning and designing the platform to ensure it met the needs of various teams and provided a great user experience. <br/><br/> With a production build spanning 18 months, this project marked CubeZoo's largest website endeavour to date. The success of the project hinged on meticulous planning and design, with CubeZoo dedicating significant time to producing a functional spec, creating user stories, and designing the user experience.
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. <br/><br/> After downloading the Cash4Trash SA app (for iOS and Android) and going through the recycling process, users can easily redeem digital rewards earned from plastic, aluminium, or glass bottle recycling using our RVM machines. <br/><br/> Once redeemed, users have the flexibility to share their rewards with friends or family or utilise them at popular retailers like Checkers, Game, Makro, Vodacom, MTN, Pick n Pay, and many others. <br/><br/> Cash4Trash isn't just about rewarding recycling; it's about fostering tangible change. By incentivising the proper disposal of beverage containers and mitigating the harmful impact of plastic, aluminium, and glass on our ecosystems.
Pfizer
Most cigarette smokers want to quit, but fewer than one in ten smokers succeed in quitting without the right support mechanisms in place. At CubeZoo, we believe in leveraging technology to create meaningful solutions that drive positive change. Our partnership with Pfizer Pharmaceuticals exemplified this ethos, particularly in our collaboration to support South African smokers in their journey to quit. <br/><br/> The app, called MyTimeToStart, educated smokers about the realities of smoking and used clever methods to engage their emotions to trigger them to quit. Ranging from money and fitness, to beauty and self-worth, the app emphasised the negative effects of smoking and the benefits of giving up the habit.