UX Research
Eftersom jag anser att allt ska vara användarcentrerat under designprocessen började jag att skapa empati med befintliga och potentiella slutanvändare för Dustin. För att ska empati och förstå användarnas smärtpunkter, behov och mål gjorde jag 1:1 semi-strukturerad intervjuer med 2 deltagare. I intervjuerna använde jag öppna frågor för att uppmuntra deltagarna att dela sina åsikt och känslor om att handla IT varor från internet. Jag gjorde också en enkät undersökning som har besvarats av nästan 40 deltagare och syftet med enkäten var att samla både kvantitativa och kvalitativa data.
Från min UX research fann jag vilka enheter användare mest använde, deras shoppingmönster, kundresa, slutmål och paint points.
Några av lärdomarna finner ni nedanför.
Konkurrentanalys
Andra delen av min research centrerades kring andra konkurrenter och de två konkurrenter som jag har valt är Komplett och Elgiganten. Konkurrentanalysen hjälpte mig att utvärdera Dustin homes konkurrenter, förstå dem och deras svagheter samt deras design lösningar gällande mega-menyn och varukorgen. Första steget i analysen var att skapa en profil för varje konkurrent som innehöll en generell beskrivning för styrkor och svagheter av konkurrentens design. Efter det tog jag skärmdumpar från konkurrenternas hemsida och jämförde dem med Dustin home. Genom att ställa alla bilder sida vid sida hjälpte det mig att förstå vad som faktiskt skiljer dem åt och vad som kan förbättras i Dustin mega-menyn samt varukorgen. Till slut med hjälp av www.similarweb.com gjorde jag en webbanalys som gav mig insikter och data. Datan var mest centrerad kring antal besökare, enheter, bransch rang och kön / äldrefördelning.
UX review för dustin nuvarande mega-meny
För att identifiera användbarhets och gränssnittsproblem i Dustin mega-meny gjorde jag en design review och för denna review använd jag heuristic evaluation tools. Heuristic evaluations tools hjälpte mig att identifiera dem grässnitt problem, skriva lösningar och rekommendationer som jag implementerade några av dem sen i idégenerering och prototyp faser. UX review för Dustins existerande lösning gällande mega-meny visade också att navigering processen i mobil version är väldigt lång. Användare måste gå igenom många onödiga steg för att kunna välja en produktkategori, vilket påverkar kundupplevelsen på ett negativ sätt.
Dustin home existerande mega-menu user flow
Gränssnitt problem i sökfunktionen
Som bilden nedan visar, i sökfunktionen står (Vad letar du efter) och det är en gränssnitt problem. Enligt Nielsen Norman Group det är bättre att ha sökfunktionen utan text för att det gör front-end sökfunktionen enkelt att använda och enkelt att hitta. Anledning är att texten försvinner när man trycker på sökfunktionen samt texten gör att sökfunktionen blir mindre synligt.
En steg närmare till användarcentrerad design
Definiera och analysera
I den här fasen det var dags att samla all data och information som jag fick från min research. För en strukturerad data samling har jag organiserat ux research datan i tre steg som bilden ovan visar och de är:
1- Data bank för varje deltagare i intervju och för resultaten från enkäten.
2- Kategorier för samlade data enligt deras tema.
3- Prioriterade kategorier.
Dessa steg hjälpte mig att samla bra idéer för att kunna skapa användarcentrerad lösningar, definiera användaren problem och att formulera en problemformulering .
Teknikintresserad konsument behöver ett enklare och smidigare kundresa för att att hitta produkter med anledning av att de inte kan hitta vad de letar efter när de besöker hemsidan även om de vet vad de vill köpa.
Att hitta bland kategorierna som ofta är röriga och oklara är mitt största utmaningar jag möter när jag använder hemsidans mega-menyn
.png)
Organisera datan
SIFFRORNA
60%
Redan vet vad de vill köpa när de besöker en E-handel hemsida.
57,6%
Hittar inte rätt produkt.
50%
Använder mobilen för att handla online.
31,4%
Startas och avsluta köpet på mobilen.
28,6%
Startas och avsluta köpet på datorn.
40%
Startas på mobilen och avslutas på datorn.
45,5%
Använder menyn för att söka för produkter.
50%
Använder dator för att handla online.
Analysera datan
Analysering av datan visade att majoriteten av användarna använder mobil och datorer för att handlar online. Deras kundresa varieras, men majoriteten börjar på mobilen och avslutar köpet på dator. Samt de flesta söker efter produkter via sökrutan och menyn. Detta leder oss till deras utmaningar, 57,6% hittar inte den produkten som de letar efter även om mer än 60% redan vet vad vill de köpa. Vilket innebär att söka och hitta produkter under kundresan (mobil och dator) påverkar de att köpa och slutföra köpet.
Bygga empati med målgrupper genom personas
Att skapa personas hjälpte till att skapa en viss klarhet i användarnas behov, beteende och målningspunkter som blir viktiga referenspunkter för att bygga en användarcentrerad lösning. Jag fokuserade främst på en persona eftersom den representerade dem huvudsakliga användarmålen som använder eller kommer att använda Dustins hemsidan. Det huvudsakliga användarmålen är att hitta rätt produkt på ett snabbt och enkelt sätt.
Skapar en balanserad lösning
I den här fasen var det dags att visualisera en användarcentrerad upplevelse som är balanserad mellan företaget mål och användarens behov. Användaren behöver en enklare och smidigare sätt att navigera i hemsidans mega-menyn, medan företagets mål är att förbättra kundupplevelsen på mobilen och öka B2C kundbaser. Idag erbjuder Dustin mer än 280,000 produkter, cirka 83% av de produkter är hårdvaror och 17% är mjukvaror. Detta ledde mig till att skapa många idéer för att designa två kategorier som matchar kunders behov och företagets mål. I slutet bestämde jag mig för att skapa två huvudkategorier i mega-menyn som är hårdvara och mjukvara. Varje kategori innehåller sub-kategorier i form av ikoner och text som kommer att hjälpa kunder att snabbt navigera och välja en sub-kategori inom mega-menyn. Dessutom för att göra det snabbare för användaren att köpa en produkt skapade jag en "köp nu" knapp. Köp nu knappen tillåter användaren att gå direkt till varukorgen för att slutföra sin beställning utan att logga in eller skapa konto.
Jag beskrev dem interaktioner som jag förväntar mig att användare kommer att gå igenom för att slutföra sina mål med hjälp av user story map och flödesschema.
User Story: Som en teknikintresserad konsument, vill jag att min kundresa både på mobilen och datorn ska vara enkelt, snabbt och effektivt, så jag kan köpa den varan som uppfyller mina behov.
Från en idé till
en klickbar
prototyp
Från en idé till en klickbar prototyp
Huvudsyftet med att designa om mega-menyn och varukorgen är att göra en enkel och effektiv användarresa från val av kategori till betalning. Jag började prototyp fasen med att designa mobil versionen i Figma och när mobil version var klar designade jag dator versionen. Användaren vill ha en enklare och smidigare sätt att hitta och beställa produkter, så vad ändrades och vilken designlösning implementerade jag? Nedan kan du se före och efter.
Klickbar prototyp
Trycka på bilden för att öppna Figma prototypen ↗
Trycka på bilden för att öppna Figma prototypen ↗
Användartester
Jag gjorde två kvalitativa användartester, en för mobil och en för dator. Medan deltagaren slutför varje uppgift observerade jag deras beteende och lyssnade på deras feedback. Feedback från deltagarna var bra, de anser att det var enkelt att använda hemsidans mega-meny och varukorgen samt all information var välorganiserad. Fick också feedback på förbättringar och några av dem är följande:
-
En kort förklaring för vad hårdvaror och mjukvaror står för.
-
Bättre färg för B2B hemsidan i mobilen eftersom det är för mörkt.
-
Hårdvaror kategori på dator prototyp är lite svårt att navigera.
-
Texten i varukorgen i mobil prototyp är för liten.
Observation resultat:
-
Tog ett tag för deltagarna att hitta “tillbaka till produktkategori” knappen på desktop versionen.
-
Svårt att klicka på B2C & B2B knappen på desktop version.
-
Deltagarna märkte inte att en vara har lagts i varukorgen på desktop versionen.
DUSTIN HOME MEGA-MENY UX/UI CASE
8 MIN LÄSTID
PROJEKTBAKRUND
Detta projekt var en del av UX utbildningen som implementerade av Chas Academy i samarbete med Dustin.
ÖVERSIKT
Idag erbjuder Dustin cirka 28,000 produkter och det stora produktutbudet har lett till att ha en mega-meny som påverkar kunders upplevelse på ett negativt sätt. Kunderna har svårt att hitta produkter som matchar deras behov pga mega-menyn både på mobilen och desktop. Dessutom är upplevelsen i mobilen eftersatt och det behöver förbättras. En förbättring i mega-meny och kundresan för att hitta produkter både på desktop och mobilen var utmanande, men detta kommer att säkerställa att Dustin förblir konkurrenskraftig på lång sikt samt öka kundbasen för B2C hemsidan.
MÅL
Målet är att förbättra Dustin Home mega-meny och varukorgen för att ha en bättre kund upplevelse. Dessutom för att hjälpa Dustin att öka deras B2C kundbasen och optimera deras hemsidan.
UTMANINGAR
Att designa om megamenyn som passar användarens behov och företagets mål.
PROBLEMFORMULERING
Teknikintresserad konsument behöver ett enklare och smidigare kundresa för att hitta produkter med anledning av att de inte kan hitta vad de letar efter när de besöker hemsidan, även om de vet vad de vill köpa.
ROLL
Jag ledde detta projekt ensam som UX Designer men jag vill passa på tacka alla som deltog i UX-research och användartestnings faser.
PROJEKTLÄNGD
4 veckor - Februari 2022 till Mars 2022.
VERKTYG
Figma
Vad lärde jag mig ?
-
Fokusera på problemet eftersom i slutet av dagen är det användarnas smärtpunkter som jag försöker att lösa. Så det är viktigt att man ha användarnas problem framför sig hela tiden och det är viktigare att inte bli distraherad och börja lösa andra problem.
-
Ett pixel perfekt UI i MVP kommer inte att lösa användarnas problem, det gör UX.
-
Att skriva effektiva intervjufrågor och enkäter som kan samla användbar data.
© 2023 Skapad med massor av 🩶 och ☕️