UX-design – för användarupplevelser som konverterar

Har du någon gång upplevt en riktigt krånglig webbplats? Som inte alls haft dig i fokus, alltså du som användare? Språket och navigationen är helt “inifrån-och-ut”? Och till råga på allt kanske det tillhör ditt försäkringsbolag, din vårdgivare eller din bank, så att du liksom inte riktigt kan gå någon annanstans just nu, utan tvingas försöka förstå hur du i allsindar ska komma framåt mot ditt mål med ditt besök på sajten eller i appen. Börjar du koka av bara tanken? Vi gissar att du diggar riktigt bra UX-design du också.

Med användaren i fokus hjälper vi dig att designa en digital produkt som du kan vara stolt över. I den här artikeln berättar vi om hur vi jobbar och vad vi tycker är viktigt när vi arbetar fram en webb eller app med dina användare i fokus.

Vad gör en UX-designer?

En UX-designer har stenkoll på vilka dina användare är och vad de behöver av din webb eller app för att hitta lösningar på de problem och frågor eller det köpsug de kommer dit med.

UX:aren ser till att din webb eller app bara funkar. Rätt sak på rätt plats, inga överraskningar. Om man jämför din webb med ett hus så är UX-designern arkitekt och konstruktör i ett. Alla rum ska finnas och vara lätta att komma till. Det finns el i uttagen, vatten i kranarna, handtag på dörrarna. Inget kärvar och allt är stabilt och säkert. Och man ska genast förstå vad varje rum har för funktion och nytta, utan att någonsin ägna det en tanke. Egentligen sådant man bara tar för givet.

När väggar och tak, el och golv är på plats kan den grafiska designen läggas till. Som möbler, belysning och tapeter i ditt hus. Utan din designer faller det grafiska platt och utan den grafiska designen blir ditt hus riktigt trist, men också svårt att navigera i.

Så jobbar We dig it med UX-design

Just webbprojekt är ofta ingången till nya kundsamarbeten hos oss. Vi får en förfrågan om att pigga upp en befintlig webb, bygga en webb eller app från ett vitt papper eller utföra en UX-audit där förväntningarna för till exempel konverteringsgrad på en befintlig webb inte riktigt slagit in.

Research för en bättre användarupplevelse

Var vi än börjar, går vi alltid igång med att läsa in oss på dig som kund, dina användare, dina konkurrenter och marknaden du agerar på. Vi vänder oss till din varumärkesstrategi för att få koll på ditt uttryck, vilket ibland resulterar i att vi behöver pigga upp även din grafiska profil. 

Digital ramverk – See, Think, Do, Care

När vi utvecklar en digital produkt arbetar vi tillsammans med dig i ett ramverk som kallas STDC – See, Think, Do, Care. Modellen handlar om att kategorisera dina besökare i dessa fyra olika grupper för att vi ska vara säkra på att vi möter varje besökares enskilda behov med rätt innehåll oavsett hur långt de har kommit i sin kundresa.

Ramverket hjälper oss se din verksamhet ur din kunds perspektiv och används för att bygga upp ditt innehåll. Vi ställer oss frågor som: 

• Vad vill din kund genomföra på din webbplats idag?
• Vad är målet, eller behovet med dagens besök?

See – Alla dina potentiella kunder. Ej medvetna om behov. Ingen köpavsikt. Inspirera.
Think – Potentiell kund. Medveten om behov. Köpavsikt. Informera.
Do – Potentiell kund. Stark köpavsikt. Ge ett erbjudande.
Care – Befintliga kunder. Genomfört köp. Skapa mervärde.

När vi har arbetat igenom din värld och omvärld och satt dig på kartan i STDC-form kan designarbetet börja. På We dig it arbetar vi i tre faser:

1. Sidstruktur
2. Wireframes
3. Designskiss / slutdesign

Din sidstruktur är avgörande för dina kunders användarupplevelse

En sidstruktur är din plan för ditt innehåll. Hur din besökare ska mötas av ditt innehåll och hur denne ska ta sig igenom din försäljningstratt. Sidstrukturen har en stor uppgift att ta hand om – den ska se till att din webb eller app är enkel att navigera. För både människa och sökmotor.

