BMW refreshed the way it looks and because of that, new elements for the website had to be created; old modules were updated and a cohesive single point of truth for the UI was needed. In addition, responsive screens, WCAG compliance, and Right-To-Left designs were built for every new component.
Research and concepts
Invision / DSM
Pen and Paper
BMW wanted a more cohesive experience throughout all of their products. Typography had to change on the whole website - this lead to testing, re-arranging components, and deciding what is the best way to use the font.
Analysing the current way typography is used, identifying cases where the new font could potentially be problematic, therefore making decisions to not disrupt the concept and logic of the website.
Designing, prototyping, and testing the new font and interactions.
Iterating design based on feedback and creating final deliverables.
About the typeface
The typeface chosen was BMW Type Web Light All which is a thin, Sans Serif typeface with simple geometrical forms. It only comes in one weight, therefore copy text was replaced with Arial for better legibility on all screens and devices. For all other interactions, the font remains bolder to achieve better legibility and be prominent enough within the call-to-actions, navigations and links.
Modules and optimisations
I helped create modules and also optimise existing ones. Several components needed to be refined to serve the user in a better, more efficient way. Small details needed to change and be updated and adjusted for the user to differentiate the actions.
Tap & Hold Component
We had to create an interactive way for the user to go through the stories that went beyond a simple play button. This component allowed for a longer interaction to discover more details about the product; when clicking or tapping, the video would then start playing and stop only upon release.
Test Drive Pop-Up
The website recognises when a user has visited the same vehicle 3 times. Once this happens, there is a pop-up that suggests the user tries a test-drive. I came up with a visual solution as to how this would work for each vehicle. The banner automatically replaces the cars based on the model/vehicle the user is looking at. The background changes as well, all with the same view and perspective, look and feel, and the vehicles are positioned in a similar manner.
The goal was to create a UI Styleguide based on the existing and new elements. Documentation and Invision DSM were created in order to ensure consistency and maintain a cohesive experience at the end. This styleguide was created to be used by BMW and anyone involved in the projects, ranging from POs, to designers, to developers.
Atomic Design Methodology
Grid spacing for structure
A high level of communication
Working for BMW, I was one more time reassured that design is an iterative process. I learned more about UX, research, and how important it is to learn the history of a project in-depth. I also learned how to understand the needs of the user by focusing on user feedback and always striving to deliver a better experience.