Building a better rate display page on Bestwestern.com | UI/UX Case Study
By Aaron Forney
How I worked with the eCommerce team to give our customers a better experience on bestwestern.com
The project, Best Rate on Digital 3.0, with Best Western Hotels & Resorts International was one of my favorite projects to work on this year. The goal for this project was about meeting the business need to display our member rate and crafting an experience our users would enjoy. We would achieve this by implementing a new horizontal rate presentation; focusing on smaller breakpoints, usability, and visual cues to reinforce specific rate types.
The project roughly totaled 3 months of design, review, and research to hit the sweet spot.
The Redesign
After understanding the business needs and the common problems users encounter on our rooms and rates page, I was ready to start formulating ideas and concepts for review. My design goals were:
1. Introduce visual cues to reinforce member or special rate types
2. Promote users to sign up for our award-winning Best Western Rewards program to receive and view lower rates
3. Simplify the data and move the rate display up above the fold
4. Create a design that is A/B friendly, to allow for potential million-dollar test/findings.
Prototype & Ideation Phase:
The redesign started with a breakdown of what our users did not like about the current experience. We combed through our data sets, interviewed users, and had several breakouts talks with businesses and stakeholders.
Initial Ideas:
Conveying the important information and removing redundant or non-engagement data was key from the outset.
Some of the things that I considered when designing were:
1. What rates are important for our business needs?
2. What information is not important to our guest and can be taken out?
3. How can I compress and present the data in a manner that allows us to bring up our rate display cards above the fold?
4. How can I help present our 13 brands and help our guests to become aware of them?
I initially started with two different rate displays for the team to review: a vertical rate display and a horizontal rate display.
Business Criteria:
- Initially, two rate types were emphasized: our BWR Member Rate and a Best Rate available. In the rare case that the Best Rate was not our Member Rate, we initially decided to highlight it.
- Allow our guests to see Member rates (that are hidden when not logged-in or a member) after passing their email through the data field.
The first problem I wanted to help solve for was our Hotel vitals section:
Some of the insights and takeaways:
- A lot of redundant information was taken out and we focused on highlighting the information guests wanted to see on this page. It freed up a lot of space and allowed for a fresh presentation of this information.
- Emphasis was placed on our links to meet WCAG 2.1 standards by keeping them underlined and upping the contrast.
- Rates were made bigger, allowing our guest to find vital information
- The final design allowed for a much cleaner presentation and allowed us to reach our goal through moving rates up above the fold.
Vertical Rate Design
Some of the insights and takeaways:
- The vertical rate design allowed for a very intriguing carousel-type interaction (pictured below)
- This pattern would have introduced a very different pattern for our guest and would have been a large departure from our current pattern.
- The design opened a lot of space due to the smaller nature of the cards.
- The vertical rate, unfortunately, did not test as well during peer and user review.
The winner: Horizontal Rate
The business and user studies led us to focus on the Horizontal Rate Display.
Some of the insights and reasons:
1. It fit closer to the current design and could be implemented quicker
2. Allowed for more space and tested better on smaller breakpoints
3. Created a more frictionless experience for our none tech-savvy guest
Testing phase:
From there it was about getting the design in front of guests for feedback/insights.
Our eCommerce UX advocate, Juan Castro, ran user testing through the online tool Erlibird. I had the pleasure of listening in on the calls and taking notes based on user feedback.
Key insights from usability testing:
For the next iteration, the messaging and call to action were cleared up, in addition to giving the rate display a better visual treatment based on comments from users.
Development & Release phase:
A designer’s work is not done after the design passes user testing and story grooming. After, it is our role to provide support to the development team to implement the design.
Working with our front-end coders, we established what parts of the design would be implemented now and what would come as enhancements in future sprints.
The decision was made to take our email entry field out of the rate display and place it above our rates (video below).
Business also decided to focus on highlighting one rate known as our “Exclusive Rate”.
After development, the code passed QA and is now live as of November 27th, 2018.
What’s Next?
1. Working with our data analysts, Kat Israel, we will monitor our conversion rate as well as our bounce rate and see if we can gain more insight into our customers.
2. Create A/B test to determine what can be done to increase revenue.
Final Thoughts
Lastly, a big shout out to the UI/UX team who helped me ideate, test, and get the best design possible for Best Western. Thanks for reading!