Webbens navigering är viktig av flera anledningar. Om dina besökare upplever din webb som krånglig förlorar du kunder och affärer. Sökmotorer snappar snabbt upp att dina besökare skyndsamt lämnar din sida och kommer att ge dig lägre ranking för dina viktiga sökord, vilket betyder färre nya besökare via sökmotorer. En krånglig app eller webb förlorar såklart också i konverteringsgrad. Så man kan säga att med en stökig sidstruktur behöver du jobba hårdare för att attrahera besökare och ännu hårdare med att konvertera dem till kunder. En loose-loose situation kan man säga. Satsa på win-win och var noggrann när du skapar din sidstruktur. 

Ofta arbetar vi parallellt med SEO när vi designar en ny webbprodukt. Det ger dig alltid en fördel konkurrensmässigt eftersom vi då har koll på sökbeteendet för ditt erbjudande. I och med det har vi möjlighet att utgå både från SEO-strategi och användarupplevelse när vi sätter din sidstruktur.

Wireframes är grunden till din UX-design

Wireframes kallas ibland för trådskisser på svenska men det får bara ynka 1800 träffar på google jämfört med 54 miljoner för engelskans wireframes. Så det verkar som det är lättare att gå med flytet (som man säger) och kalla det för wireframes. Det handlar om en visuell guide som visar ramarna för din webbprodukts utformning. Den grundläggande layouten, den röda tråden i din navigation och hur webbplatsen ska struktureras. Fokus ligger på användarupplevelse och flöde. 

Dina wireframes visar var olika innehållskomponenter tar plats och vad de ska innehålla. Här tillbringas livet i svart-vitt så att fokus blir på funktion snarare än form. Vi tycker om att spendera den största delen av designuppdraget i wireframes. Alla beslut som rör användarupplevelsen ska fattas här och de gånger vi genomför användartester är det också i wireframes som de går av stapeln. 

Skisserna utgår från STDC-ramverket och din SEO-strategi och agerar beslutsunderlag mellan dig och vårt eminenta design-team. För att det ska bli så tydligt som möjligt för dig att förstå brukar vi skapa mockups så att du kan klicka dig igenom wireframes och få en känsla av navigering och innehåll. Här ser vi tydligt om vi prioriterat rätt, en kvalitetssäkring både för kund och designer.

Här kan det lämpa sig med en skål i bubbel. Det brukar göra gott! 🍾

Designskiss, dags för färg och form för din UX

Äntligen möbler i huset! I den här fasen målar designern med ditt visuella uttryck. Din palett, din typografi. Här kommer ditt varumärkes personlighet fram och vi puttar på pixlar så att det blir exakt så som vi vill ha det. Med hjälp av färg och form guidar vi din besökare framåt på din webb. Vi vill vara så konsekventa som möjligt i formen för återkommande element, som till exempel länkar, knappar och symboler, allt för att dina användare ska känna igen sig och veta exakt hur de navigerar på din webb.

Här häller vi in mer “riktigt” innehåll så att vi ser mer av den slutgiltiga produkten. Vår UX-writer gör entré (denne har hovrat över projektet och studsat i bakgrunden länge och får äntligen skrida till verket.)

När designteamet och kunden är nöjda och överens lämnas arbetet över till en webbutvecklare för att förverkliga designen i HTML. 

Designer tar en paus och i de allra flesta fall rycker nya specialister in och tillsammans kavlar vi upp ärmarna för att driva trafik till din sprillans nya webb. 

Vad kostar det att bygga ny webb?

Kostnaden för att bygga en ny webb varierar stort och beror på flera olika saker. Om du ska bygga helt nytt eller fokuserar på att fräscha upp. Hur stor din webbplats är och hur många olika typer av sidor som behöver designas. Det beror också på om den ska byggas upp från befintliga mallar i till exempel WordPress eller om den ska byggas med ett unikt uttryck, i fri kod. 

Börja med att fundera på om din webb är användarvänlig idag. Skulle du kunna göra förbättringar? Glöm inte att här finns affärer att hämta!