GM Dealerships · 2021 - 2023
Deals & Reservations Desking Platform
What began as a hope I had to redesign the very rudimentary first version of the website became the basis for how General Motors received reservations during the Hummer EV launch.
I led the efforts in industry research / benchmarking, wireframing, iterating, user testing, and visual design. While the roadmap did not originally include this work, the stakeholders were so pleased with this redesign that my work was implemented in Connected Showroom Global.
Tools
Figma
Adobe XD
draw.io
GM Design System
Duration
~ 2 years
Sessions
Stakeholder Review
Design Critique
Step 0
Problem Space
In the wake of the pandemic, General Motors needed a way to continue vehicle sales on its Connected Showroom platform, which at the time, was mostly read-only and barely useable.
In the following years, with the worldwide slowdown on vehicle production and shifting of the sales model, they needed a way to take reservations for future vehicle orders.
Step 0
Proposed Solution
I saw the potential in the existing database of the tool, and set out to design an interface that could handle every step of the desking and dealmaking process, from lead generation to financial negotation.
Step 0.5
Evaluation of Beginning State
Since I had first been assigned to creating various other features for the site, it had been my hope to fix the “Deals” feature.
Its first version, which had been made without a staff designer, was a grid of cards communicating all information. It lacked hierarchy, its visual design was messy, it had a ‘stepper’ that was actually a progress bar, and its extremely low degree of functionality meant that barely any GM dealerships were using it, and instead turning elsewhere for a tool to manage their deals.
I created the flow chart to the right to demonstrate the evolution of realizing how the user should be able to move through the experience. The team had been treating the experience as a linear step by step process when in reality, car sales can start from one of many entry points (customers, vehicles, and trade-ins being the most common) and the user needed to be able to move back and forth between the subsections of information.
Step 1
Understanding Users & Developers
Since the tool had so far been designed via development and business collaboration, I wanted to understand what the potential users were and what the former “designers” felt the most pressing issues were.
I created several personas to better understand the problem space; understanding their journey as customers and buyers helped me to identify the gaps in Connected Showroom, bringing to light the need for new features.
I also conducted a retrospective with the project’s developers to understand their pain points and what the most pressing problems were in the system from their perspective. This built a bridge between design and development that allowed for stronger collaboration going forward.
Step 2
Future Vision + Wireframing
I now had documented several points of view from design, development and potential users as to what the main problems with the application were.
The first step in future vision design for me is always to create interaction flows. Since every feature in the site would likely lead back to the desking and dealmaking process, I created this sitemap to illustrate the different groups of information in Connected Showroom and how to best organize them.
The application held so much information within it, and none of it was being used to its fullest potential, with most of the site being read-only, and no inventory browser available. I envisioned a version of the tool with:
Reference materials on year-make-model specs and customization options
Ability to browse vehicle inventory
A dashboard system for employees’ metrics and communications
A browsable CRM/lead tool built from the customer information within the site
A database of incentives applicable to certain deals
In regards to the “deal workbook” section, I realized that the team had been focusing on a linear flow with a dedicated order of actions, where in reality, deals are not always completed in the same order of steps every time. After realizing the navigational quandary that was presented, I got to work drafting a new layout paradigm.
A space where the dealer could create a deal all in one place by:
searching their inventory for the desired vehicle
searching their lead tool for the customer or adding a new customer to the database
apply incentives to the deal based on the deal’s VIN and customer info
view and create appointments with the customer
take private notes on the deal
interact with the rest of the tool with the context of the deal informing the displayed information
The user starts with the above-listed necessary basic factors needed to create a deal, and then further tabs are unlocked, allowing them to move freely between certain groups of information, depending on how far into the deal they are.
It was a modular solution that satisfied both linear and non-linear workflows, and broke up the large amount of information into digestible groups!
Step 3
Usability Testing & User Interviewing
Next it was time to test!
Here, you can see the prototype I put together to test the new layout paradigm’s usability. Alongside my working partner I tested this prototype with 8 users from GM dealerships via usertesting.com. Included below is the presentation I put together summing up our interviewing and testing results.
Step 4
Design Refinement
After user testing, we discovered certain factors needed to be moved around or adjusted. Shown here is the first edition of the visual design for this overhaul, which accommodated the necessary changes and incorporated the internal tools design system and visual styling.
Stakeholders were incredibly pleased with this design, and the team began implementation. The new redesign was also used for the initial release of Connected Showroom Brazil.
Step 5
Bonus: A New Problem
From December 2021 to September 2022, I worked cross functionally with the Connected Showroom team to build upon the work done for our new Deals tool, to develop a Reservations experience allowing dealers to view information on incoming ‘prospects’ for their dealership.
The feature was used to process reservations for GM’s Hummer EV, Silverado EV, and other vehicle reservations and pre-orders. I was responsible for handling design work for this feature from ideation to delivery. The work was delivered via Figma.
Step 6
Refinement: Reservations Edition
With the foundation already built for us by my work designing the Deal Workbook interface, I constructed a version of the tool that allowed the dealer user to receive and process reservations for not-yet-produced vehicles.
The user is able to:
see customer contact and chosen vehicle information
view all history of actions taken on the reservation
discover where the vehicle is in its production journey
write notes on the reservation and correspond with other users
The designs were then integrated with the deal workbook interface, so that when the vehicle had been produced and delivered to the dealership, the reservation could be converted to a deal and the deal could be negotiated, signed and closed.
Step 7
Designing Responsive Versions
Mobile-responsive versions of both stages of the tool were also designed, allowing the dealer user to stay in the know on the go.
Since the design system used for internal tools was typically for web-only, I created a responsive design guide for my development team so that we could implement these modular designs properly. These guidelines were shared with other teams using the same design system to make their designs responsive.
