Redesign av en marknads­plats för bilköpare och bil­handlare

Innan jag ändrade några skärmar behövde jag veta hur människor faktiskt letar efter ett fordon: vad de vet när de kommer, vad de letar efter och var de kör fast.

Användar­tester var inte prioriterade i projektet, men jag behövde pröva mina egna farhågor innan jag gjorde om något. Därför körde jag några snabba tester med användare, med fokus på sök och filtrering, och gjorde en egen UX-granskning av hela sajten. Fyra saker blev tydliga.

De två sista fynden gav mig utrymme att arbeta mot partnernas API:er i stället för iframes, så att vi kunde designa de flödena själva.

Härifrån hade arbetet två mål: hjälpa människor att hitta ett fordon, och hjälpa dem att känna sig tillräckligt säkra för att agera. De två följande kapitlen tar dem i tur och ordning.

Att hitta ett fordon börjar med sökningen. Jag gjorde om startsidan, sökningen och filtren, så att man kan ta sig från tiotusentals annonser till ett urval man litar på.

1234

1. En fokuserad sökning efter fordonStartsidan inleds med ett enda fält för märke, modell eller egenskaper, gjort för att hitta fordon till salu. Det föreslår märken och modeller medan du skriver.
2. En global sökning i menynEn andra sökning ligger i toppmenyn, inom räckhåll från varje sida.
3. Alla, begagnade eller nya med ett tryckDet första valet en köpare gör ligger precis ovanför sökfältet.
4. Bläddra efter fordonstypBilar, transportbilar, husbilar, husvagnar och motorcyklar, var och en med sitt antal annonser, för den som fortfarande ser sig omkring.

123

1. Sökningen är en liten länk i menyn.
2. Bannern har en knapp och inget sökfält.
3. Fem rutor med säljargument, och inget sätt att avgränsa härifrån.

1234

1. En sökning efter fordon mitt på sidan.
2. Alla, begagnade eller nya, precis ovanför.
3. Förslag på märken och modeller medan du skriver.
4. Den globala sökningen finns kvar i menyn.

Resultat, förslag och filter

Samma tänk gäller även efter startsidan. Klicka på en bild för att förstora den.

Att hitta ett fordon är bara halva jobbet. Den andra halvan är att känna sig tillräckligt säker för att agera. Det kräver tre saker: uppgifter du kan lita på, en bil­handlare du kan lita på och ett tydligt nästa steg.

Hela resan i mobilen

Varje steg designades för mobilen såväl som för desktop. Klicka på en skärm för att förstora den.

Billånen på Bilwebben kommer från en partner. Det snabba sättet att erbjuda dem är att lägga partnerns formulär på sidan i en iframe. Jag fick utrymme att i stället designa vår egen ansökan mot partnerns API. Här är de två sida vid sida.

123

1. Tre numrerade prickar, utan namn.
2. Låneuppgifter och personuppgifter i en lång kolumn.
3. Partnerns egna fält, hjälpikoner och blå knapp.

1234

1. Namngivna steg, och bara det här öppet.
2. Månadskostnaden, stort och med enkla ord.
3. Sajtens egen gröna knapp.
4. Stegen som återstår.

• Tre namngivna steg, ett öppet i tagetÖnskat lånebelopp, Om dig, Skicka. Man ser hela ansökan innan man börjar och behöver bara ta sig an en del i taget.
• Färdiga steg fälls ihop till en sammanfattningEtt avklarat steg blir en rad, till exempel ”343 000 kr, 8 år”, med en penna för att gå tillbaka och ändra.
• Sajtens egna fält och knapparFormuläret använder samma inmatningsfält, typografi och gröna knappar som resten av Bilwebben, så att ansöka inte längre känns som att lämna sajten.
• Frågor som förklarar sig självaFrågan om medsökande har en kort motivering och två knappar, i stället för en rullista och en hjälpikon.

12

1. Steg ett, hopfällt till en rad med en penna för att redigera.
2. Frågan om medsökande, med en motivering och två knappar.

12

1. Båda de tidigare stegen är nu sammanfattningar.
2. En sista fråga, sedan två samtycken och knappen.

Bilwebben växte under arbetets gång. Nya tjänster och sidor kom till, och alla behövde kännas som en del av samma marknads­plats. Jag designade dem med samma komponenter som resten av sajten.

Jag ansvarade för design­systemet. Det håller Bilwebben konsekvent på desktop och mobil, och gör att nya sidor kan byggas av samma delar.

• Varför det behövdesGränssnittet hade blivit omodernt, och sajten växte. Att designa varje sida för sig hade inte hållit ihop.
• Vad det innehållerFärg, typografi och elevation som delade variabler i Figma, och komponenter för hela resan: navigering, sök, filterchips, fordonskort, partnerkort, accordions, steppers, bottom sheets och knappar, för både desktop och mobil.
• Inbyggd tillgäng­lighetTillgäng­ligheten byggdes in i komponenterna, så varje sida som byggs av dem utgår från samma tillgängliga grund.
• Hur teamet använde detKomponenterna heter samma sak i Figma som i koden, till exempel Button, Accordion och CardActions, så grundaren, utvecklarna och jag pratade alltid om samma sak.