Maj
25
2014

Case: Redesign af forside for uCommerce.net

I denne blog post vil jeg tage dig igennem tankeprocessen bag at (re)designe en forside. Design kan godt være noget forfærdeligt teoretisk eller subjektivt noget, forhåbentligt vil denne historie give dig et kort indblik i, at det rent faktisk også kan gøres med en hel del omtanke også.

Min tidligere arbejdsplads uCommerce har været så utroligt flinke, at lade mig fortælle historien om noget af det arbejde, som jeg foretog hos dem.

Den originale version

Den originale version af uCommerce.net havde ikke ligefrem det, man kalder et tidssvarende design. Samtidigt var den meget upersonlig og corporate, og utroligt statisk. Det var begrænset, hvor meget der skete på den forside, så den trængte til en opdatering.

Den gamle uCommerce

Dette design var helt sikkert godt nok i 00'erne, men efterlader ikke ligefrem et top professionelt indtryk i år 2013. Noget skulle gøres.

Der var godt nok midlertidigt en anden forside, end denne her, som blev lavet i forbindelse med skift af logo og visuel identitet. Men den var kun online i et par måneder, før den nye blev lavet. Så den springer vi lige let og elefant hen over.

Målgruppen

Når man arbejder med kommunikation, både i tekst, video og/eller billeder, så er det ekstremt vigtigt man starter med at få beskrevet en eller anden form for målgruppe. Ellers risikerer man at ramme helt ved siden af med sit budskab.

De besøgende til uCommerce's forside blev overordnet set proppet ned i to grupper: 

  1. Dem, der ikke kender uCommerce
  2. Dem, som kender uCommerce

Målgruppe 2 kommer som regel ind på sitet med et helt klart formål. Det kan være de er ude efter en download, ude efter support eller ude efter kontaktinformationer. Det er min klare overbevisning, at hvis man på den facon er ude efter noget helt specifikt, så er forsidens vigtigste formål hurtigst muligt, at få sparket brugeren ind i en undersektion, der har det, de er ude efter.

Det kan en diskret topmenu jo sagtens stå for. "Diskret", fordi brugere, der jagter efter noget specifikt sagtens kan få øje på den, og fordi den helst ikke må tage opmærksomheden væk fra sidens øvrige budskab.

Det efterlader den anden målgruppe, dem som ikke kender uCommerce, og forsiden kan derfor koncentrere sit budskab imod disse.

Den nye forside blev bygget op af en række sektioner, eller "bånd" som vi endte med at kalde dem, som har det formål langsomt at bygge troværdighed op, og svare på de spørgsmål som brugeren måtte have, i den rækkefølge de opstår. For så til sidst at forsøge at lede dem hen til enten et makro- eller mikro-konverteringspunkt.

Båndene er desuden bygget op med masser af white space og skiftevis lys og mørk baggrundsfarve, så der er ikke et øjebliks tvivl i følge gestaltlovene, at hjernen nok skal forstå og opleve de forskellige bånd, som individuelle budskaber.

Førstehåndsindtrykket betyder alt

Jeg er en stor fan af disciplinen neurowebdesign, som kort fortalt går ud på at forstå, hvad der sker inden i hjernen, når man "oplever" en webside.

Neurowebdesign (en under-disciplin af neuropsykologi) har bl.a. som fundament, at det som den bevidste del af vores hjerne ser, rent faktisk ikke er den objektive virkelighed, men en fortolkning af den. Kort fortalt går det ud på, at "jeg'et" simpelthen ikke har tid til at tolke alt det vi ser, 24 gange i sekundet, så derfor sker der en grovsortering, inden "billederne" når frem til den bevidste del af hjernen.

Fortolkningen grovsorterer og fremhæver sektioner af et "billede" ud fra spørgsmålene:

  • Er her noget, du måske skal passe på? F.eks. en løve eller en tiger. Nogle faresignaler, som du lige skal give lidt ekstra opmærksomhed?
  • Er her noget, du kan parre dig med? Dette gælder forøvrigt både kvinder og mænd.
  • Er her noget du kan spise? Eller nærmere bestemt, hvor vil syncenteret gætte på der er noget, som kan bringe dig et skridt tættere på dit mål.

Hvis hjernen allerede i synscenteret spotter "her er noget, der ser forkert ud", så starter et design allerede i minus, inden man er begyndt at tænke over det. Og det er noget skidt. Men ligesom et design kan starte i minus, så kan det også starte i plus, hvis man spiller på de rigtige psykologiske signaler.

Læs evt. min gamle post "Designer du til hulemænd?" for en introduktion til denne tankegang.

Det første "bånd" i designet har derfor det helt klare formål, at stille synscenteret tilfreds. At kommunikere til det, at det her er et trygt og sikkert sted at være, som nok skal lede dig viderere mod dit mål.

uCommerce ny, bånd 1

Hjernen er hard-codet til at genkende ansigter i et billede. Især, hvis du mødes af et smilende kvindeansigt, der kigger dig lige ind i øjnene. Det kan simpelthen ikke undgåes, at det trigger en positiv kemisk respons i din hjerne, og studier har vist at du tager denne positive respons med dig, ikke bare i hvordan resten af siden læses, men oven i købet i flere kliks efterfølgende.

