REWARDS PROGRAM SELECTION
Not so rewarding
On Rocketmiles, our online booking platform, we partner with many brands to offer our customers various rewards when they book travel. Unfortunately, program selection was not very intuitive and even caused confusion, hindering people from moving to the Search results page.
Leadership agreed we needed to simplify the selection process. This would give more visibility to our many partners, while also making it easier for users to understand all the available options. Users needed to feel confident so they could proceed faster through the funnel, thus resulting in more bookings.
Leadership agreed we needed to simplify the selection process. This would give more visibility to our many partners, while also making it easier for users to understand all the available options. Users needed to feel confident so they could proceed faster through the funnel, thus resulting in more bookings.
ROLE
Experience Designer
PROCESS
Discovery, Ideation, UX Design
DELIVERABLES
Wireframes, Clickable Prototypes, Hi-Fi Designs
DURATION
2023
STATUS
Ready for development
From the beginning
We noted 2 issues with rewards selection in the search form:
On the landing page, the search form contains a search input field with typeahead functionality that also doubles as a dropdown for the rewards programs. Sometimes, the field is already autofilled with a random program. This has thrown people off, and there is no signifier to help them know it can be changed.
When the dropdown is active, program names are alphabetized, save for the top 3 biggest ones that sit at the very top in no particular order. The programs are also presented in a long list. This isn't the most appropriate use of a dropdown, and it makes it daunting for users to scan.
On the landing page, the search form contains a search input field with typeahead functionality that also doubles as a dropdown for the rewards programs. Sometimes, the field is already autofilled with a random program. This has thrown people off, and there is no signifier to help them know it can be changed.
When the dropdown is active, program names are alphabetized, save for the top 3 biggest ones that sit at the very top in no particular order. The programs are also presented in a long list. This isn't the most appropriate use of a dropdown, and it makes it daunting for users to scan.
CHALLENGE
It’s hard for users to quickly make a selection when they need to sift through a long list of 30+ programs.
HYPOTHESIS
Making the programs in this list easier to scan will help users understand their options and allow them to make a selection much faster so they can move on.
Search-dropdown-list? 🤔
The current input field has helper text that says ‘Enter or choose a program’. It is a search input control that also functions as a dropdown, but the dropdown list is extremely long and not the most appropriate use of this control. With over 30 line items for branded programs, there needs to be a way to simplify this list and make it easier to interact with, so there is an opportunity to implement this control the right way.
hi
How can we make this better?
The focus here needed to be more on the basics of design best practices as they relate to function:
• address auto selection of program on page load (bad practice 👎🏽)
• refine the program list and simplify the way users interact with it
• incorporate a proper search input
• address auto selection of program on page load (bad practice 👎🏽)
• refine the program list and simplify the way users interact with it
• incorporate a proper search input
Design treatments
THE SEARCH FORM
When users search for hotels, inputting their desired destination, preferred dates, number of rooms and guest count take priority. Seeing as the current form disrupts that order, I moved the program field above the CTA. Rather than only having helper text, showing users a program count with some of our biggest brands seemed more helpful.
THE LIST
The previous experience clearly needed revising. I did away with the dropdown and opted for a sheet that showcases the list of rewards options in full. As recognition over recall eases users’ mental load, I figured including brand logos would be a significant improvement. After selecting a program, the user can update their selection in the search form. I landed on 2 treatments for this:
TILES
This option boldly showcases each brand’s logo in the form of tiles with the program name nestled underneath. Tap targets are a good size, and users can easily scroll through and see what’s available.
However, the tiles take up a lot of vertical space, which equates to more scrolling. Spacing for this treatment can also break when program names get too long.
This option boldly showcases each brand’s logo in the form of tiles with the program name nestled underneath. Tap targets are a good size, and users can easily scroll through and see what’s available.
However, the tiles take up a lot of vertical space, which equates to more scrolling. Spacing for this treatment can also break when program names get too long.
CARDS
This option shows cards that take up less space, so the user won’t have to scroll as much. This also accounts for longer program names while still calling attention to brand logos.
Because the cards take up less space and allow for more options to be visible, this is the version we opted for.
This option shows cards that take up less space, so the user won’t have to scroll as much. This also accounts for longer program names while still calling attention to brand logos.
Because the cards take up less space and allow for more options to be visible, this is the version we opted for.
THE SEARCH FIELD
Users still needed an option to make an actual search for their preferred program. After removing this from the search form, I situated the search field at the top of the sheet. It works as a search input field should, with auto suggestions filtering out irrelevant matches based on what’s being typed.
Bringing it all together
Now that these 2 primary functions had been fleshed out, it was time to map out everything, including component states, use cases and user flows.
Final screens & interactions
*Progress on this work was halted and deprioritized
Key takeaways
Rather than chasing shiny new features, it was interesting to hone in on solving a simple problem centered around basic patterns and controls to enhance our rewards selection experience. Adding additional pages and interactions for the user would’ve overcomplicated this, and we didn’t want this to be a heavy lift. The goal was simply to help users understand the available options so they could quickly make a choice and move on to book a hotel. After multiple reviews with my team, we felt pretty confident these improvements would’ve increased conversion and also been a winner for return bookers with brand loyalty.
Given how further progress on this work was deprioritized, I would’ve loved to talk to our customers and gather insights for these new designs to explore other possibilities for improvement.
