Case beschrijving
In 2022 vroeg KesselsKramer digital mij voor het UX ontwerp van de nieuwe responsive webshop van Staycity, een toonaangevende aanbieder van serviceappartementen en aparthotels.
Meer over de Staycity rebranding door het reclamebureau KesselsKramer lees je hier.
Wat was je opdracht?
Axure wireframing user flows uit die KK digital kan visualiseren en Equator kan bouwen.
home page • navigation • account section • Search • booking flow • çity page • property page • online checkin • guest services page • availability calendar • nog veel meer 😉
Met wie heb je samengewerkt?
In opdracht van KesselsKramer digital en in samenwerking met zowel het UX team van Staycity Group in Dublin als Visual designer Roland Cos en Design Lead Alessandro Carosso van KK digital in Den Haag.
Wat was je proces?
UX strategy uitgeschetst in Miro
Ik ben begonnen met de documentatie vanuit de klant goed door te spitten, insights en focuspunten voor de UX strategisch op een rij te zetten en de klantreis tastbaar te maken.
Staycity klantreis
De sectie 'Customer journey stages' laat zien welke gebruikersdoelen er in welke fase van de Staycity klantreis bestaan. Als er een ontwerpbeslissing moest worden gemaakt over content wel of niet tonen, vormde een snelle check met deze doelen een prima methode om een gefundeerde beslissing te kunnen nemen.
Business goals verbinden aan gebruikersbehoeften
Onder de sectie 'Client input' staan de KPI's, design principles en de business doelen van de redesign. Voorbeelden van Staycity business goals zijn 'increased online bookings' en 'increase overall occupancy rates attributed to website'.
Value / Effort
Wat zijn de beste UX features om deze doelen mee te bereiken? Om hier antwoord op te krijgen zet ik mijn ideeën hierover naast het business doel, en geef ik op een schaal van 1-5 aan wat de 'importance to user' en de 'feasibility to the team' is.
Low hanging 🍊 🍇
Een feature als het communiceren van membership voordelen is waardevol voor de gebruiker en makkelijk uitvoerbaar voor het (development) team. Maar het introduceren van een smart booking calender waarin long stay kortingen zijn verwerkt en korting wordt gegeven in perioden met veel beschikbaarheid heeft waarde voor de gebruiker maar zal het team veel tijd en moeite (=geld) kosten om te implementeren.
Hoe Staycity's competitive advantage terugkomt in de UX👇
Het veelkoppige monster genaamd booking flow 👺 👹 👿
We hebben heel wat uurtjes besteed aan het search deel van de booking flow. Telkens als we dachten 'Nu zijn we zijn er!', doemde er een nieuwe edge case op. Onderwijl bleef ik strijden voor 1. geen disabled Search button 2. geen foutmeldingen.
'Maar wat gebeurt er als de gebruiker op Search klikt zonder iets ingevuld te hebben?'
'Dan klapt de City bar uit en toont de beschikbare steden. Tegelijkertijd verdwijnt de Search knop zodat de focus 100% op deze eerste mandatory keuze is. Keuze voor een Aparthotel is niet mandatory, dus klapt na keuze voor een stad de mandatory Date bar uit. Als de gebruiker een check-in datum heeft gekozen, verschijnt de secundaire Clear button. Pas als ook de checkout datum bekend is, zien we vervolgens de primaire Search button weer. Die overigens nu vermomd is als Next button, want we willen eerst nog weten hoeveel gasten en hoeveel appartementen er zijn in deze boeking. Al kan deze stap worden overgeslagen, met de inmiddels weer aanwezige Search knop, omdat het getal 1 default is ingevuld.'
Slechts 1 scenario op 1 type device.
Alles voor een intuïtieve en gebruiksvriendelijke UX 💪
Staycity start booking flow👇
Waar ben je het meest trots op?
Conversion centered design
Er was veel discussie over 1. waar te communiceren dat members 10% korting krijgen 2. hoe gebruikers te verleiden zich als member aan te melden. Na een aantal ideeën uitgeschetst te hebben, waren de stakeholders over dit ontwerp erg enthousiast:
1. Aan niet-ingelogde gebruikers naast een doorgestreepte prijs de member prijs tonen 2. Vervolgens bij checkout de optie 'Sign up to receive 10% member discount' default aangevinkt tonen. Zonder te pushen mensen geruisloos over de streep trekken 😜.
Zonder ingelogd te zijn korting zien en easy member signup at checkout 👇
