Digitalist

Tjänster · Design · B2

UX och visuell design — Det användarna ser, hör och förstår

B2 omfattar informationsarkitektur, navigation, interaktionsdesign, grafisk form och UI-design på enskilda lösningar. Tjänsten tar vid där B1 slutar — när konceptet är validerat görs det till färdig produktdesign som kan levereras till utvecklingsteamen i C-blocket eller direkt till kund.

UX och visuell design är arbetet med att översätta validerade koncept till färdig produktdesign — informationsarkitektur, interaktionsdesign, grafisk form och UI för en specifik lösning. När B1 har svarat på vad ska vi bygga svarar B2 på hur ska det se ut och fungera.

Vad ingår

  • Kreativ konceptutveckling och visuella riktlinjer
  • Informationsarkitektur som speglar användarens mentala modell
  • Interaktionsdesign med fulla states (default, hover, focus, active, disabled, error)
  • UI-design i Figma med komponentbibliotek, varianter och designtokens
  • Användbarhetstester — moderated i vårt UX-labb eller via Maze
  • Tillgänglighet enligt WCAG 2.2 AA inbyggt i alla designval
  • Designspecifikationer via Figma Dev Mode som utvecklare kan implementera direkt
  • Designgranskning av befintlig lösning med åtgärdsförslag

Vad det INTE är

  • Discovery, behovsanalys och konceptvalidering — se B1
  • Designsystem på systemnivå över flera produkter — se B3
  • Tillgänglighetsaudit som specialistuppdrag — se B4
  • Innehållsproduktion (text, bild, video) — se B5
  • Frontend-utveckling — implementeras i C1 eller C2

För vem

Produktägare, CMO, kommunikationschefer och IT-chefer som ska bygga eller göra om en specifik webbplats, e-tjänst, app eller verksamhetssystem. Vanliga drivkrafter: gammal design som tappat sin udd, EAA-efterlevnad, behov av högre konvertering, eller varumärkesarbete som ska översättas till digital närvaro.

Så går det till

  1. Designbrief och förankring — vi tar in B1:s validerade koncept, varumärkesriktlinjer och affärsmål. Tonalitet och visuell riktning förankras före produktdesign.
  2. Konceptuell visuell idé (1–3 v) — moodboards, designkoncept, typografiprinciper. Vi visar tre riktningar, ni väljer en.
  3. Färdig produktdesign — full UI för alla skärmar, komponenter och states. Responsiv från start. Tillgänglighet inbyggd.
  4. Användbarhetstest — vi testar mot målgruppen innan handover till utveckling. Resultatet styr finjustering.
  5. Handover — Figma Dev Mode, designtokens, dokumenterade specifikationer. Designern följer med in i utvecklingssprintar.

Bevis

  • DIGG — Sveriges Dataportal 2.0 — UX och visuell design på Strapi headless CMS. Se /kundcase/digg.
  • Kommunal — Nära dig — produktdesign för app med fokus på enkelhet och förtroende. Se /kundcase/kommunal.
  • Unionen — kontinuerlig UX- och designvidareutveckling sedan 2012 för unionen.se. Se /kundcase/unionen.

German Design Award 2024 för designarbete.

De vanligaste frågorna

Hur skiljer sig B2 från B1? B1 svarar på vad ni ska bygga och varför — discovery, användarresearch, konceptvalidering. B2 tar det validerade konceptet och gör det till färdig produktdesign som kan implementeras. B2 förutsätter alltså att konceptet finns. När det inte gör det börjar vi i B1.

Hur byggs tillgänglighet in? WCAG 2.2 AA är miniminivå i alla komponentvarianter — kontraster, fokusindikatorer, tangentbordsstöd, semantik. Vi gör automatisk kontroll i Figma och manuell granskning före handover. För specialistaudit på EAA-nivå kopplas B4 in.

Vad händer om vi har ett befintligt designsystem? Då följer vi det. B2 designar för en specifik produkt och konsumerar befintligt designsystem. När det inte finns ett — eller när det behöver generaliseras över flera produkter — är det B3 som tar vid.

Relaterat