Due to the level of confidentiality, I have omitted specific details regarding my process and designs. Any information in this case study is my own and does not necessarily reflect the views of General Motors or MRM. Please reach out directly to learn more.
Imagine yourself as the owner of a landscaping business that has been growing rapidly in the past year. You are looking to expand your business and need to double your fleet of work trucks to support the growing demand of your services. As a relatively small fleet, you’ve worked with local dealers to support all of your fleet needs up to this point.
However, you will need help transitioning to a larger fleet.
Am I eligible for any discounts as a fleet manager? What financing and leasing options do I have? Which vehicles will be a good addition? Do I need to upgrade any vehicles in my current fleet?
Given you are not sure how to navigate the world of larger fleets, you decide to work directly with GM Fleet to optimize your business. You go to GMFleet.com to connect with a GM fleet representative and find more information about the vehicles you might need to add to your fleet.
I was the UX lead on this project - discovery and ideation, requirements gathering, interaction design, user testing. This was a large-scale effort as it required a complete redesign and migration of an existing website to an entirely new platform and design system. The whole team consisted of roughly 50 people, including business stakeholders, PMs, frontend developers, backend engineers, visual designers, analytics, and QA. However, in my day to day project work, I worked closely with a smaller team of ten consisting of program managers, developers, creative directors, and the business client.
From the initial kick off to official launch, the entire project spanned a total of 12 months.
GM Fleet was the fifth GM brand to leverage the Quantum design system. As the first B2B brand on the platform, its successful redesign and migration demonstrated the flexibility of the design system to support the build of unique products within the GM ecosystem. Since launching in 2019, two additional B2B brands have migrated to the Quantum platform to launch their web products.
As GM continues to make their EV future vision into a reality, GMFleet.com remains an valuable asset for the business to stay competitive in the ever-growing EV fleet space.
Through conversations, data, and research, it became clear that the users’ main purpose for visiting the website was to fulfill their daily job duties as fleet managers. Whether they were fleet managers for a mid-size landscaping company or responsible for managing a fleet of 100+ vehicles for the public sector, their primary goal was to quickly find information - specs, dimensions, functional use of vehicles, images of up-fit options, and so on.
The problem: finding information, like vehicle specs and pricing details, is a key task for fleet managers doing their job, but the original website did not prioritize a task-oriented experience.
The lack of clarity in content structure and research tools resulted in missed opportunities to convert new business. How could we enhance the website to make it more productive and useful to our users?
To ensure the redesign aligned with the users’ expectations for the website, I focused my efforts on two primary goals:
1. Help fleet managers of varying fleet types and sizes connect with the business representative that is right for them.
2. Ensure the website’s navigation and tools support a seamless research experience for fleet managers needing to do their jobs efficiently
To give fleet managers a quick and easy way to find the fleet representative that is right for them, we introduced a refreshed Sales Lead Bar.
The Sales Lead Bar (SLB) in its default minimized state. The component is a sticky element on the page - it can be activated or hidden on a page by page basis.
The Sales Lead Bar (SLB) in its default expanded state
Before jumping into designing the interface, I wanted to gain some insight on the relationship between our primary users, the fleet manager, and fleet representatives to identify the most important elements of the design. By assessing the fleet manager’s perception of the fleet representative, I was able to gain a better understanding of the users’ expectations to inform the design.
I plotted other customer to business agent relationships in a graph to see how they would compare to relationship I was solving for. The fleet manager to fleet rep relationship fell somewhere in the middle in terms of personal connection and longevity of the relationship.
While most GM Fleet-related business is impersonal, and sustaining a long-term relationship did not appear to be a top priority for customers, we wanted users to have a positive perception of the large network of Fleet reps available to them. This meant we needed to design trust into the final design.
Keeping this in mind, success meant the redesign of the Sales Lead Bar would increase engagement levels and foster stronger, more long-term fleet manager to business rep relationships, resulting in stronger business outcomes.
I took at look at how other industries reflect customer to business relationships online to draw inspiration for the Sales Lead Bar design. The purpose of this exercise was to ensure that the new design would meet user expectations around the level of information they’d expect to see about business representatives, while also supporting a positive, more friendly perception of GM’s fleet representatives.
To find a good balance between impersonal and personal, short-term and long-term relationships, I explored different layouts for the Sales Lead Bar and experimented with varying levels of information. This was an iterative process. I consulted with visual designers and other ux designers. Through further discussions with the business stakeholders, I landed on three key pieces of information about the fleet representative that matter most to the user:
1. Fleet rep’s name and picture
2. Fleet size they service
3. Location (state)
Medium / large viewport, default display on page load
Small viewport, default display on page load
For the smaller viewports, we kept the layout simple and displayed a generic “Email a Fleet Rep” label. Through conversations with business stakeholders, it became clear email was the preferred method of communication for fleet reps as there was already a backend system in place to funnel emails to fleet managers. User testing validated this amount of information communicated a strong enough indication for mobile users that there would be more information upon interaction.
The next central feature of the Sales Lead Bar I needed to rework was the fleet rep cards. A simple layout refresh allowed users to find the right fleet rep for them in regards to the fleet type, the fleet size, along with two ways to get in contact via email and direct phone number. The clear visual hierarchy of information resulted in easier finadbility and readability for users looking to contact the right fleet rep for their specific fleet needs.
To ensure fleet managers found the right fleet rep for their specific fleet needs, we introduced a new way for users to filter fleet reps by type and location.
Solutions:
- Jump to the filter card to change Rep Type and Location at any time in the SLB
- Geolocate the user’s location
- Ensure the rep type set on the Sales Lead Bar is reflective of the topic of the user’s page on the site (i.e. if a user is on a goverment fleets page, automatically display government fleet representatives in the SLB on that page).
To help users who manage smaller fleets, we introduced a default “small fleet” card that sits second to last in the list of cards in the SLB. This “small fleet” card was designed for customers who are not necessarily the primary users of the site. The card includes the necessary detail to make it crystal clear for fleet managers of small fleets to locate and contact a dealer, not a fleet rep. This supports the GM Fleet vision to cater to all fleet sizes.
Previously, fleet reps were getting swamped by calls from dealers across the country. To prevent these misdirected calls, the new SLB includes a small line of copy visibly positioned at the bottom of the new SLB to direct dealers to the department that specifically handles dealer support.
We leveraged the SLB fleet rep cards for another new component. This new component gives users another way of seeing and discovering fleet reps by type and location - used inline on the Contact Us page. By presenting consistent UI to users in other areas of the site, users can navigate the site with more intuition and familiarity.
A different filterable fleet rep component leveraging SLB fleet rep cards
In addition to the Sales Lear Bar, there were higher-level navigation goals for the new site. The original site lacked a clear navigation, preventing users from being able to research vehicles easily.
A successful redesign would need to increase easier findability of vehicle specs and consolidate a fractured research experience into one that is streamlined via the main navigation and a revamped vehicle finder tool.
Through research, we learned that the old site’s navigation was not very clear to users. The content inside the navigation links were not accurately aligned with user expectations, resulting in a frustrating navigation experience.
Solutions:
- Simplified the link structure with information organized into intuitive content groups
- Clear delinenation between main content buckets and “Contact” & Search
- Responsive navigation - stategizing which links to make visible at smaller viewport sizes
The original vehicle flyout broke down the different ways of researching vehicles too granuarly within a small space, resulting in a fragmented organization of vehicle segments and categories.
The new Vehicle flyout was simplified to support the ability for users to quickly scan and pick a vehicle segment. This new information architecture was validated through user testing.
Along with the improved main navigation structure, I also re-architected the site’s overall navigation to support the user’s research-oriented tasks.
From the navigation and vehicle flyout, we pathed users straight into a vehicle research tool, instead of any one specific page. User testing revealed that this new flow aligned with user expectations. It also validated the tool’s effectiveness as a simple and intuitive way of finding specific vehicles
The new pathing strategy leads users directly into a research tool experience where they can further refine their search by vehicle segment, brand, and price, which are all important factors to fleet managers looking upgrade and/or add vehicles to their fleet.
This was a really exciting and fun project for me to work on as it provides real value to fleet managers and GM. I had the opportunity to be involved in large research efforts and detailed interaction design work within a collaborative cross-functional team setting. This project also taught me the importance of standing firmly by good UX by embracing time, business, and technical constraints.