Hej, Jag heter Sabina och är en kreativ UX/UI-designer i Stockholm
Med en passion för innovation och empati fokuserar jag på att skapa användarupplevelser som skapar lösningar som verkligen gör skillnad
My role: UX/UI-designer
Timeframe: 4 weeks
Tools: Figma
Svensk hälsokost
Om projektet
Svenskhalsokost.se är en e-handelsplattform som erbjuder hälsoprodukter, kosttillskott och naturliga livsmedel. Det här projektet är ett fiktivt initiativ som bottnar i min kärlek för hälsa och välmående.
Som trogen kund har jag alltid uppskattat Svensk hälsokost utbud, men också funderat på hur upplevelsen på webbplatsen kan förbättras för att optimera shoppingupplevelsen. För att skapa ett välgrundat designförslag genomförde jag research bland vänner och familj som också är lojala kunder. Genom att kombinera deras insikter med min erfarenhet som UX/UI-designer skapade jag en vision för en förbättrad digital shoppingupplevelse som bättre möter kundernas behov.
-
Prototyping
-
Design system
-
Copywriting
-
User research
-
Custumer journey maping
-
Wireframing
-
User testing
Process
Under projektet följde jag Double Diamond-metoden, uppdelad i utforskning, definiering, idéutveckling och leverans. Processen hjälpte mig att identifiera användarnas behov och utveckla lösningar baserat på dessa insikter. Eftersom projektet är fiktivt genomfördes användartester med nära och kära, vilket gav värdefulla insikter trots begränsad generaliserbarhet.
Svenskhälsokost.se nuvarande webbsida
Detta är hur Svensk hälsokost hemsida ser ut idag. Desptop samt mobilanpassade versionen.
.png)
1. Website analysis
Jag inledde projektet med en grundlig analys av den befintliga webbplatsen för att kartlägga användarflöden, identifiera friktion och pinpointa potentiella förbättringsområden.
Samtidigt formulerade jag hypoteser om användarresan vilket gjorde det möjligt för mig att ställa mer riktade frågor under användarintervjuerna, där jag kunde bekräfta eller dementera mina initiala antaganden.
.png)
2. User research
För att få en djupare förståelse för användarnas behov och utmaningar genomförde jag research med hjälp av intervjuer och observationer. Jag talade med nära och kära som är återkommande kunder hos Svensk Hälsokost för att samla insikter om deras köpbeteenden, smärtpunkter på webbplatsen och vad som gjorde att de valde just denna butik framför konkurrenterna.
.png)
.png)
.png)
.png)
3. Competitive analysis
För att få en bättre förståelse för marknaden och samla inspiration genomförde jag en konkurrentanalys av flera ledande webbplatser inom branschen. Jag jämförde Svensk Hälsokost med konkurrenter som Apotea, Life, Meds och Bodystore, med fokus på navigationsstruktur, produktpresentation och sökfunktionen.
På grund av tidsbegränsningar kunde jag inte genomföra användartester på konkurrenternas webbplatser. Istället fokuserade jag på att analysera deras designlösningar och funktionalitet för att identifiera bästa praxis och förbättringsområden som kunde appliceras på Svensk Hälsokost.
4. Key insights
.png)
Många i målgruppen har nedsatt syn och behov av mer tillgängliga texter
Många användare, särskilt i åldersgruppen 45-55, upplever svårigheter med synen, vilket gör att webbplatsens nuvarande kontrastskillnader och textstorlek är ett problem.
Detta är särskilt kritiskt eftersom många användare värderar transparens kring produktinformation, och den nuvarande informationen är svår att läsa. För att tillgodose denna användargrupp bör designen uppdateras med tydligare kontraster, större text och lättlästa fonter för att säkerställa tillgänglighet och bättre läsbarhet.
Dålig överblick över kampanjer
Användare har svårt att få en tydlig överblick av aktuella kampanjer och rabatter på den nuvarande hemsidan, då designen upplevs som överlastad. För många användare, som värderar hållbar konsumtion, känns denna hektiska layout störande och kan påverka deras uppfattning om Svensk Hälsokost negativt. Detta står i konflikt med företagets profil som ett varumärke för hållbarhet och välmående, och ger intrycket av att webbplatsens design inte riktigt speglar dessa värderingar.
Felaktiga signaler om konsumtion påverkar varumärkesuppfattningen
Många användare upplever att förstasidan är överbelastad med för många produkter och visuellt störande element, vilket skapar en rörig och stressande upplevelse. De röda rabattkoderna, som ofta förknippas med rea, ger intrycket av att vara på ständig rabatt, även när produkterna säljs till ordinarie priser. Denna design kan ge ett intryck av att företaget främjar överkonsumtion, vilket står i kontrast till det hållbara och hälsomedvetna varumärket. Detta kan i sin tur påverka kundernas förtroende och lojalitet negativt.
4. Persona creation
För att skapa en förståelse för Svensk Hälsokosts målgrupp baserades mina personas på en kombination av intervjuer med målgruppen, observationer från Svensk Hälsokosts sociala medier och engagemang från användare. Jag analyserade vilka som engagerade sig och hur, för att få insikter om deras behov och beteenden. Med mer tid skulle jag ha genomfört enkätundersökningar för att få ännu mer detaljerad information om målgruppen, men eftersom detta är ett fiktivt projekt, fick denna metod fungera som grund för att skapa personas.
Trendiga sportiga Iris
About
Ålder: 27
Plats: Örebro
Yrke: Butikspersonal
Iris är en trendintresserad, hälsomedveten kvinna som lever ett aktivt liv med fokus på styrketräning.
Hon följer influencers på TikTok och Instagram för att hålla sig uppdaterad om de senaste hälso- och skönhetstrenderna och gillar att testa nya produkter som är populära inom hennes nätverk.
Digital vana
Core needs
-
Enkel och snabb sökfunktion: Eftersom Iris ofta letar efter specifika, trendiga produkter som hon har sett på TikTok, behöver hon en snabb och exakt sökfunktion som gör det enkelt att hitta dessa produkter direkt.
-
Prisvärda erbjudanden och kampanjer: Eftersom hennes ekonomi inte alltid tillåter stora utgifter letar hon alltid efter produkter som ger bra värde för pengarna.
-
Flexibla betalningsalternativ: För att göra köpupplevelsen smidigare vill Iris ha ett brett utbud av betalningsalternativ, inklusive de som passar hennes preferenser, såsom Swish, för en snabb och enkel betalning.
Motivation
Iris drivs av en vilja att förbättra sin fysiska hälsa och välmående genom regelbunden träning och hälsosamma vanor. Hon söker ständigt nya produkter och trender som kan optimera hennes resultat, både för att förbättra sin prestation på gymmet men också för att bibehålla ett ungdomligt och hälsosamt utseende.
Pain points
-
Krånglig sökprocess: När Iris letar efter specifika produkter hon sett på TikTok, blir hon frustrerad om sökfunktionen är långsam eller inte ger relevanta resultat. Om hon inte kan hitta det hon söker snabbt eller om sökfunktionen inte är pricksäker, måste hon spendera extra tid på att navigera genom webbplatsen, vilket sänker hennes köpupplevelse. I sådana fall väljer hon istället att gå till Apotea.se, där hon upplever sökprocessen som smidigare och mer effektiv
-
Otydliga priser: När priser på produkter och erbjudanden inte är tydliga eller transparenta kan det skapa förvirring och osäkerhet. Kanske finns det dolda kostnader, avgifter eller villkor som gör att det verkliga priset inte blir klart förrän i slutet av köpprocessen. Detta gör det svårt för henne att snabbt avgöra om ett erbjudande är prisvärt eller inte.
-
Begränsade betalningsalternativ: Iris föredrar att betala med Swish eftersom det är smidigt. Om en webbplats inte erbjuder Swish som betalningsalternativ, väljer hon ofta att handla från en annan sida, som Apotea, där betalningen är enklare och mer synlig.
Motivation
Helena vill leva ett hälsosamt liv och säkerställa att hennes familj får tillgång till naturliga produkter som stödjer deras välmående. Hon värdesätter information om ingredienser och vill vara säker på att allt hon köper är hållbart och bra för både kroppen och miljön.
Holistiska hälsosamma Helena
About
Ålder: 43
Plats: Stockholm
Yrke: Lärare
Helena är en hälsomedveten kvinna som prioriterar naturliga och hållbara produkter för både sig själv och sina barn. Hon vill stödja företag som ger tillbaka till samhället genom välgörenhet och är villig att betala lite mer för att stödja en god sak. Som upptagen mamma och lärare söker hon också smidiga och tidsbesparande lösningar för sina inköp.
Digital vana
Core needs
-
Tydliga produktinformation & ingredienslistor: Bra och tydlig information om ingredienser och ursprung för att kunna göra informerade val, särskilt för produkter till sina barn
-
Express leverans: Eftersom hon har en hektisk vardag, vill Helena kunna få sina produkter snabbt och pålitligt. För henne är snabb leverans en viktig faktor när hon väljer var hon handlar.
-
Hållbara och etiska val: Helena vill stödja företag som inte bara säljer naturliga produkter utan också ger tillbaka till samhället genom exempelvis välgörenhetsinitiativ. Hon är villig att betala lite mer för att stötta en god sak.
-
Tillgänglig webbplats: Eftersom Helena har synnedsättning och använder glasögon är det viktigt att webbplatsen har tydlig text, kontraster och en lättläst design
Pain points
-
Svåråtkomlig produktinformation: Helena blir frustrerad när ingredienslistor eller produktinformation inte är lättillgänglig eller otydlig. Detta gör det svårt för henne att fatta informerade beslut om produkterna, särskilt när det gäller produkter för hennes barn.
-
Långsam leverans: Eftersom Helena har en hektisk vardag, kan långsam leverans vara ett stort hinder. Om en webbplats inte erbjuder expressleverans eller pålitliga leveransalternativ, riskerar hon att gå till en konkurrent som kan leverera snabbare.
-
Brister i hållbarhet och etik: Helena kan bli besviken om företag hon stödjer inte har tydliga hållbarhets- och etiska initiativ, hon vill känna att hennes köp gör skillnad och inte bara gynnar företaget ekonomiskt.Hon vill känna att hennes köp gör skillnad och inte bara gynnar företaget ekonomiskt.
-
Svåranvänd webbplats: På grund av hennes synnedsättning kan webbplatser som har dålig kontrast, små eller svårlästa texter och en otydlig design orsaka problem. Helena blir frustrerad när webbplatsen inte är lätt att navigera eller läsa, vilket gör köpupplevelsen mindre tillfredsställande.
5. User journey mapping
I detta steg utförde jag användartester för att kartlägga den typiska resan en användare skulle ta på Svensk Hälsokosts webbplats. Tester genomfördes med deltagare från målgruppen, som fick i uppdrag att genomföra uppgifter som att hitta en specifik produkt, lägga den i kundvagnen och genomföra ett köp.
6. Sketching lofi & midfi
Under skissfasen skapade jag enkla lo-fi skisser för att snabbt utforska layoutalternativ och strukturer för hemsidan. Fokus låg på att förbättra användarupplevelsen genom en tydligare och mer överskådlig design, med särskilt fokus på produktinformation och kampanjer. Skisserna fungerade som grund för att testa och iterera på olika designlösningar innan vidare utveckling.
7. Prototyping
När jag itererade på skisserna i mid-fi fasen genomförde jag användartester med olika typsnitt och textstorlekar för att förbättra läsbarheten, särskilt för användare med synnedsättning. Målet var att hitta den bästa kombinationen för att skapa en mer användarvänlig och tillgänglig webbplats. Tester visade tydliga preferenser för större text och högre kontrast, vilket förbättrade läsbarheten och bidrog till en mer tillgänglig och positiv användarupplevelse.
8. Design system
Eftersom mitt fokus i detta projekt var på UX och användarupplevelse snarare än UI, valde jag att inte göra större förändringar i designsystemet, utan istället finslipa och optimera det befintliga systemet som företaget redan använder för att få det mer enhetligt och med tillräckligt goda kontraster.
9. Final design
Landingssidan och kampanjerna
Tydlig presentation av kampanjer och rabatter på landingssidan
Jag har skapat en mer strukturerad landingssida där kampanjer presenteras på ett tydligt sätt. En karusell används för att visa aktuella erbjudanden utan att överstimulera användarens ögon. Rabatterna har fått tydliga rubriker för att specificera om de är månads- eller veckorabatter, vilket gör att användarna snabbt kan förstå erbjudandena.
Genom att justera layout, textstorlekar och minska visuella störningsmoment har jag skapat en webbplats som är lättare att läsa och navigera. Knapparna har också fått bättre kontraster, och läsbarheten på texterna har förbättrats för att säkerställa en bättre användarupplevelse.
Tydligare produktinformation
Ett viktigt tillägg är att produktens märke nu är synligt på produktkorten, något som tidigare saknades. Detta gör det lättare för användarna att snabbt identifiera och jämföra produkter, vilket är avgörande för att de ska kunna göra medvetna val.
Sökfunktionen
Förbättrad sökfunktion
Sökfunktionen har fått en smidigare och mer övergripande layout som delar in användarens sökresultat i kategorier som produktnamn, märke och artikel. Detta gör det enklare för användarna att snabbt hitta det de söker utan att behöva gå igenom långdragna listor.
Knappen "Se alla träffar" som dyker upp vid sökning för att se fler resultat har också uppdaterats, med bättre kontrast och större storlek för för att säkerställa att de är lättare att se och trycka på.
Välgörenhet inom hälsa och hållbarhet - en win-win lösning för alla
Företagets målgrupp, som är både hälsomedveten och etiskt driven, uppskattar företag som främjar hållbarhet och samhällsansvar. Men eftersom många i målgruppen har begränsad tid, särskilt föräldrar med barn, kan det vara svårt att aktivt söka och bidra till välgörenhet på olika plattformar. Därför erbjuder Svensk Hälsokost en smidig lösning där kunderna enkelt skulle kunna bidra till månadsvisa välgörenhetsinitiativ när de handlar för sin egen hälsa.
Genom att lägga till möjligheten att skänka pengar direkt i varukorgen, gör Svensk Hälsokost det enkelt att stödja viktiga hälsofrågor utan att behöva lägga extra tid på att gå till olika sidor eller initiativ. Det är en win-win-win situation: kunderna får produkter som gynnar deras egen hälsa, Svensk hälsokost visar sitt engagemang genom handling samtidigt som de aktivt bidrar till forskning och initiativ som kan förbättra hälsan för fler.
För att ytterligare stärka detta engagemang, lyfts relevanta kampanjer och välgörenhetsinitiativ, såsom "Oktober – Bröstcancermånad" eller "Oktober - Suicidpreventiva månaden. Dessa kampanjer syns både på startsidan och vid relevanta produkter, så att användarna enkelt kan koppla samman sina köp med dessa viktiga ämnen. Det gör det möjligt för kunderna att direkt bidra till aktuella samhällsinitiativ medan de gör val för sin egen hälsa.
För att förstärka Svensk Hälsokosts roll som inspiratör, har bloggen nu omdöpts till "Svensk Hälsokost Guide" och integrerats synligt på startsidan. Här lyfts både hälsorelaterade fakta och aktuella ämnen, såsom "Klämdagen" för bröstcancer, ett relevant och engagerande ämne för målgruppen som dessutom sprider livsviktig kunskap.
Detta engagemang stärker varumärkets trovärdighet och passar perfekt med målgruppens värderingar om hälsa, etik och samhällsansvar. Genom att erbjuda en sådan möjlighet, tar Svensk Hälsokost inte bara ansvar för kundernas hälsa utan också för samhällets välmående i stort, vilket gör att företaget kan göra en betydande skillnad på riktigt.
New design:
10/10 användare upplevde förbättrad läsbarhet på webbplatsen
Genom att justera typsnitt, textstorlek och kontraster har den nya designen förbättrat webbplatsens tillgänglighet. Användarna upplever nu en betydligt enklare och mer komfortabel läsupplevelse, särskilt för de med synnedsättning
New design:
9/10 användare upplevde designen som mer harmonisk och i linje företagets profil
Den nya designen erbjuder en mer strukturerad och fokuserad layout, vilket minskar visuell överbelastning. Detta skapar en lugnare användarupplevelse där kunderna inte känner sig överväldigade av information
Learnings from project
Jag lärde mig hur viktigt det är att noggrant iterera och skissa i de tidiga faserna. I det här projektet var jag lite för snabb med att gå vidare med skisserna, vilket gjorde att jag förlorade värdefull tid. Att ta sig tid att finslipa idéerna i början skulle ha hjälpt mig att undvika onödiga revisioner senare.
En av de mest givande delarna av projektet var att ta fram lösningar som inte bara gynnar användaren, utan också bidrar till ett större, meningsfullt syfte. Att gå bort från att bara fokusera på konsumtion och istället skapa design som främjar socialt ansvar och hållbarhet var verkligen givande. Denna erfarenhet förstärkte vikten av att designa för något mer än bara den omedelbara försäljningen – det handlar om att skapa varaktiga, positiva effekter.