Digitalt design · 01

UX & UI

Interfaces, der er nemme at forstå og gode at bruge.

Kontakt os

Sådan arbejder vi med ux & ui

UX handler om, hvad brugeren skal kunne, og hvordan. UI handler om, hvordan det ser ud og føles. Vi arbejder med begge dele samtidig, fra flows og struktur til de detaljer, der gør oplevelsen præcis. Ydelsen findes, fordi de fleste webshops taber kunder på ting, der er nemme at rette: uklare kategorier, filtre ingen bruger, produktsider der ikke svarer på det, kunden er i tvivl om.

Vi starter i data: GA4, Hotjar-optagelser, søgninger på sitet og supportens spørgsmål viser, hvor kunderne går i stå. Derefter skitserer vi flows og wireframes i Figma, tester dem på fem brugere og først derefter designer vi UI som komponenter. Undervejs sidder udvikleren med, så det, vi tegner, kan bygges i PrestaShop, Shopify eller Astro uden omveje.

I står med en Figma-fil, hvor hvert flow er tegnet færdigt til mobil og desktop, komponenter er navngivet, og udvikleren kan bygge direkte. Dertil et notat med testresultater og de beslutninger, der ligger bag, så ingen behøver gætte senere. Designet bliver en del af jeres designsystem, hvis I har et, eller starten på et.

Hvornår det giver mening

  • Jeres konverteringsrate på mobil ligger markant under desktop, og I ved ikke, hvor kunderne falder fra.
  • Kundeservice bruger tid på spørgsmål, som produktsiden burde besvare: mål, levering, kompatibilitet, retur.
  • I skal lancere en ny funktion, et konfigurator-flow eller en B2B-login-del og vil have den tegnet og testet, før udvikleren går i gang.
  • Shoppen er bygget over flere år af forskellige leverandører, og knapper, formularer og kategorisider ser forskellige ud fra side til side.

Det får du

  1. Flows og informationsarkitektur
  2. Wireframes og prototyper
  3. UI-design i komponenter
  4. Test og iteration
Kontakt os

Sådan foregår det

  1. Analyse af adfærd og problemer

    Vi gennemgår GA4-tragter, sessionsoptagelser, interne søgninger og supporthenvendelser og samler de ti største problemer i en prioriteret liste. Vi interviewer jeres kundeservice og salg om de spørgsmål, der går igen.

  2. Flows og wireframes

    Nøgleflows tegnes som wireframes i Figma til mobil og desktop: kategoriside, filter, produktside, kurv og checkout eller det flow, opgaven handler om. Vi gennemgår dem med jer og udvikleren, før noget bliver til UI.

  3. Prototype og brugertest

    Wireframes gøres klikbare, og fem brugere fra jeres målgruppe løser konkrete opgaver, mens vi observerer. Fund rettes, og vi tester igen, hvis noget stadig er uklart. Resultatet er dokumenteret med klip og noter.

  4. UI-design og overlevering

    Flowene designes færdigt som komponenter med tokens og varianter. Vi gennemgår filen med udvikleren, markerer states og responsiv adfærd og står til rådighed under implementering, så det bliver bygget som tegnet.

I dybden

Flows, produktsider og navigation ud fra kundernes adfærd

Kunder skal finde, forstå og vælge på færrest klik. Vi designer flows, produktsider og navigation ud fra, hvordan kunderne faktisk bruger sitet: hvad de leder efter, hvad de er i tvivl om, og hvad der får dem til at vælge. Grundlaget er sessionsoptagelser, interne søgninger, klikkort og spørgsmål til kundeservice, ikke hvad der ser flot ud i en præsentation. Hver side får en tydelig opgave, og elementer, der ikke hjælper med den opgave, fjernes eller flyttes ned.

Brugertest af prototyper, før der skrives kode

Prototyper testes på rigtige brugere i Figma eller Maze, og det, der ikke virker, rettes der, hvor det er billigt. En rettelse i Figma tager en time; den samme rettelse efter lancering koster en udvikler, en test og ofte en ny deploy. Vi kører typisk to runder med fem brugere pr. runde og retter mellem runderne. Testen dokumenteres med korte klip og en prioriteret liste over fund.

UI som komponenter i et designsystem

UI bygges som komponenter med varianter og tokens for farver, typografi og afstande, så shop, kampagnesider og mails ligner hinanden og kan bygges hurtigt. Knapper, formularfelter, produktkort og filtre defineres én gang og bruges overalt. Det betyder også, at udvikleren kan bygge efter navngivne komponenter i stedet for at måle pixels på et skærmbillede, og at nye sider senere kan tegnes af jeres eget team inden for systemet.

Tilgængelighed og mobil som udgangspunkt

