< Tilbage
Prototyping
Kimbrer efterspørger et løftet design til deres kommende online produktkonfigurator. Briefet lød på en blanding af visuelt design og interaktionsdesign. Kunden havde på forhånd et udgangspunkt, der havde taget inspiration i deres konkurrent, men efterspurgte at det skulle være bedre funktionelt og æstetisk.
Rolle: UX/UI designer
Tid: 15 timer
Team: Solo
Tools: Adobe XD
Skills: Prototyping, UI design
Før
Efter
Key problems
1
Brugeren skal selv udregne prisforskellen mellem komponenterne, hvilket kan besværliggøre sammenligningsprocessen.
2
Det er svært at scanne og bevare overblikket over valgmulighederne, da der er få elementer, der er aligner med hinanden.
3
Efter at have lagt en komponent i kurven, skal man altid scrolle tilbage til "Summary" og "Add to cart". Dette kan skabe friktion, da brugeren har brug for en visuel bekræftelse på den samlede pris som grundlag for at sammenligne valgmulighederne.
4
At opdele navnet og specifikationerne på samme linje kan gøre det svært at læse og sammenligne specifikationerne, før man træffer et valg.
Key solutions
1
Der er tilføjet en 'Start your configuration'-knap, der fører brugeren til konfiguratoren. Knappen er placeret i stedet for 'Add to cart'.
2
Paneler har erstattet tabeller med radio buttons, så hver valgmulighed nu har sin egen boks. Overskriften kan placeres frit for hver sektion og flugte med valgmulighederne, hvilket gør det lettere at sammenligne dem lodret.
3
Når en valgmulighed klikkes, vil forskellen i priserne for alle andre valgmuligheder ændre sig i forhold til udgangspunktet. Dette viser, hvor meget mere eller mindre brugeren skal betale ved at vælge en alternativ mulighed.
4
Hvis brugeren foretager valg, der ekskluderer en eller flere komponenter, bliver de inkompatible valgmuligheder ghosted, så de ikke kan vælges.
5
Når en bruger klikker på en valgmulighed, vil prisdifferensen blive erstattet af et inputfelt, hvor brugeren kan angive antallet af den valgte komponent.
6
Hintet ud fra overskriften angiver, om der er en begrænsning for antal af komponenter, der kan vælges (f.eks. flere SSD-drev med forskellige lagerstørrelser). Hvis blanding af valgmuligheder ikke er muligt, som med et netværkskort, vises en begrænsning som et lokalt hint under inputfeltet i panelet.
7
Summary-sektionen er lavet 'sticky' og følger med brugeren, når de scroller gennem konfiguratoren, så de nemt kan tilføje den konfigurerede computer til kurven uden at miste overblikket over valgte komponenter og totalprisen.
8
Modal knap er tilgængelig for brugere på små skærme, som viser en fuld liste af komponenter og gør det muligt at lægge i kurven. Der er tilføjet en skygge i bunden af summary for at indikere tilgængelighed af yderligere indhold.
På grund af den begrænsede tidsperiode var researchfasen kort, men tilstrækkelig omfattende til at give en idé om designmulighederne. Dette betød også, at jeg kun havde tid til ét enkelt sprint. Designet blev udført ved hjælp af Adobe XD og resulterede i en blanding af UI og interaktionsdesign. Projektet demonstrerer min evne til at arbejde hurtigt og effektivt under tidspres og fokusere på de vigtigste designaspekter.
Jeg startede samarbejdet med kunden for at få en forståelse af, hvem der ville bruge løsningen. Dette blev brugt til at oprette en persona, som jeg kunne relatere til. Dette ville også hjælpe med, at identificere kritiske informationer der skulle fremhæves. Derefter udførte jeg en konkurrentanalyse af deres design for at finde muligheder for optimering og inspiration.
Jeg brugte mine resultater til at påbegynde designfasen i Adobe XD. Jeg byggede en prototype med interaktionsdesign, som jeg ville fremvise til kunden i en efterfølgende review fase. Under designfasen blev der tænkt på principper såsom, progressiv disclosure, F-formede designmønstre og skanbarhed med fokus på kritisk information ind i designet. Skanbarhed var afgørende, da sammenligning er alfa og omega ift. at vælge de rigtige komponenter.
I sidste del af forløbet gennemførte jeg en review fase med kunden, hvor jeg præsenterede mine resultater af problemer og løsninger samt prototypen og mine tanker. Kunden havde mulighed for at give feedback og ønsker til ændringer.
Kunden var tilfreds med designet og mine findings. De havde dog en enkelt rettelse ift. selve listen af komponenter. De har nogle enkelte produkter der ville have op til 30 valgmuligheder af hard drives. Jeg tilbød at lave et sprint mere, hvor jeg ville tænke retention og schema theory ind i designet ved, at lave en step inddeling til udvalg af hver komponent.
Kunden valgte dog at gå med mit første udkast.