Once I chose a project path — an accommodation-booking UX for web — I began with a 17-question survey that included both qualitative and quantitative questions about hotel- and stay-booking experiences and behaviors.

In addition to the survey, I completed a competitive analysis comparing app and web experiences like Sonder, Plum Guide, Airbnb, and Booking.com.

I also observed several usability tests, during which I took long-form notes that outlined user frustrations, positive user experiences, and helped identify themes for both. Lastly, I conducted two usability tests across both Sonder and Plum Guide.

After synthesizing data from each of my research methods, I used insights from the 38 survey respondents, competitive analysis, and the observed and conducted usability tests to contribute to the first project: an affinity diagram.

Once I aggregated the insights into a single Figma file, I led a group sorting exercise to find common themes among the insights, then did a secondary sorting exercise to identify even more granular subcategories. From there, I added icons to emphasize user pain points, positive interactions, and design opportunities to address both in a new product experience.

Once the affinity diagram was complete, I used the refined insights to further define user goals, mental models, behaviors, positive interactions, and points of frustration. These refined insights became a journey map, ultimately leading to what became the “happy path” for the flow diagram.

With rich insight from multiple research methods, I created a flow diagram that outlined a happy path for a booking accommodation website. The flow diagram (pictured below) outlined every screen and interaction within the happy path, along with lightweight, preliminary annotations for proposed functionality at each point of interaction. In summary, the below flow diagram includes:

1. Homepage — scrollable gallery of featured images, destination search, calendar and date selection, and # of guests

2. Search results — interactive map view, amenities filters, and results list

3. Individual property pages — full property details and policies, distance to transit and landmarks, calendar with daily pricing, CTAs for booking and messaging host

4. Booking — sign-in capability (existing users), account creation fields (new users), rate selection (flex, standard), add-on selections, booking summary, payment fields, CTA to confirm booking

5. Confirmation — booking summary, optional fields to share details with companions or other travelers

Using the flow diagram I created, I hand-sketched each screen of the happy path, including sketches for all functional components: the primary date selection calendar, a flexible date modal, the guests modal, an amenity filter modal, and individual property calendars with daily pricing. Along with these detailed sketches, I included detailed annotations that outlined how each component would function.

While the assignment was to create a simple, happy path prototype based on our sketches, I created an experience that is more branded and high fidelity to capture my creativity and grander vision. I came up with a fictional brand called Over Yonder, used my own photography for the site, crafted copy for each section, and beyond the happy path, designed partially functional flexible date and filter modals to show a future state of the UX. The partially clickable prototype can be found here.

User scenario: Select Yelapa, MX, August 25-31, and two people and one pet. From the home screen, you can also toggle between the flexible and exact date calendar views. From the search results screen, you can open the filters modal but cannot interact with it. Lastly, select the Tea House and tap Reserve to display the booking request summary.

Also a work in progress, the final prototype will include granular functionality annotations that walk developers/engineers through each interaction within the happy path.

(I’ll also add design files that display annotations upon completion.)