top of page
MacBook-Pro-16.png

Finding your next big journey

Exploring Visual Design for travel booking

Journey.Now is a web app that explores the process of booking accommodations. It aims to provide targeted travel advice with nearby features, promos, and the best suggestion based on the user's preferences. I did this project to explore the process involved with booking for vacations and how to cultivate a strong process in order to keep customer retention for future plans.

Role:

Duration:

Lead UX Designer

2 Week Sprint

Discovery and Research

Understanding the Process

I began the design process by attempting to understand and extrapolate common pain points that goes into a transaction process when reserving for vacation lodging. 

I want to know the reasons why people who have made transactions might not return and what to do to change that.

Topic Research

I've broken down my research process into 3 categories that will help me get better insights to people's spending behaviors It contains the following:

1) Objective: To understand the demographics of users, their usage behavior, goals and roadblocks when using the webpage, an User-Based Interview as it gives stronger insight to people's pain points, and preferred payment methods.

2) Contained Parameters, I placed certain conditions to set up the situation in order to establish common user patterns. 

3) Target Audience: Diversify the audience background in order to have a larger array of users.

Discovery and Research

User Interviews

I interviewed 8 participants about their existing travel behaviors, thoughts and feelings regarding their travel reservation experiences as per defined earlier. I synthesized the insights to categorize the feedback and generate some working perspectives to the end goal.

Key Takeaways

After finding answers from participants, I gained insight into some problems from the analysis obtained. I've condensed it into 4 general key points that were most common among all the users​

Lack of confirmation

In the post payment process, many users found it distressing when there weren't evidence of their tickets or if there aren't clear notifications regarding some form of confirmation. This can cause confusion, panic, and uncertainty whether or not their booking is successful. This can be alleviated by simply having some indication to show their booking is complete.

Proper Legibility

When reviewing your booking, it's not uncommon for a lot of information to be present. As such, it's important to take into consideration about those with visual impairments. The recommendation for this problem is to ensure the information is presented in ways that pass accessibility standards in terms of size, colors, etc.

 

Decision Fatigue

Recommendations to similar results as the ones the user has chosen is very common as a mean to generate higher interest to options. However it can cause decision fatigue or information overload for some. Limiting recommended options on front display can help users simplify their decision making while also giving the accommodations a chance to appear on the user's feed in a non-intrusive way.

 

Reward System

Consumers are encouraged to take action if there's an incentive to do so. Having a point or reward system that grants returning users extra bonuses to future bookings can be of great help to encourage returning guests.

Define and Ideate

Information Architecture

With the information now defined, I began to categorize and build the information based on what was most useful, usable, and user-friendly.

Sitemap

Group 87.png

User Flow

Frame 205.png

Design and Develop

Wireframes

Once I've created the path, I created some simple designs to generate some basic concepts

Register Page Proto.png
Login Page Proto.png
Dashboard Proto.png
Hotel PageProto.png
Room Detail Proto.png
Guest and Room Proto 2.png
Payment Proto.png
Finish Proto.png

Design and Develop

Usability Testing

To ensure the prototype is in a good spot and ready for finalization, I invited the previous users as well as 4 more for usability testing. I set up the basic prompt for the users to book a reservation according to the destination, hotel, and payment. Additionally I also prepared several scenarios to find out the details that I want to focus on, such as:​

If you don’t have an account, what will you do at this login step?​

Are there any difficulties when using the search bar in the hotel search?

How do you choose a room on this hotel details menu?

Is the difference between the select room and book now buttons clear enough on the hotel detail page?

Overall, the users managed to successfully book a reservation and that the foundation of the website is in a good place in terms of presenting information. There were a few notable insights for improvement:

In the search bar field, the date is hard to click and needs to be changed.

The check-in and check out fields make the user confused and need to be combined for easy understanding.

The number of guests and rooms needs to be the default because the logic of hotel bookings is that there must be rooms and guests who book and it can’t be 0

Design and Develop

Style Guide

I made several components for efficient use and can be used consistently in this design.

The overall goal is to adhere to a minimalist design that focuses on providing clarity to information while providing details that are equally as informative.

I chose Orange and White as the color themes to symbolize energy, friendliness, and comfort - the basic principles I'm looking to capture with Journey.Now. The white will provide simplicity and balance to the design as well as clarity of information to ensure the users have the details they need.

Style Guide 1.png
Style Guide 5.png
Style Guide 2.png
Style Guide 4.png
Style Guide 3.png
Style Guide P2.png

Design and Develop

Adding the final touches

Combining my prototype with the style guide, this is the finalized version on both mobile and desktop. I added some additional pages to showcase an extra section regarding the dashboard - which is essentially a progress tracker for applications and resources.

Dashboard.png
Input location.png
Pick date.png
Guest and Room.png
Guest and Room 2.png
Login Page.png
Register Page.png
Hotel Page.png
Room Detail.png
Payment.png
Finish.png

Final Thoughts

Closing Reflections

The Next Steps

Given the short time frame for this project along with the high focus on accomplishing a single task, there's still a lot left to be done with other aspects that would make it a complete program. In the future, I'd like to expand on adding extra menus regarding filters, additional payment information, filling in the other sections for planes, transport, etc. 

Additionally, I'd also like to research ways to augment more menus into this simplified set up as many industry led resources commonly have shortcut menus for users to quickly access what they're looking for.

Overall though, I believe this project was a good exploration into helping users plan their vacations a little bit easier.

Thanks for Reading!

bottom of page