Tillsammans med en av 3bits äldsta kunder, Textilhuset, har vi tagit fram en ny webbshop med uppdaterad design.
Vi har haft ett framgångsrikt samarbete sedan 2009 och är väldigt glada för förtroendet att här göra något helt nytt.
Tidigare lösning byggde på nopCommerce mot NAV och den nya lösningen är 3bits Blueprint rakt mot BC Cloud. Ett riktigt spännande projekt som vi gärna vill visa mer av. I den här första delen kommer vi att fokusera på designförändringarna.
Uppdaterad design
UX/UI har gjorts genom ett tätt samarbete med kunden. Eftersom Textilhusets produkter och bilder ofta är färgstarka valdes en mer stilren design.
- En ny blå primärfärg har valts som finns i logotypen och som återkommer på knappar och andra delar för att dra till uppmärksamhet eller öka kontrasten.
- Layouten har breddats för att passa Textilhusets kunder som gärna handlar på desktop och som lägger många varor i sin korg.
- Ett genomgående sans-serif typsnitt har valts för att passa webben och ge ett lugnt intryck.
I den gamla designen fanns det en del outnyttjad yta bredvid loggan som vi nu i stället har använt till både Sök, Logga in, Mina varor och Varukorg, samt att loggan har förenklats för att ta mindre plats. De viktiga funktionerna har även fått större typsnitt och ikoner för att visa hierarkin. Här har vi även lyft ut produktkategorierna i menyn så att man snabbare kan klicka sig in på det man är ute efter eller vill utforska mer.
Startsidan har ett inspirerande innehåll med skyltfönster och länkar där produkter kan taggas direkt i bilderna.
Produktsida med olika variationsmöjligheter
Ett mål med produktsidan var att göra det enklare för kunderna att handla och att förbättra köpupplevelsen med bilder och designförändringar.
Förutom den mer traditionella produktsidan har vi även skräddarsytt flera olika varianter av produktsidor anpassat utefter olika produkter och hur kunderna köper dem. Ovan är ett sådant exempel med ett tyg som finns i olika färger och längder.
Vi har gjort specifikationer och informationen om produkten synligt i toppen av produktsidan i stället för att vara gömt under en flik. Detta är något som Textilhusets kunder har stor nytta av då man i många fall måste veta specifikationerna för en produkt. Du kan också klicka direkt på den längd du vill lägga i varukorgen och behöver inte som på den gamla sidan först klicka på Välj längd för att sedan i ytterligare ett fönster välja storlek, vilket gör det snabbare att handla. Särskilt om du handlar ett stort antal storlekar och färger som deras kunder ofta gör.
I denna variant där vi jobbar med de olika färgerna i så kallade kort så har vi fördelen att produktbilderna blir stora och kunden kan då få en bättre uppfattning av färgen och texturen på tyget till skillnad från den gamla layouten när det var små bilder i en lista. Du får också möjligheten att använda produktkortet för en specifik färg av ett tyg på andra sidor, till exempel vid relaterade produkter, kategorisidor eller på innehållssidor.
En annan produktvariant är en typ av matris/tabell där du får en översikt över alla produktens olika storlekar och varianter och snabbt kan lägga produkter i varukorgen.
Arbetssätt och verktyg
All design är gjord i Figma, ett modernt designverktyg, där du inte bara ser själva designen utan där det även skapas interaktiva prototyper. Du kan sedan dela prototypen med beställaren som då kan se exakt hur webbsidan kommer att se ut och kan klicka sig runt på sajten i sin webbläsare. Du kan också lägga kommentarer direkt i prototypen som går att nåla fast där du vill ha dem.
Under designarbetets gång hade vi hela tiden nära kontakt och avstämningsmöten med Magnus Bennegård som är E-handelsansvarig på Textilhuset. Då Magnus har direktkontakt med många kunder och en övergripande inblick i verksamheten kunde vi hela tiden få värdefull feedback och information om kundernas beteenden och önskemål.
– Det har varit väldigt givande att få se Textilhusets nya e-handel växa fram under både designarbetet och utvecklingsfasen. Vi har verkligen jobbat tillsammans med 3bits för att skapa något som ska ge ett värde till våra kunder och vi är mycket nöjda med slutresultatet, säger Magnus Bennegård, E-handelsansvarig på Textilhuset Swelogent.
Tydlig, snabb och användarvänlig
Slutligen vill vi nämna några viktiga saker att tänka på under designarbetet.
Användarvänlig – Vi har alltid slutkunden i åtanke när vi designar och ställer ofta frågan – Vad är bäst för användaren? Vi vill att det ska var så smidigt och enkelt som det bara går för kunden. Detta uppnås genom att noga tänka igenom flöden och kundens resa. Men det är också något som det visuella i sig stödjer. Genom att ha en tydlig hierarki i designen visar man kunden vad som är viktigt och det blir enklare att förstå innehållet. Man kan leda kundens öga genom att använda storlek, färg och kontraster. Även genom att vara konsekvent i designen och använda samma designspråk genom hela sajten blir det tydligare för kunden att första vad den kan och bör göra.
Estetiskt tilltalande – Det ska vara snyggt också så klart, även om det uppfattas på olika sätt. Men en modern och tilltalande webbsida ger ett bra intryck och det blir lättare att sälja produkterna. Vi är noga med detaljer och ser till att designen är harmonisk och balanserad. En viss stil och färg kanske passar sämre till en viss typ av produkter, men väldigt bra till en annan typ av verksamhet.
Prestanda – Även om vi i detta caset går igenom designen kan det vara värt att nämna prestandan på sajten. Genom att förverkliga designen med blixtsnabb teknik så får kunden en pigg och sömlös köpupplevelse. Det är tusentals produkter som hanteras, visas i sökresultat och liknande vilket gör tekniken desto mer avgörande för att allt ska gå så snabbt som man förväntar sig av en modern e-handel. Vi kommer att visa mer av de tekniska delarna i nästa del av kundcaset om Textilhusets nya webbshop.
Bilderna i caset är från designfasen i Figma och illustrerar hur vi arbetade fram lösningen. Den slutliga versionen av webbsidan som är publicerad kan se annorlunda ut.
