DealerHome

CarNow l 2021

Overview

CarNow provides a backend product for dealers that seamlessly interlocks and communicates with consumer-facing products such as BuyNow and MessageNow.

The DealerHome project is crafting an entirely new backend hub for dealers, which updates in real-time as customers advance through their online car-buying journey. It is built upon CarNow's old backend product, incorporating new features and UX/UI.

Team

CEO
SVP of Product
Product Managers
Product Designer
Engineers

My Role

Product Designer

Design Process

User Research - Competitors Research - Define Problem & Propose Solution - Dealer Persona & User Scenario - User Flow - Wireframe - Interface Design - Clickable Prototype - Internal Review - Develop - Beta Test - Revise Interface Design - Develop

1. User Research

To find a problem,

The product manager interviewed dealers who are utilizing CarNow products. Numerous dealers emphasized that the outdated backend UI featured a linear consumer buying process, which did not align with the sporadic car-buying journeys of customers. Additionally, dealers faced challenges in real-time tracking of consumers' online activities during the car purchase process.

We also examined the screen sizes of dealers' computers. Given our constrained time for design and development, we initially set responsiveness aside and opted to concentrate on specific screen sizes, with the intention of making it responsive later on. After our investigation, we decided to start by focusing on larger screen sizes and incorporate responsiveness a few months later.

2. Competitors Research

Among the process's most challenging aspects

Due to the exclusivity of backend products from other companies to their own customers, my team asked dealers who are transitioning from our competitors' tool.  Dealers showcased how they utilized it with existing features and problems, before losing their access.

Competitor

DriveCentric

Features

  • Support dark mode
  • Provides learning center
  • @mentions are used to communicate.
  • Sales pipeline

Discomfort

  • The search requires an exact match to yield results; there is no smart search functionality.
  • There is no notification or automation when a high-demand Vehicle of Interest comes in.

3. Define Problem & Propose Solution

Problem Statement

Dealers cannot monitor consumers' online car-buying activities and this disables the dealers to anticipate what lies ahead and guide them in finalizing vehicle purchases. This problem led to a low closing rate.

Solution Statement

DealerHome provides a backend experience for managing inventory vehicles, allowing dealers to set and receive notifications for wishlist vehicles. It also enables dealers to monitor and manage online consumers' activities using the Live Action feed, which updates in real-time as consumers make changes to their deals.

4-1. Dealer Persona

4-2. User Scenario

Trigger

An online consumer Gabriel finds a vehicle he likes and starts working with the numbers on BuyNow. Calvin receives a notification that a new prospect has been generated.

Action

Calvin opens the Gabriel's profile and observes the numbers and the vehicle that he wants to trade-in on the old backend.

Frustration

Calvin can only see the last numbers that Gabriel put in. The lack of records on numbers that Gabriel worked with leads to uncertainty on how Calvin can guide him with the pricing. Calvin is also busy with other customers who showed more interest before Gabriel. The next day, the manager informs Calvin that Gabriel's trade-in vehicle is popular among other consumers. Calvin wants to buy Gabriel's trade-in vehicle and sell him a vehicle of interest, but unfortunately, Gabriel already made a deal with another dealer.

Solution & Reward

Calvin's dealership has implemented DealerHome, allowing him to access consumers' online activity history and live updates through the Live Action feeds. This enables him to understand how consumers acquired their numbers and intentions, facilitating better offers based on the data. Dealership can now set a wishlist for trade-in vehicles and Calvin will receive notifications when consumers submit trade-in estimates for those vehicles. This empowers Calvin to make trade offers with improved prices, satisfying both the dealership's and consumer' demands.

5. User Flow

To visualize the flow,

the product managers and I created a user flow using Miro

6. Wireframes

To add structure to our ideas,

I created wireframes for a few pages to review the layout and idea with the CEO and product managers. However, their attention was diverted by the grey blocks and colors, making it difficult for them to focus on the structure. Thus, I had to proceed directly to UI design for the review.

7. Style Guides

To make the app’s appearance consistent,

I developed style guides as a first in-house designer at the company.

8. 1st Interface Design

To get feedback from the team,

I designed interface in Adobe XD

9. Clickable Prototype

To enhance the presentation of the flow and test it with internal field team,

we devised a scenario, and I crafted a clickable prototype flow based on that scenario.

10. Internal Review

Before presenting it to dealers,

The internal field team played with the prototype and collected opinions from fresh eyes.

11. Develop

Given that DealerHome relies on a consumer-facing products,

we opted to develop and conduct a beta test rather than testing it with an XD prototype. This approach enables us to obtain more accurate testing results.

12. Beta Test

To collect valuable insights from actual users,

we enlisted a few trusted dealers to participate in the test. Product managers visited these dealers, observed their reactions to DealerHome, and gathered feedback. While the feedback was generally positive, there were some areas identified for improvement. Among the valuable feedback we received, the major points we decided to act on were:

  • Appointment info on the homepage is sufficient. It might be beneficial to see more Live Actions than appointments when on other pages.
  • Desire to see more information on list screens without going into customer profiles or viewing detailed vehicle info slices.

