TravelBank Hotels
Creating a booking platform from the ground up.
TravelBank had lofty goals of incorporating a travel booking platform into the product to become an all-in-one business travel app. We started with flights, and as is the natural next step in booking travel, tackled creating a hotel booking tool specific to business travelers.
If creating a hotel product from scratch wasn’t enough, we had less than 3 months to have the first iteration up and running for our customers.
This project was a labor of love worked on by a newly formed sprint team consisting of 1 designer, 1 product manager, and 6 developers.
My role, lead designer :
Gather all of the business requirements.
Lead the research, information gathering, and validation.
Create all the designs; from wireframes, to iterations of the UI, to final production design.
Plan for future enhancements to the experience.
Oversee the design of the follow-up web experience and enhancements to the native experience.
01 / Research
I started by running a survey of 500 business travelers to set a baseline of customer requirements. Some key takeaways:
Business travelers tend to visit the same cities and stay in the same hotels on their trips.
The top factors in choosing a hotel were distance to meeting location, if the hotel had wifi, price, and customer reviews.
63% of respondents appreciated being able to explore new sites/restaurants when they travel for work.
68% of respondents sometimes add personal travel to their business travel.
This was followed up by a large teardown of what other players in the space were doing. I looked for key trends and opportunities for differentiation in a very saturated space. I found that there was a consistent information overload when searching for hotels and decided to focus on opportunities to make the decision process easier for our customers.
02 / User Flow & Wireframes
I started by running some brainstorm sessions where the working team white-boarded different iterations of the booking flow. An idea that we quickly decided to pull back on because of limitations with the current architecture was a combined checkout flow with flights. Instead I looked for opportunities for the user to navigate seamlessly between experiences and make smart suggestions for the user. The messy handwriting was from when we were really getting into a flow!
I then took the wireframes to Sketch, to start to map out the content blocks that I wanted to validate with our users.
03 / User Testing
To test out some of our assumptions with how business travelers book travel I took to UserTesting.com.
While users appreciated being able to find hotels close to their destination, they didn’t instinctually search by address (even with prompts). We would need some serious education to change that habit.
Images, listed price, location on the map were the biggest drivers in how users selected a hotel in our test.
04/ UI Iterations
I tested out numerous aesthetics and layouts for all elements of the booking flow. I pulled elements from the newly defined Design System that I helped implement and used this project as an opportunity to add new components including icons, card style, and defined font definitions. Content and style was fully tested before hand-off to developers.
05 / Final Designs
At the end of the day the final deliverables were scaled down from the initial concept in order to meet deadlines; however the MVP of the product succeeded in providing the TravelBank customer with a sleek, modern, simple, and easy to use experience to book their hotel reservations. This final design neatly fits within the TravelBank aesthetic, but also pushed the use of imagery and white space. It set the framework for future travel products and enhancements to the hotel book experience.
Left to right, top to bottom: 1-New travel landing page; 2-Hotel search (Designed by Nick Staab, Art Directed by Sara DiNitto); 3-list view; 4-map view; 5-details page; 6-checkout
06 / Desktop Experience
As a fast follow, TravelBank released the web hotels experience. Whereas the mobile designs were geared to browsing and on-the-go booking, desktop needed to be the place that supported thoughtful comparison shopping by the user. I oversaw CJ Cipriano’s talented design work to translate the native hotels experience to web while following consistencies that we had already created for the web flights booking experience.