Over 70 procent af trafikken i de webshops, vi arbejder med, kommer fra mobil, så alle flows tegnes til mobil først og skaleres op. Kontrast, fokus-tilstande, touch-flader på mindst 44 pixels og læsbar typografi er en del af designet fra start, ikke en tjekliste bagefter. Vi følger WCAG 2.2 AA som minimum, både fordi det er lovkrav for mange virksomheder, og fordi det gør sitet nemmere for alle.

Fejl, vi ofte finder

  • Filtre, der er bygget efter varestamdata, ikke efter kundens valgFiltre med 30 attributter fra ERP'et bruges ikke. Kunden vælger efter få ting: størrelse, pris, materiale, leveringstid. Vi analyserer, hvilke filtre der faktisk klikkes på, og designer et filter med de fem til otte, der afgør valget, resten gemmes under "flere filtre".
  • Produktsider, hvor det vigtigste ligger under foldenPris, lagerstatus, levering og køb-knap gemt under lange beskrivelser og bannere koster ordrer på mobil. Vi omstrukturerer produktsiden, så beslutningsinformationen er synlig i første skærm, og beskrivelse, specifikationer og anmeldelser ligger i en tydelig rækkefølge nedenunder.
  • Samme funktion designet forskelligt på forskellige siderNår kurv-knappen, formularfelter og fejlbeskeder ser forskellige ud fra side til side, skal kunden lære sitet forfra hver gang. Det sker, når flere leverandører har bygget over tid. Vi samler elementerne i ét komponentsæt og retter siderne, så samme handling ser ens ud overalt.

Sådan ser det ud

0sprints fra skitse til design

Fra grå flader til et udtryk, der kan genkendes. Prototyper testes på rigtige brugere undervejs.

HeroKategoriProduktKurvCheckoutTak

SkitseDesign

Sådan måler vi effekten

  • Konverteringsrate på mobil, målt i GA4 før og efter lancering
  • Andel af besøg på produktside, der lægger i kurv
  • Antal spørgsmål til kundeservice om produktinformation pr. 100 ordrer

Rammer

Pris
Fra 45.000 kr.
Varighed
4–6 uger
Hvem
UX-designer, UI-designer og udvikler til gennemgang
Kontakt os

Eksempel: Stolespecialisten

Stolespecialisten har et stort sortiment af kontor- og spisestole, og kunderne havde svært ved at vælge. Vi gennemgik sessionsoptagelser og interne søgninger, tegnede et nyt filter med de valg, kunderne faktisk bruger (siddehøjde, materiale, pris, leveringstid), og en produktside, hvor mål, levering og pris er synlige i første skærm på mobil. Prototypen blev testet på fem brugere i to runder, før udvikleren byggede den. Andelen af produktsidebesøg, der lagde i kurv, steg med ca. en fjerdedel i de første tre måneder.

Mere inden for Digitalt design

F A U S
  1. Wireframes & prototyper
  2. Figma design systems
  3. Brand & identitet
  4. Motion & animation
  5. Ad creatives
  6. Illustration & ikoner
  7. Designsprint
  8. Usability-test
  9. CRO-design
  10. E-mail-design
  11. Social content
  12. Præsentationer
  13. Print

Se det i praksis

Cases

Sokkeposten

Sokkeposten

Nyt PrestaShop site og 360 graders digital marketing med SEO og PPC annoncering.

Se alle cases
Bolighuset Werenberg A/S

Bolighuset Werenberg A/S

Et digitalt sats på e-handel, der gav pote. Se vores arbejde for Werenberg, og hvordan vækstkurven blev stejl med en stabil og udviklingsdygtig webshop.

t.i.n.g. shop

t.i.n.g. shop

Skræddersyet design og udvikling af møbelshop. Markedsføring gennem PPC med 200% vækst.

Rigtig Kaffe A/S

Rigtig Kaffe A/S

All-around design, udvikling, branding, strategi og søgemaskineoptimering

Poetzsch Padborg

Poetzsch Padborg

Avanceret Google Tag Manager setup til konverteringstracking

Ofte stillede spørgsmål

  • UX er oplevelsen og logikken. UI er udseendet og interaktionen. Det ene virker ikke uden det andet.

  • Adgang til GA4 og gerne Hotjar eller Clarity, jeres nuværende designfiler eller brandguide, og en times møde med den, der kender kunderne bedst, typisk kundeservice eller salg.

  • Ja. De fleste opgaver er redesign af udvalgte sider og flows i den platform, I allerede har. Vi tegner inden for platformens muligheder, så det kan bygges uden migrering.

  • Ja. Fra identitet og logo til retningslinjer og skabeloner, og vi sørger for, at det virker digitalt først.

  • Ja, alt design lever i Figma med komponenter og tokens, som udviklere kan bruge direkte.

Næste Wireframes & prototyper →