SMART ASSISTANT for a Hotel Booking Site
Project work for the Diploma in UX Design at the
UX Design Institute.
Problem:
Design an easier hotel booking experience, that affords detail based selection and comparison.
Solution:
A smart assistant to help the user filter out hotel choices according to their requirements.
DESIGN PROCESS
Phase 1 - Competeitive Benchmarking, Usability Testing and Note Taking
I analyzed a few hotel booking sites and compared them, acknowledging common patterns and differences, paying special attention to the user flows and features.
I user tested two specific sites and took notes on successful and conflicting aspects of the interface, on the basis of how they impacted the experience of the user.
Users get overwhelmed and exhausted trying to find the perfect room.
Solution: design a more user-friendly complete and refined search process.
Phase 2 - Affinity Diagram
All the bits of information gathered during the previous phase was grouped according to the categories that each comment or observation seemed to be a part of.
This was in order to understand in a more general manner how to strategize the future design in accordance with the participants mental models.
Frustration builds up when interactive features are too complex and search categories don’t match user’s criteria.
Solution: simplify interactivity, increment user control and freedom.
Phase 3 - Customer Journey Map
Goals, behaviours, context, mental model, positive experience and painpoints were mapped in a chart representing the ideal, most simple user journey - to book a hotel room.
An emotions graph summarizes the average experience along the path, visually demonstrating the highs and lows of the user's interactive experience.
At multiple stages, success and satisfaction are possible but not guaranteed.
Solution: Visualise progress and give feedback.
Phase 4 - Flow Diagram
This phase was about concretizing the results of the research into an interaction design, translating the insights gathered in the previous step into a more functional and satisfying journey.
The boxes explain the content relevant in each screen and the dots the actions that the user will take.
Design a smart assistant to guide the search, compare and select flow.
Phase 5 - Interaction Design
Now it was time to bring the elements of interaction into the screen with a pretty rough yet rather functional, paper prototype.
Smart Assistant to be text based.
Wider range of filters grouped by categories.
Phase 6 - Annotated Wireframes
Using Figma, the paper became digital, and the screens that were used in the prototyping phase acquired the final structure.
It is important to annotate the designs so that developers don't have to guess the designer's intentions.
Add instructions for developers, including information on states and error messages.
Prototype
The click-through prototype allows for the new experience to be tested again, whether with users or for euristics (rules of thumb in interaction design), and final amendments made if required.
The click-through prototype allows for the new experience to be tested again, whether with users or for euristics (rules of thumb in interaction design), and final amendments made if required.
The click-through prototype allows for the new experience to be tested again, whether with users or for euristics (rules of thumb in interaction design), and final amendments made if required.
Easy to Compare Rooms in Selected Hotels.
Mid Fidelity Prototype Demonstrates the main user flow of the smart search.
Next Steps: Increase Contextual Information.
Click on the image to see the interactive prototype.