Jason Shun Wong

BMW Financial Services

BMW Financial Services China (中国) required a website and app for prospective car buyers to utilize before purchasing a car. Previously, the process was a mixture of digital tools and analog forms that made the process incredibly complicated for dealers in China to track and collect all the information necessary to purchase a car. I led a small team tasked with aggregating all the components of the process in order for both applicants and dealers to track the progress of applying and to use the website and app as a means to communicate. The project included both a web and mobile application process that sought to provide timely and meaningful information to all the stakeholders.

Year
2016

Discipline
Interaction Design

Responsibilities
Information Architecture, User Mapping, UX, Usability Testing, Prototyping, and UI

Information Architecture

A huge task that included identity, address, and income verification; the process of buying a car included more steps than in America. We incorporated facial and ID scanning to reflect the necessary steps to comply with BMW’s requirement. Because of the complexity and the amount of personal information required we reduced the information visible to the applicant at each point to not overburden them throughout the process.

UX

Website Wireframes
This navigational style works top to bottom and left to right for simplicity and clarity. Wireframes were created to be tested in an InVision click-through prototype. Due to time and budget constraints, I tested the prototypes with the team and our office assistant, Deliah, who had no prior knowledge of the project.

Design Rationale
For the secondary menu during the application process, we wanted to allow users to preview what items to complete, show completed progress (checkmark) and selected states (black text) to keep users focused on the task at hand.

We opted to use labels above the fields for better legibility. Users wouldn’t have to scan left and right to remember the field label. Instead, the labels are grouped in the same visual space as the input field. 

1. Primary Navigation
2. Secondary Navigation
3. Fields

Wireframe Testing
After testing, we simplified some of the steps to reduce complexity. For example, we grouped employment details and financial property into the basic info section.

App Wireframes
As the mobile screen is much smaller than a website we were challenged to maintain the same experience but not to overburden the user. We introduced modal states (e.g. writing in an email) to help users focus on one task at a time when selecting the features of their car, the modal states allowed for the main page in the select vehicle section to act as a record for users. To prototype this interaction an InVision prototype was also created.  

Design Rationale
Small cues such as the numerical steps helped inform users where they are in the process. Additionally, the checkmarks are used in the same way as the website notifying users of the completion of a subtask.

Testing
We learned the users were distracted in the select vehicle flow and decided to use more modal states (e.g. writing an email), seen in the chat, so as to not distract and allow the user to be focused throughout.

UI

The UI direction for BMW financial services had to comply with the BMW design standards. Button styles, colors, and imagery were strictly enforced. Because of the standards, we focused on clarity and usability to provide an engaging experience that wouldn’t task the user throughout the car buying process.

BMW Introduction Page
The introduction page’s goal was to provide discrete amounts of information that guided the first time user into the application process. We elected to display the app at the bottom of the page as we wanted to focus on introducing the whole process from application, approval, test drive, payment, and pickup.