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.

Based on the hand-sketched interaction designs, I’m currently creating digital versions of the designs in Figma, which will include a fully clickable, medium-fidelity prototype. While the Figma prototype is the final project for the program, I plan to create a higher-fidelity, more branded version of the prototype using Proto.io.

(I’ll add all design files upon completion.)

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