ANODA Discuss your product

Car bidding marketplace, sellers compete for you

Autodice is a used-car marketplace where the buyer names the car and sellers send offers.We redesigned its homepage and the entry points behind it.

Autodice homepage: the promise, the switch between buying and selling a car, and the AI search beside make and model
3
roles buyers, private sellers and dealers, from one homepage
2
ways to search a sentence to the AI search, or make and model
3
screen sizes desktop, tablet and phone, state by state
Logo
designed from hand sketches to the mark in the header

Autodice is a Canadian used-car marketplace where a buyer says which car they want and sellers compete to offer it. Its homepage asked for registration before it showed anyone a useful result, and tried to talk to buyers and sellers at once. We redesigned the homepage and the marketplace entry points behind it, plus a logo, a design system and a clickable prototype for the client’s developers.

What a first visit has to explain

One chain, from a wish to an offer:

  1. Wish

    • A sentence
    • Make and model
    • Postal code

  2. Match

    • Results
    • Model reviews
    • Similar models

  3. Garage

    • Saved car
    • Alternatives
    • Sign-up

  4. Offers

    • From sellers
    • Ranked for the buyer
    • Rivals hidden

  5. Seller

    • VIN
    • Year, make, model
    • Dealer login
Buyer Seller
Opposite goals on one homepage, and one clear action for each.
AI search Make and model
Both ways in, without crowding the first screen.
Show value Ask for an account
Sign-up only once there’s a car worth saving.

One screen from a sentence to a saved car

Found
The homepage Autodice came with opened on a dark banner, a row of brand logos and a feed of deals, and useful offers only came after registration.
Decided
The search moved to the top: one switch between buying and selling, a sentence for the AI search or make and model, and the matches straight underneath, each with reviews and Add to My Garage.
For the user
A buyer sees real matches for their own words before anyone asks for an email.
The previous Autodice homepage: a dark hero with a car and Buy a Car and Sell a Car buttons, How it works, popular brands and the start of latest customer deals
Before: The homepage before the redesign
In the way
Buy and sell as two small buttons in a banner, then brands and deals; nothing the buyer typed shaped the page.
Autodice AI search: the query I want a long German sedan, min 6 cyl, not a hybrid or EV, and three results, a 2023 Mercedes-Benz S-Class, a 2024 Audi A8 and a 2020 BMW 7 Series, each with Show reviews and Add to My Garage
After: AI search results for a long German sedan: three matches, each ready for the garage

  1. Buy or sell

    The promise, then one switch that turns the page into the buyer’s or the seller’s.

  2. Say it or pick it

    A sentence for the AI search, or make and model, with the postal code beside them.

  3. See the matches

    Each car with its year, reviews on the model and Add to My Garage.

How the work progressed

A bounded redesign: the homepage and the entry points behind it, from a map of sections to a system the client’s developers could build from.

  1. Wireframes

    What the homepage says, in which order, and where search and sign-up branch off

    Artifact Information architecture, buyer and seller flows and wireframes, including AI-search alternatives later dropped

    An early homepage pass in blue and grey: a banner with the promise, the buy and sell switch, the AI search beside make and model, a note on how it works and the first popular categories

  2. UI & Design System

    One look for three audiences, and the states every field and card needs

    Artifact Two visual directions for key sections, the final UI, the design system and UI kit

    Two visual directions for the same homepage sections: on the left a light page with a grey car above the search, on the right a mountain photo with two cars across the full width

  3. Adaptives

    The same switch, search and seller entry on a tablet and a phone

    Artifact Tablet and phone layouts for every section and state

    The seller’s homepage on desktop and on a tablet: the promise to sellers, the switch set to selling, the VIN field with year, make and model beside or below it, and how it works

  4. Delivery

    What the developers need to build it without guessing

    Artifact Screen maps, a clickable prototype and the handoff file

Every way in ends at the garage

Found
A visitor might come to buy, to sell or just to look around, and the old homepage mixed all three.
Decided
The information architecture set the homepage as a sequence of sections, each with one job, and mapped where search, the garage and sign-up branch off it.

  1. Saving a car

    Add to garage opens account creation, then a preview of the garage and what signing up gives the buyer.

    Open the full map
    Flow: Home Page, Add to garage, a popup or page to create an account, then a garage preview with the benefits of signing up, beside a sketch of the sign-up form

  2. Searching

    The hero block branches into AI search and filters, and the page continues to the categories.

    Open the full map
    Flow: Hero Block and Header leading to Search with AI and Filters, then down to Shop by Category
Autodice menu open on a phone: Home, How It Works, About Us, FAQ, Blog and Contact, with Log In and Sign Up at the bottom

The whole site behind one button on a phone

Pages above, Log In and Sign Up at the thumb, while the buy and sell switch stays on the page.

  • Information architecture
  • Buyer and seller flows
  • Wireframes
  • Screen maps

Six jobs, from a sentence to a listed car

Buyers first, where the homepage has to earn a sign-up. Then sellers, where it has to get a car listed.

Search in plain words

Found
Most buyers don’t start from a trim level; they start from how they’ll use the car.
Decided
The AI search takes a sentence and returns matches with Add to My Garage on each, then confirms the save on the spot, on a phone as on a desk.
Autodice on a phone: AI search for a long German sedan, results with the 2023 Mercedes-Benz S-Class added to the garage, Suggest Similar Models and Show reviews

Make and model, with reviews in place

Found
Some buyers know exactly which car they want and need a second opinion before committing to it.
Decided
Make and model sit beside the AI search; each result opens a short summary with pros and cons and video reviews, without leaving the page.
Search by make and model for an Alfa Romeo Giulia: the 2022 Giulia Quadrifoglio with its reviews open, an overall summary, pros and cons and six review videos, then the 2024 Giulia Veloce

