Redesigning a marketplace for car buyers and car dealers

Before changing any screens, I needed to know how people actually look for a vehicle: what they know when they arrive, what they look for, and where they get stuck.

User testing was not a priority in the project, but I needed to check my own concerns before redesigning. So I ran some quick tests with users, focused on search and filtering, and did my own UX review of the whole site. Four things stood out.

The last two findings gave me the room to work with the partners’ APIs instead of iframes, so that we could design those flows ourselves.

From here the work had two aims: help people find a vehicle, and help them feel sure enough to act. The next two chapters take them in turn.

Finding a vehicle starts with search. I reworked the start page, the search and the filters, so that people can get from tens of thousands of listings to a shortlist they trust.

1234

1. A focused search for vehiclesThe start page opens with one field for make, model or features, made for finding vehicles for sale. It suggests makes and models as you type.
2. A global search in the menuA second search sits in the top menu, within reach from every page.
3. All, used or new in one tapThe first choice a buyer makes sits right above the search field.
4. Browse by vehicle typeCars, vans, motorhomes, caravans and motorcycles, each with its number of listings, for people who are still looking around.

123

1. Search is a small link in the menu.
2. The banner has one button and no search field.
3. Five boxes of selling points, and no way to narrow down from here.

1234

1. A search for vehicles in the middle of the page.
2. All, used or new, right above it.
3. Makes and models suggested as you type.
4. The global search stays in the menu.

Results, suggestions and filters

The same thinking carries on after the start page. Click an image to enlarge it.

Finding a vehicle is only half the job. The other half is feeling sure enough to act. That takes three things: details you can trust, a dealer you can trust, and a clear next step.

The whole journey on mobile

Every step was designed for the phone as well as for desktop. Click a screen to enlarge it.

Car loans on Bilwebben come from a partner. The quick way to offer them is to place the partner’s form on the page in an iframe. I was given the room to design our own application on the partner’s API instead. Here are the two side by side.

123

1. Three numbered dots, with no names.
2. Loan details and personal details in one long column.
3. The partner’s own fields, help icons and blue button.

1234

1. Named steps, and only this one open.
2. The monthly cost, large and in plain words.
3. The site’s own green button.
4. The steps still to come.

• Three named steps, one open at a timeDesired loan amount, About you, Send. People can see the whole application before they start, and only deal with one part at a time.
• Finished steps fold into a summaryA completed step becomes one line, such as “343 000 kr, 8 years”, with a pencil to go back and change it.
• The site’s own fields and buttonsThe form uses the same inputs, type and green buttons as the rest of Bilwebben, so applying no longer feels like leaving the site.
• Questions that explain themselvesAdding a co-applicant comes with a short reason and two buttons, in place of a dropdown and a help icon.

12

1. Step one, folded into one line with a pencil to edit it.
2. The co-applicant question, with a reason and two buttons.

12

1. Both earlier steps are summaries now.
2. One last question, then two consents and the button.

Bilwebben grew during the work. New services and pages were added, and each had to feel like part of the same marketplace. I designed them from the same components as the rest of the site.

I was responsible for the design system. It keeps Bilwebben consistent across desktop and mobile, and lets new pages be built from the same parts.

• Why it was neededThe interface had become dated, and the site was growing. Designing each page on its own would not have held together.
• What it containsColour, type and elevation as shared variables in Figma, and components for the whole journey: navigation, search, filter chips, vehicle cards, partner cards, accordions, steppers, bottom sheets and buttons, for both desktop and mobile.
• Accessibility built inAccessibility was built into the components, so every page made from them starts from the same accessible base.
• How the team used itComponents have the same names in Figma as in code, such as Button, Accordion and CardActions, so the founder, the developers and I were always talking about the same thing.