Affinity mapping.
Stay Sababa
Your online destination for magical vacation experiences.
Overview
The goal of this project was to design a website for Stay Sababa, a boutique hospitality company, with a booking feature to remove the need to outsource bookings to Airbnb.
Problem
Stay Sababa is trying to scale its business and increase conversions. It's currently outsourcing online bookings to Airbnb because they're an early-stage start-up and do not have the in-house resources to build this feature.
Solution
Design a scalable and branded website with a booking feature so that Stay Sababa can avoid losing revenue to Airbnb.
Tools
Figjam
Figma
My Role
UX design
UX research
UX writing
Timeline
Overall: 12 weeks
Discovery & Research: 4 weeks
Design & testing: 8 weeks
My Design Process
HMW
How might we...
design a product that allows luxury travel seekers to book their stay directly within the platform for an efficient and seamless online booking experience?
User Research
Empathy Map
I started my user research by first creating an empathy map. This helps me really get inside the head of my target user and understand the things that drive their motivations and decisions. Empathy is the key ingredient for creating user-centered experiences that provoke resonation.
User Interviews
I conducted user interviews to collect valuable primary research and connect with my users on a deeper level. This helped me gain insights into their approach and behavior patterns to booking an accommodation online. I interviewed 8 users (2 men and 6 women) over Zoom.
The goal of my user interviews was to:
understand the pain points and frustrations that arise when booking a stay online
understand what users need to complete the task of booking a stay online
understand the types of things that guide user's decisions in booking a stay online
I started by asking a few warm-up questions to gather demographic data and learn about the online platforms and devices they typically use to book accommodation online. I also asked if there was anything specific they liked about those platforms to inform my design decisions. My main interview questions focused on what users think is helpful and not helpful for the user journey when booking accommodation online. Click the button below to read my full user interview plan.
User Interview Responses
I first recorded my participants' answers in an Excel sheet and made sure to write everything down in their exact words to avoid skewing the data with my biases. Then I translated their responses into concise one-liners onto a sticky in Figjam, incorporating direct quotes when I could and adding context to each sticky so I understood which interview question it was referring to.
Analysis & Synthesis
I analyzed my qualitative data by clustering the stickies into themes to identify common patterns, behaviors, and pain points across users. Then I synthesized each cluster by writing a concise one-liner to summarize the main idea. This helped me identify the key insights.
User Persona
Based on the findings from my user interviews, I created a user persona to bring my target user to life. Developing a user persona is key to the UX design process because it helps me avoid the pitfalls of self-referential design and keeps my empathy alive. This data-informed tool guides my design decisions by keeping the user at the forefront of my mind to address their most important needs and pain points. I identified my user persona's goals, motivations, pain points, frustrations, and behavioral traits.
Meet Noah: part crypto entrepreneur and part travel junkie, Noah loves his remote working lifestyle because it allows him to do what he loves. He values good reviews, a seamless user experience, and high-quality amenities when booking accommodation online.
User Scenario
To put my user persona in the context of my design, I created a user scenario that's specific to Noah. This tool helps me get an idea of what the ideal user journey looks like for Noah by considering his goal, motivation, intention, action and desired resolution. A user scenario enables me to frame my problem withing a human narrative that allows for the exploration of design ideas that will best support Noah in his journey.
Feature ideation based on my user scenario.
A brief overview of my competitor analysis.
Competitor Research & Analysis
Before sketching initial ideas, I conducted competitor research to understand the strengths and weaknesses of similar companies that are currently killing it and the opportunities in the current marketplace of boutique luxury hospitality. I looked at the websites of Villa Kuro, Casa Ikal, and Airbnb because these direct competitors have a similar target audience, offer the same product, and provide a good reference point for my design decisions.
Ideate
Sketching
Before diving into wireframes, I sketched a rough idea of my initial concept for Stay Sababa’s website with a built-in booking feature.
Concept test
To build a product worth building, it’s important to get feedback on my initial idea while the stakes are low and it’s not costly to implement changes. I conducted a concept test over Zoom with 4 participants who fit the profile of my target user (3 women, 1 man). I asked 4 open-ended questions to get their honest feedback on my preliminary concept. This allowed me to test the validity of my idea, determine which features to prioritize and gain valuable user input about my design.
I analyzed my user responses by creating an affinity map to uncover patterns across my participants. Then I synthesized this data to extract key insights that will inform my wireframing.
Key insights:
users like a simple menu with clearly labeled items in a logical order that can be easily accessed at every step of their journey
users like to see a familiar layout because it gives them confidence and comfort throughout the booking process
users like to see an image of the property on the booking page because they want to be reminded of what they’re booking (this elicits excitement and anticipation among users)
Application Map
This is a helpful tool for establishing information hierarchy and gives me a high-level overview of the different screens, allowing me to establish relationships between different areas of the website. An application map also helps with the exploration of the contents and naming conventions of each page before deep-diving into wireframes.
User Flow
I focused on Noah's primary user flow: the Villa Sueños property booking journey. This design tool helps to identify the key steps to map the most intuitive and efficient experience for Noah to complete his goal.
Wireframing
The data I gathered from my user interviews and concept testing informed my design decisions for the layout of each screen. I started by sketching low-fidelity wireframes to focus on the big ideas before I got more granular. This also allows me to explore different iterations of page layouts quickly. Once I landed on the final sketch, I moved over to Figma to fully flesh out my wireframes.
Visual Design
Going for serene escape here.
Style Guide
As a Pinterest enthusiast, creating a mood board is one of my favorite parts of the design process. Gathing inspiration and establishing the visual aesthetic of Stay Sababa is an essential first step to visual design. I also created a style guide, containing a color palette, typography, icon set, and buttons.
High-Fidelity Prototype
I worked on incorporating Stay Sababa's visual aesthetic through powerful imagery set on the backdrop of a subdued color palette.
Prototype, Test, Iterate
Click the button below to view the prototype in full-screen mode. It's way better.
01
How would you continue this project? Is there anything you would revisit in the final design? What advice would you give to the designer following you?
02
How would you continue this project? Is there anything you would revisit in the final design? What advice would you give to the designer following you?
03
How would you continue this project? Is there anything you would revisit in the final design? What advice would you give to the designer following you?
Learnings
What new hard skill, soft skill, trick, or tool did you learn throughout the project? Was there any design practice you’ve tried for the first time? How did this project contribute to your growth as a designer? Did you have any preconceptions that were crushed? What did you learn throughout this project that’s influencing the way you design?
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.