Så byggde vi ett sprängskissverktyg för att hitta Sherco-reservdelar
Sherco är ett märke som växer snabbt bland enduro- och trialförare, men att hitta rätt reservdel har länge varit krångligare än det borde vara. Delkataloger i PDF-format, artikelnummer som inte stämmer mellan år och modeller, och begränsad tillgång hos lokala återförsäljare. Vi bestämde oss för att lösa det genom att bygga ett interaktivt sprängskissverktyg med direktlänkar till produkterna hos Sherco Reservdelar.
Problemet vi ville lösa
Den traditionella vägen att hitta en reservdel ser ofta ut så här:
- Ladda ner en PDF med sprängskisser från tillverkaren
- Zooma och scrolla för att hitta rätt del
- Anteckna artikelnumret
- Söka på numret i en webbshop som kanske har delen, kanske inte
- Hoppas att numret stämmer för just din årsmodell
Det är många steg där saker kan gå fel, och det tar tid. Vi ville korta ner processen till: klicka på delen i bilden och hamna direkt på produktsidan.
Tekniken bakom verktyget
Sprängskissverktyget är byggt med moderna webbtekniker för att ge en snabb och responsiv upplevelse:
- Next.js och React: Ger oss server-side rendering för snabb initial laddning och smooth interaktioner.
- SVG-baserade sprängskisser: Varje del i skissen är ett klickbart element med koppling till rätt produktsida.
- Sökbar databas: Artikelnummer, modellår och kompatibilitet mappat mot varje del.
- Hover-effekter och tooltips: Visar artikelnummer och delnamn direkt när man för musen över en del.
Så fungerar det i praktiken
Användaren väljer först modell och årsmodell. Sedan visas relevanta sprängskisser för motor, chassi, bromsar, elsystem och så vidare. Varje del i skissen är interaktiv:
- Hovra över en del för att se namn och artikelnummer
- Klicka för att komma direkt till produktsidan
- Se lagerstatus och pris utan att lämna vyn
Det som tidigare tog 10-15 minuter går nu på under en minut.
Utmaningar vi löste
Att bygga verktyget var inte utan utmaningar:
- Datakvalitet: Artikelnummer varierar mellan år och regioner. Vi byggde en mappningstabell som hanterar alias och ersättningsdelar.
- Bildkvalitet: Originalskisserna var i varierande kvalitet. Vi vektoriserade och optimerade varje bild för webben.
- Mobil upplevelse: Sprängskisser med många små delar är svåra på liten skärm. Vi implementerade pinch-to-zoom och förstoringsläge.
- Prestanda: Med hundratals klickbara element per skiss krävdes optimering för att hålla interaktionerna snabba.
Resultat och feedback
Sedan lansering har verktyget fått positiv respons från Sherco-ägare som tidigare kämpat med att hitta rätt delar. Särskilt uppskattat är:
- Direktlänkar som eliminerar sökandet
- Tydlig kompatibilitetsinformation per årsmodell
- Möjligheten att se relaterade delar i samma vy
Nästa steg
Vi fortsätter utveckla verktyget med fler modeller, bättre sökfunktion och möjlighet att spara favoritdelar för snabbare åtkomst vid nästa service. Målet är att göra det lika enkelt att underhålla sin Sherco som vilken annan motorcykel som helst.