Autosync's: Build and Price
The MotoCommerce Build and Price (B&P) feature requires improvement and redesign due to a global inventory shortage. B&P is a critical tool used on dealership sales floors, but it has limitations and gaps.
Currently, B&P is based on virtual inventory and was originally designed as an in-store dealer tool. It now serves as a simplified one-page experience on the Vehicle Display Page (VDP), displaying all available configurations. However, customers can build their vehicles in any order, leading to conflicts, particularly for complex builds like pickup trucks. This negatively impacts the customer experience.
The current organic B&P has a conversion rate of 1%, while the Vehicle Description Page for accurate inventory performs better at 7%. The conversion rate from Original Equipment Makers (OEM's) B&P to MotoCommerce cross-channel is higher, ranging from 4% to 12%. These rates indicate that the current B&P experience is suboptimal for digital retailing. It is crucial to invest in the next evolution of MotoCommerce B&P.
To address these issues, the plan is to enhance and redesign MotoCommerce B&P to become a more effective lead generation tool. The objectives are as follows: (a) Improve support for complex builds (b) Enhance the intuitiveness of B&P for customers (c) Place greater emphasis on post-build steps
Given the complexity of the feature and its applicability to all brands in MotoCommerce, the B&P work will span multiple quarters. The Seamless Consumer Experience team will dedicate its capacity in Q1 and Q2 of 2023 to this topic. In Q1, the focus will be on expanding the application and introducing flexibility into the build steps. A proof of concept is expected to be delivered by the end of Q1.
In Q2, the focus will shift to the "Experiential" phase, where a user interface (UI) will be developed in accordance with our design system. This design aims to minimize friction and conflicts, guiding customers smoothly toward the Summary page.
The ultimate goal is to create a better front-end experience for MotoCommerce B&P by the end of Q2. This will address limitations, enhance intuitiveness, and emphasize post-build steps, making it a more effective lead-generation tool on dealership sales floors.
Objectives
My Role
Design Lead
As the design lead, my responsibility was to oversee the entire project from start to finish. Being involved in every aspect of the design process enabled me to develop a deep understanding of the project and make informed decisions based on research to create a suitable final solution.
This project was undertaken by the Seamless Consumer Experience Team, which consists of 23 engineers, one project manager, and myself. I dedicated a significant amount of time to running workshops and engaging in lengthy conversations to address complex problems. Through collaboration, we were able to deliver the final experience.
My duties and responsibilities included:
-
Managing and conducting user research and concept development
-
Working closely with marketing and product management teams to identify research topics
-
Collaborating with design, product management, content strategy, engineering, and marketing teams
-
Participating in recruitment activities for user research
-
Planning and implementing the overall user research strategy and methods
-
Mockup, prototype, and concept delivery
Team
Seamless Consumer Experience at Autosync
Duration
2 years
Tools
Figma
Miro
Confluence
The availability of images for this project may be limited due to its launch date.
Our Strategy
Initially, this project was presented as a redesign of our existing Build and Price system, which is outdated and lacks appeal. I approached it with a fresh perspective and started from scratch. Understanding our market was the first priority. I quickly realized that the so-called "direct competitors" or experiences we wanted to emulate were not directly relevant to our problem. While examining a similar experience on Rivian or Tesla, two industry leaders that I admire, I noticed their immense potential to create an exceptional user experience. The key factor was data ownership. These industry leaders have full access to all the necessary data, allowing them to deliver an industry-leading experience. Unfortunately, we were not in a similar position. We rely on data provided by OEMs and dealerships, and they determine what information we can display. Initially, I believed this was an issue that needed to be addressed. We had to find a way to increase the requirements for the data we received. However, to my disappointment, this was already an ongoing discussion and would take longer to resolve. Therefore, in the meantime, I focused on identifying competitors that could directly compare to us. I identified Roadster as our main competitor, along with SM360, Clutch, and others.
I began by creating an experience inspired by Tesla and Rivian but focused on realistic solutions that aligned with our capabilities and scope. I spent time building various vehicles, taking screenshots of conflict modals, and identifying areas for improvement in current flows. I conducted workshops, focus groups, and surveys with assistance from my project managers. They had direct contact with dealers and clients, following up on any unanswered questions.
The initial research phase had a quick turnaround time. From there, I narrowed down my areas of focus to step modularity, conflict resolution, and immersive experiences. I considered these three areas critical for understanding and decision-making. Building on this foundation would allow me to make well-informed decisions for the project.
The main insights I gained from this research were centered around creating a user-friendly, immersive, engaging, and informative experience. It was a challenging task, so my focus was on understanding the fundamentals of how Build & Price works and what consumers expect from this experience. By starting from scratch and finding ways to enhance its attractiveness and ease of use, I was able to make significant improvements.
Innovation
We set out to introduce a unique experience that aimed to bring together over 150 dealers and OEMs, providing a platform to build a vehicle in a way that made it enjoyable and engaging for our consumers. Initially, we faced challenges with data availability and imagery, which required us to think quickly on our feet to find a solution.
To address these challenges, we introduced Modular steps, a flow that allows the rearrangement of steps (categories) independently from one another. We implemented a set of 5 different conflict modals to streamline conflict resolution. Modular steps function by setting a parameter for the first and last step, while allowing the dealership or OEM to determine the order of the middle steps. This flexibility also enabled us to hide categories with data shortages or adjust the order of steps to accommodate new additions.
Each category consists of a main section and subsequent subsections. For example, the Trim & Configuration category includes subsections such as Trim and Drive Train.
This proved to be the best approach to our problem. We innovated on the current experience and designed a flow that could accommodate specific requirements requested by OEMs or Dealerships, without compromising the valuable experience that makes Build & Price appealing to consumers.
Elegance, Clarity
&
Emotion
We previously identified a focus on delivering a modular experience. This led me to shift my focus to another pressing topic: conflict resolution.
Conflict Resolution
One-size-fits-all
​
-
Consistent treatment, where everyone knows what to expect when conflicts arise
-
Easy implementation for engineers
-
forces us to hide certain selections, taking away from the consumer's ability to play and explore with configurability
I focused on minimizing the amount of conflict users would encounter when configuring their builds. It is well-known that configuring something can result in encountering options that are incompatible with each other. This can lead to frustration and cause consumers to abandon their builds. Our goal was to address these issues so that users could focus on the enjoyable aspect of building their dream cars.
Resolving conflicts requires a significant amount of time and collaboration with various stakeholders. We had to closely examine and map out all possible edge cases where users could encounter issues. For each problem identified, we worked on developing a solution. Eventually, we categorized these solutions into three use cases.
UC: Exterior colour does not conflict with Interior colour
-
All interior colours can be selected
UC: Multiple selections live within a single step
-
This applies to "Configuration" + "Color" (ext & int)
-
This does not apply to "Packages" + "Options"
UC: Exterior colour conflicts with an Interior colour that has not been selected
-
Do not grey out, but use messaging to indicate conflict and allow the customer to select it and potentially have to reselect the exterior colour
-
Grey it out and use messaging, but allow the customer to select it and potentially have to reselect the exterior colour
-
Grey it out + use messaging and deactivate the selection so the customer cannot select it in any case
-
Hide any conflicting interior colours so the customer cannot see them
Once we identified these three scenarios, I hosted an all-hands workshop with another designer, 2 PMs, and my director. The purpose of this workshop was to visualize the meaning of these conflicts and determine how we could solve them.
Next, I examined existing B&Ps and documented how they handled conflict resolution. I paid attention to three aspects:
-
How options behaved: Were they greyed out, hidden, or unchanged?
-
How conflict was shown: Did they use modals, error messaging, or hide incompatible selections?
-
How a solution was delivered to the user: Did the modal offer compatible alternatives? Did the user have to manually find compatible objects? Was it automatically changed for the user?
Based on these parameters backed by research, I propose two solutions to approach modal design.
Specific solutions for each scenario
​
-
Added work for engineers
-
Very specific guidelines for each conflict
-
Potentially could trigger an overwhelming amount of modals
-
We don’t have to hide options in order to stay away from specific types of conflict
I presented my findings to the team and initially advocated for solution two, which would provide a more personalized experience. I believed that removing certain options from users would make the experience formulaic and calculated, depriving users of the experiential and self-guided experience they expected. This aspect presented a challenge as we needed to find a way to display conflict through modals. However, based on my research, I knew that this choice was supported by other competitors and that introducing modals would not be unusual.
The team strongly opposed this idea because they knew it would require more effort to determine which type of modal should appear depending on the conflict. After numerous discussions and internal tests, the team eventually agreed with my recommendation. This meant that I had to create modals with specific guidelines on when they should appearInitially, I had identified three types of modals. However, during the development phase, we encountered additional conflicts in the back end, leading me to introduce two extra modals.
To optimize our platform and cater to various clients, it is crucial to design a modular experience that offers flexibility in each step. This approach avoids relying on a one-size-fits-all solution. Additionally, it is important to prioritize conflict resolution and design an experience that incorporates these challenges as integral parts of the overall journey, rather than viewing them as inconveniences.
Impact
The primary objective of this project, from a UX perspective:
​
to create a cutting-edge and engaging experience that leverages a substantial amount of data
The aim was to ensure that this experience is accessible and usable across over 150 different platforms. However, we faced significant challenges during the development process. Our main focus was on refining the core experience from the ground up.
One of the major hurdles we faced was the lack of ownership of our data. This created obstacles in accessing dynamic images, compatible protection plans, and available vehicle colors. To address this, we implemented a modular step flow and conflict-solving modals. Additionally, we collaborated with a third party to gain access to higher-quality images.
​
Looking ahead, we are excited and eagerly preparing for the launch of this cutting-edge experience in early 2024. This project marks a pivotal first step in redefining the direction of Autosync. Our goal is to pivot towards a modern, design-first, cross-platform experience that extends across Canada in the world of motocommerce.