Designing a Recommender System for BMW
I started my work for BMW Financial Services in January 2020. I was going there to help the digital transformation of the company. BMW had released an online application that allowed customers to find and compare offers. But the application wasn’t performing as it should.
The Problem
By doing an evaluation of the user interface with Jacob Nielsens heuristics [1] I noticed a couple of design problems on the interface. Visual affordances for interactions were missing and the progressive enhancement could be bettered. But most of the things I found were solved pretty fast with a couple of lines of CSS. Besides one problem.
The application was creating a lot of cognitive load for the user. It used finance terms that not everyone was familiar with and presented a lot of choices to the user.
Nielsen gives some information about the problem.
#2: Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
The system didn’t speak the language of the users and overwhelmed them. The result was analysis paralysis so that the users couldn’t make any decision.
Since the site was tracked with Google Analytics and Hotjar I took a look at analytics to investigate further. What I found was user behaviour that matched the assumption of analysis paralysis. Users would continue to click through the search result page but rarely choose one car.
So what to do about it? Research showed different approaches. Christina Ou summarises common solutions in her article How Can UX Combat Analysis Paralysis? [2].
What mattered most to us was to reduce the amount of cars the user gets to choose from and to explain the finance options in layman’s terms. For this the most promising solution we found was that of a recommender system.
Overly simplified — for the sake of keeping it short — a recommender system can be described as an application that asks you what your preferences are and based on that recommends you items. See the figure below for a bit more details. Baptiste Rocca has written an impressive introduction to recommender systems on Medium [3] if you would like to dive in deeper.
So the team and I decided that BMW is going to get a recommender system.
Design Process
First things first. I did some research. What kind of recommender systems are out there? What works for BMW Financial Services?
Stakeholder Interviews
Assessing our technical possibilities with the team it became clear that we had to go for a knowledge-based recommender system, more specially a constraint-based recommender system. This system asks the users explicitly for their preferences, while other systems rely mostly on big user bases with lots of data. Knowledge-based systems are quite common when it comes to luxury products that are highly customisable and don’t get bought that often. Common examples for that are real-estate, financial services and automobiles.
To clarify the functionality of the system I brought together stakeholders in the company and let them discuss possible features of the application. This resulted in two main features.
- Assess best matching finance products
This should be done by asking lifestyle questions to the user. E.g. How many kilometers do you drive per year? - Assess best matching cars
For this users should be able to address their budget and what kind of car they would like.
Competitor Analysis
With these features roughly defined I took a look at competitors and how they are doing things. Soon I found that another car manufacturer already had deployed a recommender for assessing best fitting cars. They would let the user choose car characteristics from a list of features like Performance or Extravagance and then search for cars fitting those characteristics.
Wire-framing and User Testing
With these ideas I started scribbling lo-fi paper wireframes outlining a rough user flow and UI. This was an iterative process. That I discussed with my UX colleagues and potential users I had the chance to meet.
After each discussion new ideas came up and the UI and user flow solidified. It was time to move on to mid-fi wireframes and to generate the content of the application.
Get felixrossel’s stories in your inbox
Join Medium for free to get updates from this writer.
The main content for the recommender system had to be based around two things:
- A list of car characteristics and a matrix describing the cars with those
- Lifestyle questions and answers that would lead to a recommendation of a finance product.
With the help of the marketing team and product planning specialists I broke down key characteristics of BMWs cars and matched them on a matrix as well as defined the questions and answers to assess the right financial product. Figma allowed to map the questions and answers out so we could test and fine tune the results. With this content I was able to design the first mid-fi wireframes.
I conducted several walkthroughs and user tests with the mid-fi wireframes with colleagues and UX consultants and refined the process and interface.
It was at this point the developer was briefed about the presentation. We onboarded him already here to check for any possible technical difficulties.
After we got his ok and the UI components and user flow was clear a hifi-prototype was created based on BMWs design system. For that I finished writing the applications copy text and designed icons for each car characteristic.
The Hi-Fi prototype was discussed with all stakeholders and then was ready for development.
Development
The development would include three phases. The first one was the creation of the HTML and CSS screens for the application. The second one was wiring up the screens with the backend functionality and the third one was testing the application and bug fixing.
The first part was in my responsibility. I wrote the HTML and CSS code for the applications front-end. To ensure the readability of the code and ease of maintenance I agreed with the developer on using the CSS Framework Bootstrap. Bootstrap is one of the most used CSS Frameworks and has excellent cross-browser support as well as full-fills all accessibility requirements.
The HTML screens were filled with dummy data and then passed on to development for the backend integration. As soon as the main functionality was implemented we began with an extensive testing and bug fixing phase.
Launch and Promotion
After finishing the development of the application, the recommender system was published two weeks before the planned promotion start, to ensure a stable running application before driving traffic to it. To track the performance of the application Google Analytics was implemented.
The app was promoted on social media with both video and static content.
I was in charge of writing the copy and designing the ads. I prepared a couple of drafts. The winners can be seen here:
The finished application can be visited here:
https://yourbmwleasingthailand.com/bmw/car-preference
The application was received well by users and BMW likewise. I am very grateful that I was able to lead this project and successfully launch it. Any feedback and critique is always welcome. If you have any question don’t hesitate to reach out. More of my projects can be found on www.felixrossel.dev
Sources
- Jakob Nielsen and Rolf Molich. 1990. Heuristic evaluation of user interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’90). Association for Computing Machinery, New York, NY, USA, 249–256. DOI:https://doi.org/10.1145/97243.97281
- Ou, C., 2019. How Can UX Combat Analysis Paralysis?. [online] Medium. Available at: <https://medium.com/@christina.ou1228/how-can-ux-combat-analysis-paralysis-becc370e0e54> [Accessed 10 June 2020].
- Rocca, B., 2019. Introduction To Recommender Systems. [online] Medium. Available at: <https://towardsdatascience.com/introduction-to-recommender-systems-6c66cf15ada> [Accessed 16 June 2020].
