Workshop: Design challenge
– Redesign af Coolshop
I denne individuelle workshop arbejdede jeg med en opgave, hvor vi skulle undersøge UI-tendenser inden for en valgt branche, finde en eksisterende hjemmeside, der trængte til en kærlig hånd, og lave et redesign af den.
Jeg valgte kategorien hobby/e-handel og besluttede at redesigne Coolshop.dk. Deres nuværende side fungerer, men den føles ret proppet, og det visuelle hierarki kan godt skabe lidt kognitiv overbelastning, når man leder efter f.eks. gaming-udstyr. Det gav mig en fed mulighed for at dykke ned i adfærdsdesign (nudging) og rydde op i layoutet, så det fik et mere moderne og skarpt udtryk.
Se Figma arbejdsdokumentet her
Research og forberedelse
For at forstå Coolshops nuværende identitet og brugernes udfordringer startede jeg med en researchfase:
- Analyse af deres nuværende brug af farver, grids og opbygning af produktkort.
- UI-analyse af andre store tech- og gaming-webshops for at se på tendenser.
- Undersøgelse af, hvordan man kan bruge visuelle virkemidler til at guide kundens opmærksomhed (Visual Salience).
Researchen gjorde det tydeligt for mig, at jeg ville skabe et design, hvor der var mere luft, og hvor de vigtigste elementer (som priser, ratings og købsknapper) poppede meget tydeligere frem.
Designvalg og visuel retning
For at få et professionelt og responsivt design har jeg brugt et gridsystem i Figma. På desktop arbejder jeg med et 12-kolonne grid med 120px margin, mens mobil har 4 kolonner med 20px margin.
Jeg valgte 12 kolonner på desktop, fordi det nemt kan deles op i 2, 3, 4 eller 6 kolonner alt efter hvor meget plads indholdet skal fylde. På mobil giver 4 kolonner god læsbarhed uden at fylde for meget.
I mit redesign valgte jeg at introducere en skarp, neongrøn kontrastfarve til Coolshops ellers meget sort/hvide univers. Målet var at skabe et friskt og energisk visuelt udtryk, der appellerer bredt til folk, der leder efter hobbyudstyr, samtidig med at holde selve layoutet simpelt og luftigt. Den nye farve blev brugt som et strategisk værktøj med fokus på flere vigtige designprincipper:
- Adfærdsdesign og Nudging: Jeg brugte udelukkende den neongrønne farve på de primære CTA-knapper som “SE UDVALG”. Ved at udnytte visual salience (hvad der fanger øjet) bliver brugerens opmærksomhed ledt helt automatisk mod de vigtigste handlinger uden unødig visuel støj.
- Social Proof: For at opbygge øjeblikkelig tillid og mindske købsmodstand valgte jeg at fremhæve stjerneratingen direkte på produktkortene. Inden for en bred kategori som hobbyudstyr, hvor produkterne varierer meget, skaber andres anmeldelser en vigtig tryghed.
- Jakob’s Law: Selvom jeg ændrede farveprofilen, bevarede jeg den velkendte placering af logo, burger-menu og indkøbskurv i top-baren. Når layoutet følger de konventioner, brugerne kender fra andre store webshops, skal de ikke bruge unødig kognitiv energi på at navigere.
- Tilgængelighed: Gennem hele processen og især på mobilversionen, har jeg haft fokus på WCAG-reglerne ved at sikre, at den neongrønne farve har stærke farvekontraster mod teksten for optimal læsbarhed.
Arbejdsproces i Figma
I denne workshop valgte jeg at arbejde ud fra en Mobile-First tankegang. Det betyder, at jeg startede helt fra bunden med at designe mobilversionen som det allerførste, før jeg overhovedet tænkte på desktop. Jeg gjorde det for at tvinge mig selv til at prioritere det absolut vigtigste indhold og skære alt det overflødige væk med det samme, da pladsen på en mobilskærm er så trang.
Til mobilversionen tog jeg udgangspunkt i en frame-bredde på 430px (og lærte så senere undervejs, at 393px faktisk er den perfekte standard for moderne iPhones).
Jeg insisterede på, at layoutet skulle laves 100% rigtigt med Auto Layout, så det blev ægte responsivt og dynamisk. Det gav mig dog en del grå hår undervejs! Min største frustration var, da jeg fik lavet en fejl i mine prototype-indstillinger, som pludselig maste hele min side fuldstændig sammen, så layoutet kollapsede og overlappede som en mærkelig, klemt mobilskærm.
Kort efter ramte jeg muren igen, da jeg skulle strukturere mine produktkort til den lodrette mobilrække. Her “druknede” de små favorit-hjerter og forsvandt fuldstændig bag produktbillederne på grund af Auto Layout-reglerne. Løsningen blev, at jeg lærte at bruge Absolute Position og Constraints. Det tillod mig at hive hjerte-ikonet ud af det låste Auto Layout og tvinge det til at blive liggende i øverste højre hjørne af billedet. Det var en vildt tilfredsstillende følelse, da det endelig lykkedes, og elementerne makkede ret.
Først da mobilversionen var helt færdig og spillede, rykkede jeg videre til at bygge desktop-versionen op. Her tog jeg udgangspunkt i et 1728px grid (MacBook Pro 16″). Det var fedt at mærke, at processen gik meget nemmere her, fordi jeg blot skulle tage alle de vigtigste elementer og adfærdsprincipper, som jeg allerede havde defineret på mobilen, og skalere dem op til en større skærm. Det gav mig mulighed for at give layoutet endnu mere luft og bredde, samtidig med at den røde tråd blev bevaret.
Refleksion
Hvis jeg skal se tilbage på hele denne workshop, har det været en vild læringskurve, både i forhold til at forstå UI/UX-teorier, men i den grad også med at styre det tekniske i Figma.
I dette projekt lærte jeg hurtigt, at et godt design handler om adfærdspsykologi. Det har været mega spændende at arbejde med Nudging og Visual Salience (hvad der fanger øjet). Da det nuværende Coolshop har et meget sort/hvidt univers, valgte jeg bevidst at introducere en skarp, neongrøn kontrastfarve for at give et friskt udtryk til deres hjemmeside. I stedet for at smide den neongrønne farve på alt muligt, holdt jeg igen og brugte den udelukkende på de vigtigste CTA-knapper som f.eks. “SE UDVALG”.
Det var en øjenåbner at se, hvordan man med en strategisk farve kan skabe en visuel motorvej, der guider brugerens øjne direkte derhen, hvor vi gerne vil have dem, uden unødig visuel støj.
Samtidig har jeg kæmpet lidt med balancen mellem at være kreativ og følge reglerne. Jeg ville gerne lave et helt unikt layout, men jeg valgte at tage udgangspunkt i Jakob’s Law, altså at brugere bedst kan lide hjemmesider, der minder om dem, de kender i forvejen. Hvis man flytter for meget rundt på kurven, logoet eller menuen, skal brugeren bruge energi på at “lære” siden at kende, og så dropper de ud. Derfor placerede jeg top baren helt klassisk på tværs af skærmene, hvilket var en god læring i, at brugervenlighed altid skal trumfe vilde designidéer på en webshop.
Mine kampe med Figma og Auto Layout
Det tekniske i Figma var der, hvor jeg mødte den største modstand, men sjovt nok også der, hvor jeg lærte allermest. Da jeg arbejdede ud fra en mobile first tankegang, lagde jeg ud med at designe mobilversionen helt fra bunden som det allerførste, før jeg overhovedet tænkte på desktop. Jeg gjorde det for at tvinge mig selv til at prioritere det absolut vigtigste indhold og skære alt det overflødige væk med det samme, da pladsen på en mobilskærm er så trang.
Jeg besluttede mig for, at mit design skulle være 100% professionelt sat op med Auto Layout, hvilket gav mig en del grå hår!
Min største frustration opstod, da jeg fik lavet en fejl i mine prototype-indstillinger. Det resulterede pludselig i, at mit layout kollapsede fuldstændig og blev mast sammen, hvor elementerne overlappede i rent kaos. I stedet for at slette det hele og panikke, tvang det mig til at dykke dybt ned i lag strukturen for at forstå, hvordan constraints og frames rent efter bogen hænger sammen, så jeg kunne løse problemet manuelt.
Kort efter ramte jeg muren igen på mine produktkort, hvor favorithjerterne “druknede” og forsvandt fuldstændig bag produktbillederne, fordi Auto Layout klemte dem. Her lærte jeg det geniale trick med at slå Absolute Position til.
Det gav mig total frihed til at hive hjertet ud af de låste Auto Layout-regler og placere det præcis i øverste højre hjørne af billedet, så det blev liggende pænt. Det var en vildt tilfredsstillende følelse, da det endelig lykkedes, og tingene makkede ret.
Først da mobilversionen spillede perfekt, rykkede jeg videre og opbyggede desktop versionen på et 1728px grid (MacBook Pro 16″). Det var fedt at opleve, at denne del gik meget hurtigere, fordi jeg blot tog de adfærdsprincipper og elementer, jeg allerede havde defineret på mobilen, og skalerede dem op, så layoutet fik mere luft og bredde, men bevarede den samme røde tråd.
Hvad tager jeg med videre? Jeg føler virkelig, at denne workshop har flyttet mig. Jeg har indset, hvor vigtigt det er at tænke på tilgængelighed (WCAG). At designe knapper, der overholder minimumskravene for touch-targets og er store nok til en tommelfinger, ikke bare handler om design, men om basal respekt for en bruger, der sidder på en rystende bustur og prøver at navigere på hjemmesiden.
Jeg er gået fra bare at sidde og flytte rundt på tilfældige firkanter og billeder for at få det til at se pænt ud, til rent faktisk at forstå opbygningen bag et dynamisk gridsystem. Jeg er blevet langt mere selvsikker i Figma, og mit næste mål er helt sikkert at mestre Auto Layout endnu mere og eksperimentere med mere avancerede komponenter. Jeg er mega stolt af det færdige resultat, som både ser skarpt ud og giver mening rent adfærdspsykologisk.
