Portfolio
Samsung_galaxy_s5_flat.gif

BMW

 

Overview

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.

 

Agency

Interone

Role

UI Designer

Tasks

UI Design
Research and concepts
Styleguide maintenance
Interactive Prototype
User Testing

Tools

Sketch
Illustrator
Confluence
Jira
Principle
Invision / DSM
Sticky Notes
Pen and Paper

 

Typography Change

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.

 

Approach

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.

UXS-UseLab-SR-1_default+%28Validation%29.jpg
 
 

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.

 
1510.jpg
 
BMW_Browser-Mockup.jpg
 
 

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.

 
BMW_Apple_ipad_air.gif
Samsung_galaxy_s5_flat.gif
 
 

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.

BMW_testdrive.png
 

Styleguide

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.

 

Method

Atomic Design Methodology

Tasks

Documentation
Font testing
Iconography
Grid spacing for structure
Research
A high level of communication

Perspective-Web-Design-Mockup.png
 

Takeaway

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.