Stäng

Meny

E-handelsbloggen / Så fångades YlloTylls känsla och själ i nya webbshopens layout

Så fångades YlloTylls känsla och själ i nya webbshopens layout

När YlloTyll vände sig till oss hade de mångårig erfarenhet av både e-handel och dessförinnan postorder. Nu ville man ta ett stort kliv framåt, vilket bland annat innebar integration mot deras affärssystem FDT Avance, nya användarvänliga funktioner som gör det lättare att handla i webbshopen samt en modernare layout. Med ett sortiment som fullkomligt exploderar i olika färger behövde webbshopens gränssnitt och layouttema som motsats vara lugn, enhetlig och stilren i färg och form. Här berättar vi lite mer om hur layouten togs fram och lite bakgrundstankar kring den!

När man kliver in hos YlloTyll i Uppsala, ett eldorado i färg och form för kreativa människor, möts man av garner både på bredden och höjden och från när och fjärran. I butiken kan man se både personalen och deras kunder klättra på stegar för att nå alla garner de har högt upp. I sortimentet finns garner från både Uruguay och Peru samt från Sverige, Norge och Danmark med flera. Redan från första början, när butiken startade 1985, har inriktningen varit naturmaterial och gärna garn från närliggande leverantörer. Man tar även fram egna YlloTyll-modeller för barn och vuxna samt anordnar och engagerar sina kunder i uppskattade kurser, knit-alongs och stickcaféer.

Efter en inledande projektstart och förstudie tog YlloTyll fram en moodboard med bilder för deras formspråk och vilken känsla de ville skulle förmedlas. Här nämndes bland annat att det skulle kännas personligt, kreativt, rustikt, hållbart och urbant – d.v.s. en återspegling av deras butik och vad YlloTyll står för. Även att försöka ge besökaren en känsla av att vara på plats i butiken, komma nära och uppleva. Man ville även använda naturliga material och stadsmiljö i kontrast till det mjuka garnet.

Vi träffades för att diskutera den nya layouten och bolla tankar och idéer. Den gamla webbshopen gicks noga igenom och vi lärde oss om YlloTylls målgrupp och om hur garner och mönster säljs. Även om en layout ofta tar form under projektets gång, är det alltid viktigt att få en helhetsbild för att förstå och kunna bilda sig en uppfattning och målbild om hur ett slutresultat för layoutprojektet kan se ut. Vi gick även igenom och visade hur befintliga kunder till E37 har gjort för olika innehåll, detaljer och funktioner i deras webbshopar samt studerade YlloTylls konkurrenter och vissa leverantörer.

Nya typsnitt för rubriker och brödtext

Tidigare typsnitt som använts i gamla webbshopen är Open Sans, Patrick Hand och Love Ya Like a Sister. Vidare används även Century Gothic i deras stickmönster. Här ville YlloTyll passa på att förnya sig och samtidigt minska antalet typsnitt som använts.

Ett önskemål var kontraster med olika relativt neutrala typsnitt och att exempelvis jobba med sans-serif mot serif-fonter. De ville även frångå de mer handskrivna typsnitten som man kan tröttna på i längden och använda mer neutrala typsnitt med förhoppning att de blir lite mer tidlösa.

Vi bestämde tidigt att det skulle räcka med två olika typsnitt. Ett för större rubriker (med seriffer) och ett för både mindre rubriker och brödtext (utan seriffer). För stora rubriker valdes Averia Serif Libre med små och mjuka seriffer som matchar bra med ett garnnystans runda former.

För brödtexten ville vi ha ett ganska runt, mjukt och lättläst typsnitt, där även Century Gothic var en liten utgångspunkt. Ett typsnitt som initialt användes i en första skiss var Poppins, men vi valde senare istället Mont. De båda typsnitten är väldigt lika varandra men Mont valdes eftersom det har några små detaljer som ger det lite extra karaktär.

En enhetlig färgskala helt i brunt

I den grafiska profilen för YlloTyll används färgerna brun, vit och beige. Till skillnad mot den gamla webbshopen ville man använda övergripande vitt för att skapa en luftighet och renare känsla tillsammans med bårder i beige och detaljer i brunt. Något som skapar en extra YlloTyll-känsla är att även texterna är bruna, d.v.s. inga svarta eller grå nyanser alls i hela webbplatsen. Det ger en färgmässigt enhetlig och mjuk känsla som dessutom inte konkurrerar med de färgstarka produktbilderna.

Detaljer i den nya layouten

Varugruppsmenyn var tidigare placerad vertikalt i en vänsterspalt i föregående layout. För att få tillgång till bredare innehållsyta och exempelvis kunna visa fler tumnagelbilder i bredd, flyttades varugrupperna till en horisontell meny med undervarugrupper i en drop-down. Varugruppsträdet har även byggts om och ger nu besökarna fler vägar att hitta rätt produkt. I drop-down-menyn under respektive huvudvarugrupp kan YlloTyll även lägga in länkar till guider och inspirationssidor med mera.

I den gamla layouten framhävdes tydligt att frakten är 49 kr, med texten ”fraktfritt över 500:-” i mindre stil under. Vårt förslag var istället att visa kvar till fri frakt i direkt anslutning till varukorgen. På detta sätt framgår förvisso inte fraktkostnaden direkt, men man informerar tydligare om hur nära man är till att få fri frakt. Tanken här är förstås (1) att kunderna inte ska missa fri frakt-gränsen och (2) öka merförsäljningen.

