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
Discomfort
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:
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.
If you like what you see and want to work together, get in touch!
designbk4@gmail.com