3D Gymplanerare
Ett interaktivt 3D-verktyg som låter kunder planera sitt gym visuellt — och underlätta OAKs offertförfarande.
Kunder kunde inte föreställa sig gymmet innan köpet
OAK Equipments säljer gymprodukter och gympaket till företag och privatpersoner. Men kunder hade svårt att förstå dimensioner utifrån 2D-skisser — vilket skapade osäkerhet i köpbeslutet och försvårade offertprocessen.
Uppdraget från Chas Agency: ta fram ett 3D-verktyg för desktop där kunden kan planera och se sitt gym i en tredimensionell miljö innan eventuell investering.
Upplevelsemål — HUR?
Från brief till levererad Hi-Fi
Vad användarna egentligen behövde
Vi genomförde 3 enkäter och 6 telefonintervjuer med respondenter från byggbranschen, spelbranschen och gymintresserade privatpersoner. Tre behov dominerade samtliga svar.
Navigering
Fri rörelse i rummet — zooma, rotera och flytta sig i sidled
Objektkontroll
Dra in produkter från lista, flytta, rotera och ångra fritt
Produktinsikt
Tydlig produktinformation: mått, material, färg och pris
Minimalistisk
"Inte plottrigt och krångligt, tant Agda ska kunna använda den."
Flexibilitet
"Testa möbler, se vad som passar, och enkelt ångra val eller lägga till nya."
Feedback
"Varnar om den kolliderar och se hur långt det är mellan andra möbler."
Nyckelinsikt — från research till design
Alla 9 respondenter nämnde mått som avgörande. Oavsett teknisk vana behövde användarna ett verktyg som är tydligt, enkelt och smidigt — och som ger dem känslan av att kunna föreställa sig hur gymmet faktiskt kommer att se ut. Det var den insikten som formade hela designbeslutet.
Två användarprofiler styrde designbesluten
Dr. Frankenstein
Experimenterande · Visuell · Inspirationssökande
Svårt att föreställa sig helheten i förväg. Vill utforska fritt, testa färger och objekt, och justera utan att behöva börja om. Behöver låg teknisk tröskel och tydlig visuell guidning.
Problemlösaren
Praktisk · Metodisk · Noggrann med mått
Har svårt att veta om möbler passar utan exakt visuell återkoppling. Vill mata in mått, flytta och rotera objekt och få feedback — till exempel varningar vid kollision. Fokuserar på att allt ska fungera i praktiken.
Designsystem och slutlig Hi-Fi
Typografi
Oswald, sans-serif
Samma designsystem som OAK:s hemsida — i linje med deras hur-ord: Personligt.
Tre problem, tre lösningar
Vi genomförde ett observationstest med 5 personer och ett gerillatest på SATS Globen med 5 respondenter — majoriteten pensionärer och icke-teknisk vana. Resultatet: 9/10 upplevde flödet som enkelt. Tre konkreta iterationer gjordes baserat på testinsikterna.
Önskar tydligare progressbar
Connecting bar som binder ihop stegen visuellt — RUM → PRODUKTLISTA → ÖVERSIKT
Ville hoppa direkt till produktsidan
Nästa-knapp inaktiverad tills gymnamn och mått är ifyllda — tvingar rätt flöde
Önskar tydligare avslut kopplat till OAK
Översiktssida med kontakt till OAK, totalpris och möjlighet att spara PDF
9/10 upplevde flödet som enkelt
Både i observationstestet och gerillatesten fick vi positiv feedback på flödet: logisk ordning, tydliga knappar och text. Inga steg upplevdes som överväldigande. Slutlig Hi-Fi levererades till beställaren OAK Equipments.
Inkluderande designbeslut
- Automatisk bildrotation pausar vid hover och fokus — testat med tangentbordsnavigering
- aria-live-region på galleriet annonserar bildbyten för skärmläsare
- Kontrastkvot 6.4:1 för OAK Sage (#90A590) mot Deep Black (#1B1B1B) — godkänd WCAG AA
- Nästa-knapp inaktiveras med disabled-attribut och visuell state — inte enbart färgskillnad
- Alla produktbilder har beskrivande alt-text med mått och funktion