MODEL PAGE
OVERVIEW
The Ask: Redesign the model page; connect and inform the consumer on our product and offerings.
Client: Mercedes-Benz
Role: Senior Experience Designer
Duration: November 2017 – March 2018
The model page on mbusa.com was due for a redesign. The look and feel was outdated, and the excessive use of carousels and drawers made the vehicle information hard to digest. It was also difficult to compare various models within the same class, for shoppers that were trying to narrow down to a model they wanted to purchase.
As the Mercedes-Benz lineup currently consists of over 100+ models, the page had to not only be useful to the user, but also easily authorable and maintained by content authors. It also had to translate in French and Spanish, for the Canada and Mexico market.
We kicked off the project with a design workshop with the clients to answer the question: is the model page even necessary?
Mercedes-Benz is unique in the automotive industry in that there are class and models, whereas other automotive brands have model and trims (with no trim level pages). It was entirely possible to incorporate the model information into the class page itself. After mapping out the various ways users interact with the model page, it was ultimately decided that a separate model page was still fundamental to the shopping process.
When browsing vehicles, users fall in love with the vehicle on the class page, with beautiful imagery and interactive features. Once they can see themselves driving the vehicle class, the model page is the prenup — looking through all of the small details to make sure that the particular model is right for their budget and lifestyle.
Initial sketch of the model page
USER TESTING
This was the first major project on mbusa.com that the client approved funding for usability testing. User testing was a huge success - we conducted in-person testing for 12 participants across 3 markets, and gained key insights about the page that neither we nor the clients expected. Using sketch and InVision, I was able to make iterative updates to the prototype after each testing location to refine the page to where it is today.
KEY fiNDINGS
We learned that the expectations and desires for the model page varied wildly depending on the person. It makes sense, as everyone who comes to the site is in a different step in the shopping process - either they are casually browsing, starting their research, or actively looking for a car to buy. In addition, everyone has different interests in a car, whether it was detailed specs, or features that are important to them (e.g. safety vs performance)
All of these findings proved to our clients that personalization is critical to the mbusa.com experience, so that we can tailor as much of the content and experience for the user.
As this was our first real user testing for mbusa.com, we also took the opportunity to delve into how our participants felt about the brand, electric cars, and buying a car online, which was really helpful for our clients. (spoiler alert: the majority of our testers were not ready to buy a car online, nor were they ready to dive into the world of electric vehicles).
The model page launched as an MVP, and it outperforms the legacy model page in almost every way.
There are plans in 2019 to add more functionality to the page as origInally designed, including a model comparison matrix, integrated dealer inventory and more.
Redesigning the model page was my first project to involve usability testing. I learned about creating test plans, test scripts, and the various tools out there to conduct testing. Taking a step back and observing real users was an eye opening experience — and made me realize how much I take for granted being familiar with our product, and even using the internet in general. I found this to be a truly valuable experience, and has changed the way I think and design for future projects.
