REWARDS PROGRAM SELECTION CASE STUDY
Project overview
I opted to improve the rewards selection experience and got my team involved when I noted improper use of standard controls on the landing page. Rocketmiles is an online booking platform partnered with 30+ enterprise-level brands, offerings various rewards exclusively to their customers when they book travel. I aimed to simplify program selection so users could get a quick grasp on the breadth of offerings before moving on through the funnel.
PROBLEM
On the landing page, program selection isn't very intuitive. The program selector doubles as a very long dropdown menu and as a search input field, neither of which are implemented properly. This makes selection daunting and causes friction, hindering users from proceeding to the search results page.
On the landing page, program selection isn't very intuitive. The program selector doubles as a very long dropdown menu and as a search input field, neither of which are implemented properly. This makes selection daunting and causes friction, hindering users from proceeding to the search results page.
SOLUTION
Reviewing common design patterns and consulting design best practices helped inform my decisions to update the long dropdown list to a sheet, and to incorporate a separate search input within it, giving users a more straightforward way to scan program options without getting overwhelmed. This would alleviate cognitive load, reduce the number of clicks and make it easier to interact with as a whole.
Reviewing common design patterns and consulting design best practices helped inform my decisions to update the long dropdown list to a sheet, and to incorporate a separate search input within it, giving users a more straightforward way to scan program options without getting overwhelmed. This would alleviate cognitive load, reduce the number of clicks and make it easier to interact with as a whole.
ROLE
Experience Designer
TEAM
1 Product Owner, a small group of developers, 2 designer for occasional support, 1 Design mentor
Reduced friction, improved function, and an projected increase in clicks to the search results page
PROCESS
Discovery, Ideation, UX Design, Interaction Design, Dev Hand-off
DURATION
2023
STATUS
Ready for development
WORK DEPRIORITIZED
We were excited to move on to the next phase, but the work was then deprioritized once the designs were finalized.
We were excited to move on to the next phase, but the work was then deprioritized once the designs were finalized.
NEXT STEPS
I’d have wanted to get user feedback by conducting usability tests and gathering responses on the new controls from our Rocket Insiders group. Those insights might have helped to refine them a bit more before A/B testing and seeing if users could move more quickly through the search form. Even though this project was paused indefinitely, we still felt pretty confident these improvements would’ve increased conversion and also been a winner for return bookers with brand loyalty.
I’d have wanted to get user feedback by conducting usability tests and gathering responses on the new controls from our Rocket Insiders group. Those insights might have helped to refine them a bit more before A/B testing and seeing if users could move more quickly through the search form. Even though this project was paused indefinitely, we still felt pretty confident these improvements would’ve increased conversion and also been a winner for return bookers with brand loyalty.
Discovery
Search-dropdown-list? 🤔
On the landing page, the search form contains a search input field with typeahead functionality. Sometimes, it has helper text that says ‘Enter or choose a program’. Other times, 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.
This input field also functions as a dropdown. When it’s 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. With over 30 line items for branded programs, this isn't the most appropriate use of a dropdown, and it makes it daunting for users to scan.
Where can we make improvements?
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
I did away with the dropdown and opted for a sheet that showcases the list of rewards options in full. Since recognition over recall eases users’ cognitive 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.
User flows
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
*Progress on this work was halted and deprioritized
Key takeaways
Rather than chasing shiny new features, it was nice to hone in on solving a problem centered on basic patterns and controls to enhance our rewards selection experience. Additional pages and interactions would’ve overcomplicated this, and we didn’t want this to be a heavy lift from a technical standpoint. The goal was simply to help users understand the available options so they could quickly make a choice and move on to book a room.
