THE PROJECT

Redesign and modernize the BMW BYO to be responsive across all viewports and devices. Create a branded experience to educate prospective customers and generate leads. Design an intuitive configurator to serve as a tool for customers and BMW dealers to reference when shopping for a BMW.

MY ROLE

• Perform heuristic and competitive analyses of the existing platform.

• Test and analyze the biggest funnels (Usertesting).

• Determine all pain points and offer solutions.

• Synthesize business needs and requirements.

• Wireframe the interface and interaction experience.

• Discover the paths of least resistance to submit a lead and streamline the lead submission process.

• Design a cutting edge responsive BMW brand experience.

With over 120 unique models, there is a BMW for everyone.

• However, finding the perfect vehicle may require some digging.

• BMW categorizes their vehicles as series. Within these series exists body styles, of which have varying models that also come in powertrain variants.

• To the average consumer, this taxonomy and level of specificity proves to be a difficult inventory to navigate without the use of filters.

Vehicle Selector

• A new model selector page was designed to help prospective customers navigate through the BMW inventory with ease and legible descriptions.

• This experience educates the user on the BMW taxonomy while showcasing each unique vehicle without overwhelming the user.

• After rounds of iterations and testing, the model selector page serves as the first step the BYO process.

Interface Layout

• The original grid layout of the models has been redesigned to display each series in a list layout.

• This allows for the each series to showcase the multiple body styles that exist. 

• The list layout also adds a cadence to the browsing experience. Every interaction with each vehicle engages the user and helps to make an educated selection.

• Users can swipe and click through vehicles within the selected series to browse through body styles.

Vehicle Models

• Once a user has selected a series and a body style, a model can then be selected. The user can also select a powertrain variant. 

• This iteration allows users toggle xDrive on and off in their selection as opposed to listing out BMW 330i and BMW 330i xDrive separately. This toggle reduces the number of models shown by half. 

• Further iterations to the xDrive toggle have been made and redesigned as tabs. Users can now select between sDrive (Rear-Wheel-Drive) models and xDrive (All-Wheel-Drive) models separately. This tab system helps educate customers on BMW nomenclature.

After a vehicle is selected, the configuration process can begin.

• The build process has been broken down into a seven stop process.

• At each step of the build, vivid imagery and descriptions have been designed to immerse the user into a virtual workspace with a vehicle for a BMW for a canvas.

Configurator Tools + Conflicts

Usability testing revealed a number of pain points:

• No clear "Next Step" button

• Disclaimer text is difficult to read

• Conflicting selection messages are cryptic and difficult to resolve the invalid selection.

Iteration 1

Pain points were addressed and iterations were made to alleviate design flaws that hindered the build process.

• Build Navigation is granted more visibility for way-finding.

• A sticky toolbar navigation was added to the bottom of the canvas to display pricing information and CTAs.

• Option titles and descriptions were elevated in position.

• An ancillary toolbar was added to the left to house additional tools and links.

Iteration 2

• Build Navigation was moved to the top for better visibility

• A "New Step" button was added to help progression.

• The image container was expanded to better showcase the vehicle.

• A gallery that rotated the vehicle was added to display different angles.