A case study for an online home booking website
Project Details
Stefan Guan - UX Designer
(User interviews, wireframing, prototyping, usability studies,
design iterations, responsive design)
Febrary 2023 - March 2023
Many online booking websites for vacation stays often features complicated interfaces. Consequently, users expressed that they feel stressed when trying to find the perfect stay. The objective of this website is to create a simple and powerful booking platform, focusing on ease-of-use.
The website design caters to individuals who want to quickly and efficiently book a home for leisure or for business with a minimal amount of stress.
Research
The project began with a user interview aimed at finding any roadblocks users have with their online booking experiences. I conslidated the findings into three different user pain points.
User Pain Points
The user interface of some sites often have a lot going on, making it difficult to grasp the important details.
The accessibility filters (e.g., no-stair entrances) are sometimes hidden away and only accessible after searching.
Users found it frustrating when they were booking a place with their co-workers/friends.
Personas
With the pain points identified and the user interview results on hand, I created two personas to help better empathize with the users.
Name: David
Age: 35
Occupation: Entrepreneur
David is an entrepreneur who frequently travels for work. They are irritated at how complex it is to figure out whether a location has accessibility considerations. Additionally, they are overwhelmed by how complicated it is to find a place to stay.
Name: Michelle
Age: 24
Occupation: Legal Assistant
Michelle is a full time legal assistant. They work long and tough hours and would love to efficiently book vacation trips. They find that booking trips with friends is often frustrating. They find that there is a lot of back-and-forth and wasted time trying to decide where to go.
Concept
With consideration of the user needs, I created a sitemap for the website. For instance, the sitemap emphasizes simplicity, an aspect that users found other sites overcomplicating.
Sitemap
Paper Wireframes
With the basic skeleton of the website completed, the next step was to create paper wireframes. This allowed quickly iterate through ideas for how the would look.
Digital Wireframes
After satisfactory paper wireframes, I converted the designs into digital wireframes using Adobe XD. Thus, the digital wireframes enabled the ability to gether more feedback.
User Testing
After connecting the wireframes into a low-fidelity prototype, I set out to test it with a usability study. The parameters of the study include: (1) An unmoderated usability study, (2) remote study in Canada, (3) five particiapnts, and (4) a duration of 20-40 minutes. The data from the usability study gave three important insights.
Insights
Users want to be able to select their previously saved cards for booking.
The current navigation bar buttons do not sufficiently describe where they lead to.
Elements there were toggleable lacked contrast. Some users reported not konwing whether an option was on or off.
The insights were consequently implemented into the next iteration of the designs—the mockups.
Accessibility Considerations
Clear and consistent heading styles inform visual hierarchy of each page.
As images are heavily featured due to the nature of the website, each image contains alt text to help screen readers describe the content of the image.
Important elements have high contrast, making it stand out from the background (e.g., buttons, toggles).
Final Design
Concluding Thoughts
The Oasis project has been an extremely rewarding experience. I
had the opportunity to learn the ropes of Adobe XD and apply the
design process at the same time. I also got to delve into the
realm of responsive web design, which is crucial in today's
landscape.
Overall, I could not implement all of the features I wanted to due
to the lack of time. However, those ideas may be realized in
future designs.
Thank you for taking time out of your day to check my case study
on Oasis 😊.