Web App, Auction Edge

Managing Vehicle Offers

Mockup of a laptop screen showing a list of vehicle offers.
TIMELINE
Jun - Jul 2020
ROLE
UX/UI Designer
TEAM
Product Owner, Developers

Overview

EDGE Spark is a cloud-based auction management system (AMS) that enables auto auctions to work from anywhere, whether it's at their desk or on a mobile device. The Offer Management feature was the first module released for EDGE Spark as a step towards modernizing auction users' workflows.

What are Offers?

In order to modernize our auction users' workflows, we need to improve upon the on-premises AMS presently used by auctions.

One important feature that our on-premises AMS supports is managing offers on vehicles. These offers, also known as "IF bids", happen when the highest bid doesn't reach the seller's floor/reserve price. The vehicle is put on an offer and the buyer can purchase the vehicle only if the seller accepts their offer.

The process of closing a deal on an offer involves a negotiation between the buyer and seller, with the auction acting as the intermediary.
Diagram of the auction between the seller and buyer and arrows showing the back and forth negotiation.
The more efficiently offers are handled, the more cars that get sold.

Gathering Requirements

After talking with subject matter experts, the main requirements we gathered were:

🎾
Make it clear "who has the ball"
For the negotiation between the seller and buyer to move smoothly, the auction needs to know who they're waiting on for an answer.
📋
Filter and sort the list of offers
The way offers are sorted and worked differ auction-by-auction. We want to make sure that the list can be adjusted to work for all auctions.
🤝
Track the negotiation
Auctions want to be able to keep track of the offer history to help facilitate the negotiation with the buyer and seller.
📊
Show the numbers
Market valuations are often used as a reference when negotiating offers. We need to show them so that users don't have to look it up.
🔔
Notify the buyer and seller
When an offer is accepted, countered, or rejected, we want to provide a way to notify the buyer and seller by email or text.

Getting Started

To help make sense of the feature, I started off with a flowchart and started identifying the information that would go on these screens.
Flowchart of how offers will be managedInformation architecture of the main screens for offer management

Exploration with Wireframes and Mocks

The flow and screens were then translated into wireframes and low-fidelity mocks to share internally for feedback and direction.
Four wireframe options of the Offers ListFour wireframe options of the Offer Details PageFour early mocks of the Offer Details PageFour mobile wireframes and three early mobile mocks of the Offer Details Page

Refining Mocks with Feedback

Over the course of the design process, feedback was gathered 3 different ways:
Through this process, we gained a deeper understanding of the auctions' workflow with offers and iterated the mocks to better align with how they work.

Offers List

The offers list is accessed from a card on the dashboard. It shows all offers that came in on sale day at the auction that week so auctions can start going down the list and work them.

Offers List Screen (Before & After)

Before state of the Offers ListAfter state of the Offers List

Iterations of the Offers List Rows

First iteration of the offer list rows with a list of what needs to be changedSecond iteration of the offer list rows with a list of what has changed and what still needs to be changedThird iteration of the offer list rows with a list of what has changed and what still needs to be changedFinal iteration of the offer list rows with a list of what has changed

Bulk Actions and a Toggle

Two requests from auctions were bulk actions and filter the list to only pending offers. Bulk actions come in handy when auction users want to add a note to vehicles with a certain buyer or reject several offers for a seller. The list is toggled to show only pending offers by default, allowing auctions to stay focused on the ones that need action. Offers that were accepted or rejected can be accessed by changing the toggle to show all offers.
Offers list screen with a red box around the checkbox in the list header and buttons for adding a note and rejecting offersOffers list screen with a red box around a toggle labeled "Show only pending"

Offer Details

When a user clicks on a vehicle in the offers list, the offer details are shown. The offer details is under a tab on the vehicle details page (VDP), which allows users to easily switch between the vehicle information and offer details.

Offer Details Page (Before & After)

Before state of the Offer Details PageAfter state of the Offer Details Page

Rearranging the Page Hierarchy

One of the major changes with the details page was changing the hierarchy. After talking to auctions, we found that they first check the buyer and seller information. Once they're in contact with the buyer or seller, they use the offer history and market valuations to help with negotiation. CTAs were moved closer to the offer history to better align with their workflow. A past sales section was added to show how the vehicle performed in past sale attempts.
Before state of the information hierarchy of the offer details pageAfter state of the information hierarchy of the offer details page

Before and After of the Buyer and Seller Section

The buyer and seller section were changed to show key information to help auction users get in contact with the buyer and seller.
Before state of the buyer and seller info section on the offer details pageAfter state of the buyer and seller info section on the offer details page

Before and After of the Offer Information Section

The offer information section was changed to feel more cohesive and offer at-a-glance information to help auction users work offers.
Before state of the offer info and history section on the offer details pageAfter state of the offer info and history section on the offer details page

Past Sales Section

The past sales section was missing from the initial prototype and was something that the auction users looked for to evaluate past performance of the vehicle.
Past sales section of the offer details page with an explanation of why it was added

Action Modals

If a user clicks on an action, a modal opens up. When rejecting, countering, or accepting, the user has the option to send notifications to the buyer or seller.
Examples of the modals for adding a note, rejecting an offer, countering, and accepting an offer.

Mobile Views

Before and after mobile mockups of the Offers List and Details Page.Mobile mockups of the modals for adding a note, rejecting, countering, and accepting an offer.