Sociala medier-ikonerna är viktiga för YlloTyll och dessa ville behållas på liknande sätt som de visades i gamla webbshopen. För att smälta in i en stilrenare design behövde de dock tonas ned färgmässigt, utan att bli otydliga eller för diskreta. Vi valde att lägga in dem i en enhetlig vit färg på en brun bakgrundsfärg överst i sidhuvudet, samt som större ikoner med förklarande texter till längre ned på sidan ovanför sidfoten. De större ikonerna kan YlloTyll välja att visa endast på startsidan, på utvalda sidor eller genomgående i hela webbplatsen beroende på hur tydligt de vill att de ska visas.

Då utbudet av mönster och garner av olika material och färger är enormt, lades en funktion för att favoritmarkera produkter till. När man som kund väljer och jämför både mönster och färger kan intressanta produkter favoritmarkeras och samlas på en och samma sida. Praktiskt om man exempelvis återvänder till webbshopen vid ett senare tillfälle.

Då vissa produkter endast säljs i webbshopen behövde detta tydliggöras redan i varugruppsvyn. Det händer ibland att en kund tittar vilka produkter som finns i varugrupperna för att sedan ta sig till butiken för att köpa. För att markera dessa produkter används etiketter med texten ”Endast webbshop”. Etiketter kan även användas för att visa nyheter, kampanjer, prissänkningar eller andra helt valfria texter.

Med ett brett sortiment gör ett filter stor nytta, som både blir en slags guide och genväg för att snabbt hitta rätt produkter oavsett vilken nivå i varugruppsträdet man utgår från. Med hjälp av taggar har YlloTyll bland annat märkt upp alla garner i deras sortiment efter vilken garngrovlek de har på Ravelry, en slags mötesplats för alla som älskar att sticka och virka. Utifrån det kan besökaren filtrera garn eller mönster efter dessa grovlekar och på så sätt lättare hitta ett garn som passar ett mönster, eller tvärtom.

Ett registreringsformulär för nyhetsbrev lades till stort och tydligt ovanför sidfoten. Formuläret visas på alla sidor och fick bli en tydlig avdelare mellan respektive sidas innehåll och sidfoten under. Även sidfoten, som var minimal tidigare, fick större utrymme med mer innehåll där kunderna får den viktigaste informationen samlad.

Sökrutan flyttades från höger till vänster sida och är på så sätt nu placerad mer i fokus för besökarens blick. Förutom att den gjorts större och mer inbjudande har den blivit smartare funktionsmässigt och kan även hjälpa till med sökförslag medan besökaren skriver.

I designarbetet ingår även alltid att ha med och visa relevant information för sökmotorer i åtanke. En H1-rubrik och kort text om YlloTyll lades exempelvis in på startsidan tillsammans med många andra detaljer för optimal indexering i Google.

Genom att lägga ner ett stort jobb på att ta många egna produktbilder har webbshopen fått en egen personlig prägel och enhetlig stil. Garnerna har fotograferats mot en träbakgrund, istället för friliggande med vit bakgrund, och deras färger framhävs på så sätt ytterligare samtidigt som bilderna känns livfullare och varmare.

Mönsterbeskrivningar med tillhörande garn och tillbehör

En viktig del i projektet och för YlloTyll är att sälja mönsterbeskrivningar för stickning där kunden kan välja till garn i rätt mängd och färg för storlek och mönster. Tidigare fick kunderna göra detta manuellt genom att hoppa mellan olika popup-rutor, med risken att bland annat garnmaterial och mängd lätt kunde bli fel. Detta behövdes nu göras på en och samma sida på ett smidigare och användarvänligare sätt.

Lösningen blev att använda tillvalsartiklar där YlloTyll för varje mönster kan koppla vilka garntyper som behövs, rätt mängd färger av varje garn samt ställa in vilka färger som ska vara förvalda för att matcha mönstret i bilden. Varje garn har även en text som talar om hur mycket som behövs beroende på vilken storlek av exempelvis en tröja som ska stickas. Därtill kan YlloTyll även lägga till fler tillval som exempelvis stickpinnar. Allt detta skulle visas på en och samma artikelsida och läggas tillsammans i varukorgen, där mönstret och dess tillvalsartiklar visas sammanhängande genom kassa och orderbekräftelse.

Ytterligare ett önskemål var att kunna sälja kataloger med mönster. En katalog kan köpas separat, men troligtvis vill kunden samtidigt köpa garn för att sticka något av mönstren i katalogen. Mönstren i katalogen kan i många fall dock inte köpas separat. För att kunden ska kunna se vilka mönster som ingår i katalogen, vilket garn som behövs och antal med mera, fick varje mönster läggas upp som egna artiklar men som inte är köpbara. Mönstren nås via artikelsidan för katalogen som relaterade artiklar. Dessutom har mönstren lagts in i varugrupperna för att kunden ska kunna filtrera fram exempelvis ”flerfärgsstickad herrtröja i Finullgarn” och då komma till mönstret direkt. På så vis kan kunden i dessa fall köpa en katalog, se mönstren den innehåller och samtidigt köpa de garn och tillbehör som behövs.

- E37 lyckades med att sammanställa våra tankar till en enhetlig hemsida som fångar YlloTylls känsla och själ - ett ställe på nätet som nästan, men bara nästan, kan likställas med att känna och klämma på garner i en fysisk garnbutik. De har lyckats med konststycket att göra yllotyll.com till något tidlöst och modernt utan att förlora sin personlighet.
Det har varit ett nöje att samarbeta med E37. De har varit drivande och vi har kunnat bolla idéer fram och tillbaka för att nu få en webbshop som är precis det vi önskade. En kreativ process från början till slut - och som vi nu kommer fortsätta att vårda, säger Hanna Schiller på YlloTyll.

Stort tack till YlloTyll som med sin tydliga kravspecifikation, positiva dialog och fantastiska sortiment bidragit till ett väldigt roligt projekt att få göra!

Peter Andersson den 27 september 2019