Så godt nok vil nogle sige, at det her stock photo er noget skidt. Men det er den bevidste del af hjernen, der siger det, fotoet har faktisk allerede nået at have en positiv effekt. Plus, ingen af de ansatte hos uCommerce var kønne nok til at fremprovokere den samme effekt, undertegnede inklusiv ;-)

Ligeledes er der en klar call-to-action, uanset hvad der så står på den. Hjernen er ikke nået til det punkt, hvor den er begyndt at læse endnu, synscenteret har bare identificeret, at her er vist et tydeligt punkt, der kan bringe dig videre.

Så lutter positive signaler bliver sendt med af synscenteret, når billedet endelig når op til vores bevidste del af hjernen, og skal foretage en grundigere forarbejdning.

What's all this then?

Nu hvor førstehåndsindtrykket gerne skulle være på plads, og synscentret forhåbentligt spinder som en glad missekat, så er det tid til at forklare, hvad det her rent faktisk er for en dims.

uCommerce ny, bånd 2

Først kommer et rent tekst-bånd, der så kort som muligt opsummerer, hvad produktet går ud på. Det er tæt på, hvad man kunne kalde en Vision Statement, og fortæller bl.a. hvorfor dette produkt overhovedet har en eksistensberettigelse. Indrømmet, der kunne sagtens arbejdes mere med denne tekst. Men det er også med at komme ud over stepperne, inden for mange chefer får nedsat en komite og derved formudrer budskabet.

Dette bånd har også det formål, at give GoogleBot en lille chance for at forstå, hvad denne side egentligt går ud på.

Næste bånd forklarer kort uCommerce's tre overordnede produkter. Og fremhæver tydeligt med den klare, orange call-to-action farve på download-knappen, at du allerede kan komme igang med det samme. Bemærk desuden, at når man er scrollet her ned, så er den tidligere orange call-to-action knap i de fleste tilfælde scrollet op og væk. Man må aldrig, aldrig   have mere end én primær call-to-action knap i stærke kontrastfarver på skærmen ad gangen!

Hver knap leder faktisk ikke ind til en download eller buy side, men til en mere detaljeret side samt en feature comparrison. Men også med tydelige call-to-actions der, så brugeren nemt kan hoppe videre til download eller buy, uden at tænke så meget over det.

Nu skulle produktet gerne være forklaret i meget korte træk, tid til at spille på nogle andre tangenter.

Tid til Social Proof

Forskellige mennesker opfatter på forskellige faconer. Indtil videre har uCommerce selv stået for at fortælle, hvor fantastiske de er, nu er det på tide at hive The Big Guns ind, og lade andre fortælle det samme.

uCommerce ny, bånd 3

Først kommer en killer-case-story. Hvis det her produkt er godt nok til Carlsberg, mon det så ikke også er godt nok til dig?

For derefter at bakke case storien op med en slider, der viser at der er altså mange, mange andre, der tør bruge det her produkt.

Vi overvejede at bakke Social Proof yderligere op med et bånd med citater og profilbilleder, de såkaldte testimonials. Men enough-is-enough, og den slags citater har det med at være overdrevent positive. De ville desuden have taget tid at fremtrylle, tid som vi ikke havde til projektet. 

Tid til at vise dyret frem

Nok snak, nu er det tid til at vise dyret frem! Og hvordan gør man det bedre, end med en serie af videoer?

uCommerce ny, bånd 4

Først kommer et bånd med en slider med en stribe videoer, der går i detaljer med produktet. Både med de forskellige koncepter i produktet, men også med en gennemgang af back-end'en. Det giver som regel brugeren en god følelse for, hvordan produktet rent faktisk er at have i hånden.

Det næste blå bånd springer vi let hen over. Det er egentligt bare en kort, visuel adskiller, da ingen af de to andre bånd fungerede godt med en mørk baggrund.

Så kommer et lidt større bånd, der i hovedtræk forklarer de forskellige feature sets. Og giver brugeren mulighed for at klikke sig dybere, hvis nogle af dem skulle have yderligere interesse.

Tid til at kroge fisken!

Nu skulle produktet gerne være tilstrækkeligt forklaret, og brugeren skulle gerne være understøttet i, at det her måske er værd at tage et nærmere kig på. Så nu er det tid til at slutte af med nogle conversion points!

uCommerce ny, bånd 5

Historien, vi ønsker at fortælle, skulle nu gerne være fortalt, og det er nu op til brugeret at beslutte, hvad Next Step skal være.

Footeren giver desuden mulighed for, at holde ekstra øje med uCommerce via de sociale medier eller via et nyhedsbrev.

Og som kirsebæret i toppen, så popper et vindue op med hvad der egentligt er det primære formål for siden: At få brugeren til at booke et demo! Popup'en (som internt passende blev døbt demo trolden :-), popper op i bunden af samtlige sider. Ikke forstyrrende midt på siden, så snart man kommer ind på sitet, da den gerne skulle give den pågældende side tid til at komme ud med sit budskab, inden den dukker op.

