Oasis logo

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.


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.

Accessibility Options

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.


With the pain points identified and the user interview results on hand, I created two personas to help better empathize with the users.


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.


The sitemap for the oasis website

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.

Paper wireframe of the oasis website

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.

Digital wireframe of the desktop oasis website Digital wireframe of the mobile oasis website

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.


Saved Cards

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.

Comparison between digital wireframe and mockup with the improvements regarding the insights Oasis app mockups

Accessibility Considerations


Clear and consistent heading styles inform visual hierarchy of each page.

Alt Text

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 😊.