12. Interface Design

For more intuitive and improved user experience

Design

The goal for DealerHome's interface was to create a design that dealer agents find enjoyable and user-friendly. Being a dealer-facing product, I aimed for a look that is both friendly and professional. The use of blue as the primary color was to enhance the visual trust and reliability of the product.

Home

Home page is the first screen when dealer agents sign in, showing key information to catch up on consumers' past and current activities, and foresee the day ahead in the 'Appointments' section. Most importantly, the 'Opportunities' section is designed to visually grab the attention of dealer agents for quick checks on potential consumers and to boost closing ratios.

Consumer Profile

Consumer Profile page is where dealer agents view and record detailed information about consumers. This page also allows them to track consumers' car-buying process. There are two variations for this page: one for dealers who only subscribed to MessageNow and another for both BuyNow and MessageNow.  For those with BuyNow and MessageNow, the 'In Progress' section features 8 tiles relevant to car-buying, while dealers with MessageNow only get 4 tiles focused on trade-in and appointments. Upgrading is necessary to access the remaining tiles.

The 8 tiles in 'In Progress' section are designed to be the most prominent, catching the eyes of dealer agents. They are arranged in order of importance and color-coded by status—green for done, yellow for pending, and red for not started. Dealer agents can easily grasp the progress at a glance, make changes, or send requests to consumers to complete specific steps.

Dealer agents can also add notes about consumers for personal reminders or to share key information with colleagues. Additionally, they can pin important notes to keep them visible at the top.

This page also features a mini chat box for dealer agents to communicate with online consumers, which is expandable to a full-screen session if needed.

Desking

Desking page is a pivotal feature of DealerHome, enabling the effortless generation of multiple payment options for comparison in one view. It allows detailed payment adjustments and facilitates the sending of offers to consumers with the selected payment. Moreover, dealer agents can stay informed about the latest updates on consumers' online activities, add or remove rebates seamlessly within the page, and generate printable quote sheets for convenient distribution via print or email.

The challenge in designing Desking page was organizing a substantial amount of information and features in an intuitive and clean manner. Dealers expressed the preference for all information to be readily accessible or require minimal scrolling. To meet these requirements, I created various design options, ultimately solving the problem by incorporating a toolbox at the bottom. This toolbox can be collapsed, allowing dealer agents to focus on the payment box on top, yet it remains visible enough for easy access when needed.

Final Desking Design

Discarded Desking Design Options

Sessions

Sessions page is accessible through the mini chat box in the Consumer Profile page or Conversations List Screen page. This feature allows dealers to communicate with consumers. Moreover, it incorporates effective tool buttons conveniently placed below the message box, such as Shortcuts, Customer information, conversation logs and sending e-business card. Clicking on a tool button updates the right panel accordingly.

List Screens

Initially, the List Screens pages contained less information to maintain a clean interface. It instead loaded more details when dealer agents clicked on a consumer list. However, we learned from the beta test that dealer agents prefer to see more information without clicking anything.

For the status column in the Leads page, I introduced 8 blocks, now referred to as 'Rubik's cubes,' to represent the 8 tiles in the 'In Progress' section of the Consumer Profile. By looking at the Rubik's cubes, dealer agents can quickly identify which steps are missing for a particular consumer in one view and take prompt action.

Feature Roadmap

The Feature Roadmap page is designed to inform the dealers about new features and, more importantly, upcoming features ready to be launched. This page allows us to prevent Dealers moving to a different platform due to any lack of features in DealerHome. Dealers are able to request any features that they need. This allows us to easily understand dealer requirements and plan our roadmap accordingly.

Conclusion

We successfully launched DealerHome and received reports that dealers using DealerHome, along with our consumer-facing products, doubled their closing ratio. One dealer even experienced 68% increase in ROI (Return on Investment).

However, as we are continuing to integrate with other companies and introducing more products, new features and design changes will be needed.

Further Work Needed

These are some changes made after launching DealerHome to address the problems dealers were facing. This is an ongoing design plan that has not been launched yet.

Home

With the new product 'Showroom Dealmaker' that was launched after DealerHome, Home page needed design change to incorporate metrics and a dashboard. This will enable Sales Managers to monitor all consumers, both in-store and online.

Live Action

During visits to observe dealers using this platform, we noticed that busy dealers' Live Action feeds continuously receive new events, prompting them to pause for reading. To tackle this, I grouped events by consumers and displayed only the latest activities for each consumer. The full list of events becomes visible when dealer agents choose to expand it. Additionally, search and quick filter features have been added to enhance the overall experience.

Consumer Profile

When I initially designed the 'In Progress' section, there was no plan to add more tiles. However, as we integrate with more companies, such as Polly Insurance, ShipYourCarNow, and CRM companies, the need for additional tiles arose. To accommodate this, we decided to restructure the Consumer Profile. The 'In Progress' section has now become a 'Vehicle of Interest' in list form, allowing us to add more without affecting its appearance significantly. Furthermore, consumer information and notes have been moved to the right column, creating a space for new data categories such as Value, Opportunities, and CRM History.