Browse by category

Found
Not everyone arrives with a car in mind.
Decided
Popular categories from SUV to coupe, each car a card that goes to the garage in one click, with a note that points to the garage.
Popular Categories on SUV: four cars, the 2022 Ford Explorer marked Added to Garage, and a message Successfully added to the garage with Open My Garage

Sign up when there’s something to save

Found
An account form before any value is shown is the first thing a shopper meets.
Decided
Registration appears when a buyer adds a car to the garage, and says why: sellers with that car are ready to send offers.
Almost There: an account form with full name, email, country, postal code and password, explaining that sellers with the chosen vehicle are ready to send their best offers

Selling starts with a VIN

Found
A seller wants the car listed in minutes, and typing out specs by hand invites mistakes.
Decided
The seller side leads with the VIN, explains where to find it, and says plainly when a VIN can’t be found; year, make and model stay as the manual way in.
Seller side on a phone: a tip explaining the 17-character VIN and where to find it, above the VIN field and the manual year, make and model fields
Seller side on a phone: a VIN entered with an error saying the vehicle can’t be found, then the make, model and year fields and GO

How it works, in four steps

Found
The model is new: buyers don’t expect sellers to come to them.
Decided
Four steps, from building the car with AI to making the deal, drawn as one road down the page.
How it Works in four steps: Build Your Car With AI, Add a Car to Your Garage, Choose the Best Offer From the Sellers and Make a Deal With the Seller, joined by a line through car sketches

A logo from the name’s own joke

Found
Autodice is a pun on chance, and buying a car is the last place anyone wants to gamble.
Decided
The mark was drawn by hand first, with dice, cubes and buy-and-sell faces, then taken into vector, and settled on a die beside a two-tone wordmark.
Autodice logo concepts: hand-lettered Auto Dice wordmarks with dice, a cube with buy and sell faces, and dice as letters
A sheet of hand-drawn Auto Dice wordmarks and dice marks
Vector logo directions for Auto Dice, each mark paired with the wordmark

One kit for three audiences and three screens

Found
Buyers, sellers and dealers see the same parts, and every field has a state someone will hit.
Decided
A design system and UI kit for the delivered scope: buttons, inputs and result cards, each state drawn once and reused at every size.

One garage action on every card

The same Add to My Garage button sits on result rows, phone cards and category cards, and turns into a confirmation once the car is saved.

  • The Add to My Garage button twice: dark with a car-and-plus icon, and orange in its focused state
    Before the save: dark on every result, orange under the pointer or keyboard focus.
  • Light Added to Garage button with a check mark
    After it: the button becomes the confirmation.

Drawn for every state it can be in

The kit’s result card before and after the buyer asks for similar models.

  • Result card for the 2024 Audi A8 D5 with Add to My Garage and Suggest Similar Models unchecked
    Similar models off
  • Result card for the 2024 Audi A8 D5 with Suggest Similar Models checked
    Similar models on

The same first screen on a desk, a tablet and a phone

Kept
The promise, the buy and sell switch and both ways to search.
Changed
On a tablet the navigation folds into a menu; on a phone make and model drop under the AI search.
Autodice homepage on desktop: navigation, the promise, the buy and sell switch, the car and the search row
1440 · Desktop Search and make and model in one row.
Autodice homepage on a tablet: the promise, the switch, the search row and How it Works below
1024 · Tablet The same row, the menu behind an icon.
Autodice homepage on a phone: the promise, the switch, the car and the AI search above make and model
375 · Phone One field per line, the AI search first.

What the developers received

One client file per screen size, with every state drawn beside the screen it belongs to.

Screen maps
Buyer and seller pages at desktop, tablet and phone sizes, section by section.
Clickable prototype
The redesigned homepage and its entry points, clickable for review.
Design system and UI kit
Buttons, inputs and result cards with their states.
Handoff file
Final UI for every size, the logo work and the two visual directions.

Flows in the handoff

  1. Wireframes: the homepage section by section, with the AI search and sign-up states
  2. UI (Desktop): buyer and seller pages, sign-up, log-in, password reset and 404
  3. UI (Mobile): the same pages and states on a phone, with the VIN variants
  4. UI (Tablet): the same pages and states on a tablet
  5. Moodboard and two styles for two sections
  6. Branding: logo moodboards and hand-drawn sketches
Seven desktop states of the Autodice password reset: the request form, an email that isn’t registered, check your email, a new email sent, a repeat request warning, the new password form and success
Every state of a flow, side by side: Password reset from the request to success, including a wrong email and a second request.
The Autodice input field in four states: an empty Full Name field, the same field focused with a cursor, filled with Maya Thompson, and outlined in red for an error
UI kit: the input field: One field for every form, empty, typing, filled and with an error.

Where the design ended up

A homepage that lets a buyer search, save a car and see why an account is worth it before registering; a seller side that starts from the VIN; a logo; all on desktop, tablet and phone.

The developers got every screen with its states, a clickable prototype and the kit.

roles served from one homepage
3
ways to search: a sentence or make and model
2
screen sizes, desktop to phone
3

In the client's words

ANODA gave the marketplace a clearer design direction, from the first vehicle search to the seller journey. Bringing the identity and interface work together made it easier to review the product as a whole and decide what the development team should build.

Ryan El-Cherif Autodice

5.0

Will the build keep the design intact?

At Autodice one kit of components and states had to hold from desktop to phone, so the developers never had to guess at a size. Send us your product, and we’ll show how to hand it over so it holds.

Discuss your product Explore more case studies

What we brought to Autodice

The product

Around it