• Design a user friendly platform that customers can use to search, book, and check-in for hotel stays. 

• Discover the user processes behind booking accommodations for travel. 

• Consider design options for how to integrate real-time notifications into the platform without requiring users to install a mobile app.

● Explore the processes a user goes through when booking travel accomodations. 

● Research competitors and gain a better understanding of the travel booking site industry as a whole. 

● Learn about the experiences different users have had when booking travel accommodations.

With these clear-cut goals set, I started to conduct some secondary research. 

I wanted these interviews to be more like a conversation and therefore I let the user control the interview with minimal prompting. I conducted interviews with three participants total. After my interviews I listened to the recordings of the interviews and made summaries of key insights for each interview. 

Overall a few key findings really stood out to me. The first thing I noticed was that it caused users undue stress when they would receive a confirmation from the booking site, but then would not receive another confirmation from the airline or hotel directly.  Another thing that stood out to me was that users had a preference towards an excess of detail when booking their accommodations. The last big insight I pulled from my interviews was that despite the hard work that goes into trip planning, not all users want to trade autonomy for ease of booking. 

Once I had completed my POV’s and HMW’s the project felt like it was finally starting to take form in front of me.

I put together a user flow and task flow for the process a user would take when booking accommodations on Staytus’ site. 

Once I had a sense of the brand identity for Staytus, I began to sketch out some of the screens I was considering for the design. After spending a few hours sketching the screens in different ways, I moved to Figma to build digital wireframes of the screens. 

I first began by putting text blocks and image blocks on the page and determining the ideal spacing for the pages content. I then filled in these text blocks with the necessary text and added more detail to each page. Once I had gotten feedback on these wireframes I started to apply my color palette to the site. Ultimately the blue palette I had chosen worked well with the site's design, but did require some minor adjustments to darken some of the lighter shades. 

Tablet Wireframes

After spending a lot time on the design aspect of the project, I was excited to finally begin the prototyping and testing process. I used figma to build my prototypes and ended up adding a few screens to test the search fields of the site more realistically. Once I had my prototype together I made a plan for Usability Testing. I had two tasks I wanted users to accomplish and set goals for the testing process. I tested the prototype on four participants total, each of which pointed out important errors in the design and offered vital feedback. 

For the first task, the most obvious issue was with the search fields. I had initially forgotten to include a button to close the search field unless users had made a selection in the field. Therefore 2 out of 4 users experienced an issue with this. To fix this, buttons were added and adjusted to give the users the ability to close the calendar tab, as well as advance the calendar to the next two months. 

Another issue that came up during user testing was a design error in the “adults/children” search field. After increasing the number of adults to three in the field, the field would still show users were searching for two adults. This was thankfully an easy fix and just required the adjustment of a design error. 

With the second task, users were having difficulty advancing to the hotel listing. Users were either clicking the hotel name or listing image to advance. I considered adjusting the “More Details”  button to improve visibility. I decided for the purposes of maintaining the consistency of the buttons across the design, I would add the ability to advance to the listing by clicking the listing image or hotel name. 

If further testing shows users are still having issues getting to the listing details, the overall design and visibility of the buttons across the site should be reconsidered.

By the end of this project I was extremely satisfied with the product I had designed. Throughout this project, each step of the process continued to exercise my design abilities. Specifically, I noticed myself continuing to push my design skills throughout the wireframing process. After researching competitor sites and studying their designs, I came to realize many booking websites had outdated designs. With this, I knew I would have to incorporate aspects of the standard booking site design while also adding a modern approach to the overall UI of the site. This process allowed me to work on my design skills heavily during this project. If I had more time to continue to work on this project, I would like to retest my wireframes again with a different set of users. This may give me more insights on the product overall, allowing me to continue to push the design further. I would also like to specifically test more screens with different button styles, allowing me to increase button visibility. Finally I would like to have more time to test the calendar window and determine the most useful way to present the search field. 

Want to see more projects?