Redesigning a complex marketplace from search to confident decision-making

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 a few quick tests with friends and family, focused on search and filtering, and did my own UX review of the whole site. The tests were clear: nobody found the search, and the filters were hard to find and too limited once people got there.

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.

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.

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.

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. Car loans, news and the new-car configurator had to look and work like the rest of the marketplace. Designing each page on its own would not have held together.
• What it containsColour and type as shared variables, and components for the whole journey: navigation, search, filters, vehicle cards, partner cards, accordions and buttons, for both desktop and mobile.
• 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. The loan pages, the news section and the configurator were all designed from the same parts.