Challenge
Serving as the UX lead (hybrid Architect and Designer) for this project, I was tasked with re-designing the “hotel packages” user experience flow. Previously packages were promoted and sold from the hotel rates page, alongside all the other rates. The customer problem I was solving for was that users often missed packages altogether or didn’t quite understand their options. Previous user research had been conducted to determine this.
Design Thinking & Methodology
It was quickly determined that packages would be better served outside of the rates page. The rates pages were on the roadmap to be redesigned in Q4, thus, we left packages on the rates page as is. Subsequently, we created an additional funnel to get the customer to packages. We came to this conclusion after evaluating several factors including, the costs associated with redesigning a large chunk of the rates page in, as well as, what the agile team I was on could actually get done a few sprints.
I completed a competitive analysis with our direct & indirect competitors. The results of the analysis were that no one was really doing a great job with their packages. However, many of them suffered some of our same issues.
Thus a little exploration was in order. I needed to understand what the optimal flow would be for the customer and determine if that flow was feasible with the many constraints present.
Once a location was determined for packages there were a slew of other things to work out. We identified two flows that needed to be addressed. One when the customer landed on that page with pre-selected dates and one when the user had no dates selected. The design would need to easily support both of these scenarios. In the case where no dates were available we turned to our metrics and saw a pattern that most customers input dates that are 14 days out. Thus, we used 14 days from today as the default date range to be set when the user had no dates. The UI would need to change to accommodate these scenarios, both language/content and assets (buttons) book now vs select dates. The team spent a lot of time trying to get this right. A few whiteboard sessions occurred before we felt good about the chosen approach. In addition, I created a few quick html prototypes to present to stakeholders with the wireframes.
A list style design was proven to be most flexible. We hid the room types content from the user until it was needed by only readily showing the lowest priced room. The customer could then initiate our expand/collapse model to view the many other room types available. This design was chosen so that the user could see many packages at once before drilling down to a room level. This method was also a good solution from a mobile web standpoint and fit into a common mobile pattern rather well.
I introduced a new layout for the reservations container. This was met with a bit of friction, however, my proposed layout simply worked better. It didn’t take up nearly as much screen space as the previous version and it was capable of displaying all the necessary controls and could be flexible. Besides who made the rule that there can only be on type of reservation model? Oh we did, well let’s re-evaluate that decision. Yep!
Another topic that had to be considered was our error messaging strategy. Since packages had many moving parts, it would be key to have error messaging in context with the error (yes, this should be the way it’s done, but the current model didn’t support that). Thus, a few changes in the way we displayed error messages occurred with plans for it to be cleaned up in other parts of the sites at a later date.
Execution & Results
One thing about working for a company with 7 brands is that you actually have to design one solution for all 7 brands (or at least that’s the goal). So on top of everything else, I had to keep in mind that this would need to translate to 6 other brands seamlessly, both the architecture, design and code. Wireframes were created and reviewed with the scrum team and upper management. Once the wireframes were signed off on, I created the visual design, adhering to the current brand standards and created style guides to aide the developers and serve as an artifact.
Measurement and Learnings
The first month after packages launched on 6 brands, package bookings were up 10% resulting in a $3M surge in revenue that month. It continues to out preform it’s predecessor and there were plans to enhance the model with filtering.
A couple of things learned during that project was that challenging the norm was a good thing, even when met with opposition. And that being able to draw something on the whiteboard and have the developer code from that is “Awesome”.