SONOS PRODUCT SETUP | APPLICATION
Sonos is een van de meest innoverende bedrijven als het op digitale muziek streaming aankomt. Tijdens mijn minor aan de HVA in Amsterdam, heb ik voor het vak HCI (Human Computer Interaction) Mastery mij beziggehouden met het specialiseren op het gebied van micro interactions, die een positief effect hebben op de gebruikerservaring.
“Van lange wachttijd naar meer conversie”
DE BRIEFING
Tijdens de briefing kwam naar voren dat Sonos graag de productconfiguratie wizard opnieuw wil ontwerpen. De gebruiker loopt vaak vast bij het configureren van zijn of haar product en moet vaak lang wachten op de configuratie zonder enige feedback te ontvangen. Hierdoor dachten de gebruikers dat het systeem vastliep.
DE OPLOSSING
Om het probleem op te lossen, heb ik door middel van een laadbalk het laden visueel gemaakt. Daarnaast komt tijdens de wachttijd een carrousel tevoorschijn met handige tips over het gebruiken van je nieuwe Sonos product. In de laatste carrousel heb je de mogelijkheid om je in te schrijven voor de nieuwsbrief. Op deze manier wordt het wachtmoment omgezet in een conversiemoment en blijft de gebruiker up-to-date over zijn wachttijd progressie. Kortom een WIN WIN situatie.
HAPPY FLOW
Om vorm te geven aan de oplossing heb ik een happy flow ontworpen. Binnen deze flow is te zien dat de gebruiker door middel van iconen en ondersteunende uitleg wordt begeleid tijdens het installatieproces.
In de eerste flow krijgt de gebruiker te maken met de wachttijd en dus ook met de carrousel die hierbij is vormgegeven. In de tweede flow heeft de gebruiker de mogelijkheid om een surround sound setup te volgen.
MICRO ANIMATIONS
Tijdens dit project lag de focus voornamelijk op Human Computer Interaction. Als we het hebben over deze interacties, dan spelen micro animaties een grote rol. Deze geven feedback aan de gebruiker of vertellen de status van het systeem
Daarom heb ik tijdens dit vak naast mijn Figma prototype gedetailleerde animaties gemaakt in principle. Deze animaties heb ik omgezet in gif’s, te zien hier beneden..
Doormiddel van deze animatie maak ik de impact (het swipen) van de gebruiker visueel. De content card word groter en de indication bubble groeit mee.
Doormiddel van deze animatie maak ik duidelijk aan de gebruiker op welke knop hij op zijn fysieke speaker moet klikken om de set-up te vervolgen.
Doormiddel van deze animatie laat ik de gebruiker weten dat het systeem bezig is met de set-up van zijn systeem.
HET PROTOTYPE
Beleef zelf het gemak van de app in het digitale prototype. Ben je even de weg kwijt? Door op R te klikken start je het prototype opnieuw op.