Mercedes-Benz Configurator
(Build Your Own)
Methods
User interviews, competitive analysis, data research, journey mapping, wireframes, prototyping, usability testing
Impact
Most notable on mobile experience: Users were 75% more likely to save a build/create a profile and 45% more likely to continue to inventory.
Original BYO Experience (2019)
The Challenge
Build Your Own (BYO) is the most accessed page in mbusa.com and one of the most important features in the shopping process, allowing users to plan and get excited about their dream vehicle. The last design/function update of BYO was in 2014 and was overdue for an update at the beginning of 2020.
KPIs
Increase saved builds/profile registration
Increase traffic to inventory
Increase ‘completion’ of builds (reaching summary step)
Research
-
Competitive Analysis
We began with a competitive audit of luxury car brands (Audi, Genesis, BMW, Tesla, etc) to determine what was industry standard. We liked the modernity and interactivity of the Genesis BYO, but felt our current experience was on-par with the majority of our competitors.
-
User Interviews
We conducted a short bout of quick user interviews with 6 participants who were currently or recently shopping for a new luxury car. We spanned an age range of 25-72, asked about mobile vs. desktop preferences, spoke about likes and dislikes of BYO tools they used and any frustrations they encountered dreaming up their perfect car.
-
Data Pull
We requested current analytics from our data science; such as, where users were coming from and where they went next, how long they were on the build, which steps were most popular, how registered users analytics differed from guests, device stats, etc. Most importantly, we looked at how many users ‘completed’ builds (made it to summary), saved builds, and went from BYO to inventory.
Design
Concepting
Mobile first. This became our waypoint during the design process. At this time, approximately 65% of our users were visiting on mobile devices and the current experience was not optimized for that experience.
Our main parameters laid in the fact that we had to keep the skeleton of the design the same. We identified several areas to set our sites on for enhancements:
The navigation flow through the experience. The modernity of the design. Accessibility. The Widget.
We spent two weeks concepting and sketching until we arrived at our ideal core experience.
Wireframes
We spent approximately two months creating and iterating wireframes for this new experience, paying special attention to accessibility. We worked with tech to create a feasible experience and went through workshops and reviews with our stakeholders at MB.
We found opportunities to leverage our personalization tools on the summary step to use our algorithms to recommend similar, in-stock vehicles to the user. We also vastly enhanced two prominent features, which I’ll discuss below:
The Widget
“The widget” was our most innovative enhancement. On the original experience, this was a box that lived on the hero image providing breakdowns of the products that were added to the build, as well as pricing information and CTAs (Save and View Inventory).
In the old experience on desktop, this limited the size of the car that could be displayed and meant users had to scroll up and down constantly to view the information. On mobile, all of this lived in several short collapsable drawers at the top of the screen.
Using the mobile-first mentality, we decided to create a sticky bottom bar that would function as a large drawer and house all of this information. This created easy access for users’ thumbs and the CTAs became two of the most prominent items on the page.
For desktop, we leveraged the same sticky drawer functionality, however off in the corner of the page. We also added a “Next” button so users could quickly navigate step-by-step through the process conveniently instead of going to the navigation at the top of the page.
The Navigation
Hierarchically, we wanted to place the “Steps" in a location that conveys more overall progress. Since the main image refreshes depending on the step a user is on, we decided to move the new navigation tracker above the car’s image.
The big update came in mobile, where instead of jumping to steps via a dropdown list, users could side-swipe through the navigation to see every step and navigate accordingly. We wanted to bring modern patterns into this mobile experience.
Invision Prototype
Usability Testing
Using Invision prototypes and a third-party moderator(Sachs Insights), usability testing was performed on 8 users on both mobile and desktop experiences.
In preparation for the testing, our team created the testing script to be used by our facilitator from Sachs Insights. Our script guided users through a flow of completing and saving a build and prompted exploration of the new features (particularly the sticky widget). We aligned with our facilitator before the remote testing began to guide her through our goals and points of interest for her to dig into.
Overall, testing was a success. Users quickly moved through the flow and positive comments were received on mobile about the sticky widget. We had a few pain points regarding the widget on desktop (easy to miss) and iterated to make it more prominent. Users found it aesthetically pleasing and many were more interested in going to inventory than seeing a summary of their build.
It went live.
Let’s look at the data.
Impact
-
Saved Builds
Users are 75% more likely to save a build on the mobile experience and 10% more likely on desktop.
-
Inventory Traffic
Users are 44% and 7% more likely to go to inventory on mobile and desktop (respectively).
-
Complete Build
Users are less likely to reach the summary page (-19% mobile, -15% desktop), but we attribute this to more users going to inventory earlier on.