Den giver desuden en sidste, tydelig call-to-action i kontrastfarver, samt et menneskeligt ansigt.

Om processen

Meget kunne helt sikkert gøres bedre. Men fra creative brief blev brainstormet, til designeren blev hyret ind og til forsiden gik live, gik der kun 14 dage! Det er bl.a. en af årsagerne til, at der ikke var tid til at høste testimonials.

Denne speed process havde den helt klare fordel, at det var nemt at holde linien, den røde tråd, den overordnede vision, uden at andre lige skulle forsøge at sætte sit fingeraftryk på det. 

Jeg kan kun på det varmeste anbefale, at når man starter et designarbejde, så sætter man sig ned og skriver et Creative Brief, der kort opsummerer hvem målgruppen er, hvad man ønsker at opnå hos den, og evt. et kort wireframe. Det har den fordel, at alle stakeholders er enige inden designeren går i gang. Skulle nogen undervejs så komme op med "en god ide", skal der argumenteres grundigt ud fra, om den bryder med briefet. Det plejer at fokusere processen en hel del, og sørge for, at designeren får ro. I denne case så meget ro, at han kun tog 4-5 timer på at lave designet.

Jeg håber denne case har givet dig lidt indsigt i, hvordan det er at arbejde struktureret med et design. Hvis du har spørgsmål, er uenig i noget, eller gerne vil høre mere om enkelte dele, så læg endelig en kommentar!

Og husk at klikke dig videre ind til uCommerce.net for at få den fulde oplevelse af designet.

Kunne du lide denne blog post?
 
Så giv mig mægtigt gerne en +1, så jeg ved at jeg skal skrive mere af denne slags. Eller læg en kommentar herunder, så jeg ved om det jeg skriver er godt / skidt.
9 kommentarer
 Fed tilgang til redesignet! Det er fedt at se værdien af at starte med en præcis definition af målgruppen, og hvor let det bliver at prioritere indholdet, når først målgrupperne er fastlagt.

Og imponerende hurtig proces! Men det lader heller ikke til at I har set jer tilbage da I først slap koblingen :)

Vedr. "vision statement"-båndet, så ville jeg inkludere teksten "uCommerce is a powerful e-commerce platform for Umbraco and Sitecore" som står længere nede på siden. Den sætning forklarer kort og præcist hvad det er, og det synes jeg mangler lidt, så man har helt styr på produktet inden man går videre til USP'er, features og cases stories. Der bliver desuden brugt ord som framework og integration, som nogle måske ikke forstår betydningen af og dermed ikke kan afkode hvilke fordele det giver brugeren. Så jeg ville få helt styr på hvad produktet er, så man har en kontekst inden de tekniske begreber kommer på banen.

Jeg tænker også det kunne være oplagt at opstille "A solution that fits you" som bullets med flueben, istedet for brødtekst, da det er meget nemmere at overskue og sammenligne features på den måde, fremfor en tekstblok.

Men rigtig godt udgangspunkt med flere oplagte splittest der skal køres. Fx at smide Carlsberg historien helt i toppen, som appetitvækker for resten af siden.
Jacob Worsøe , den 26. maj 2014 14:24:28
.
Kommentar-muligheder er desværre midlertidigt slået fra. Der kommer simpelthen for meget spam ind.
Bemærk: Dit website link i kommentarer har NOFOLLOW. Det betyder det ikke har nogen SEO-mæssig værdi, så du kan lige så godt angive dit rigtige navn og et relevant link. Kommentarer, der bryder med dette, vil blive slettet øjeblikkeligt.
 
Det du indtaster som navn, e-mail og website vil desuden blive gemt i en cookie i din browser, så det er nemmere for dig næste gang du vil skrive en kommentar. Det er desværre ikke muligt at frabede sig dette.
 
Om mig
Jeg er en pragmatisk midtjyde med mere end 20 års erfaring i IT-branchen, de sidste 10 med alt inden for eCommerce.
Se hvad jeg kan gøre for dig
Eller se min referenceliste
 
Nyhedsbrev
Få besked per mail, når der er nye posts her på bloggen
 
Tilmeld nyhedsbrev
 
Samtidigt får du en mail med de bedste indlæg, så du ikke behøver at vente på guldkorn.
 
Få det som RSS feed     RSS feed
Få også kommentarer, sitemap
Kategorier
 
Søg
Jeg anbefaler
Rapporten over alle rapporter anno 2012, vinder af SEMaward 2012
 
Rapporten over alle rapporter anno 2012, vinder af SEMaward 2012
 
GA tricks: Skaffer mine kampagner nye eller gamle kunder? vinder af SEMaward 2011
 
Google Analytics rapporten over alle rapporter, vinder af SEMaward 2010
Afdeling 18 Søren Sprogø E-commerce Guru work Grønnegade 3, st. tv. 8600 Silkeborg Danmark work 26727404 56.165787 9.537120 Søren Sprogø Cookies