OVERVIEW
Redesigning for improved conversion with an emphasis on storytelling and interactive tools
We were asked to redesign the Hilton Co-brand landing page to improve conversion metrics. The previous experience was was too sterile and copy-heavy to be compelling. It felt more like to signing a legal contract than shopping for a new Card with great benefits. Users were struggling to understand the differences between the 4 card options and make a decision.
RESPONSIBILITIES
Wireframes
Prototypes for client presentations and usability testing
Usability testing guides, moderating, & reporting,
Some visual design updates
File release and feedback for developers
TEAM
Deirdre Stone: Oversight
Cameron Vizenor: Usability Lead & Oversight
Mathew Samuel: Visual Design
Anna Hecker: Copy
TIMELINE
2020-2021: 12 months
GUIDING PRINCIPLES
Navigating some key considerations
The co-brand multi-card landing page brief was undeniably unique in a few ways. We needed to strategically account for three defining conditions before thinking more creatively about the page experience.
Co-brand balance
Round out product appeal by balancing card features and benefits with the value of the of the two membership programs.
Card art confusion
Establish a reliable method for differentiating the similar looking cards and find opportunities to reinforce it throughout the page
COVID-19 impact
Lean into the less travel-centric, everyday value of card spend and position the travel benefits around a future use state-of-mind
CREATIVE APPROACH
Establishing a foundation for UX and copy
How might we bridge the rational and emotional value of the card family in a way that helps users select the right one for their real-world needs?
‘Show, don’t tell’
credit card benefits
Leverage inspiring
property photos
Feature useful AND fun
interactive tools
EARLY WIREFRAMES
Detailing module options and interactivity
Because conversion was the focus, the page had to prioritize 'Apply Now' CTAs for all 4 cards, which necessitated an enormous amount of detailed information, but we needed to make sure that the page catered to upper-funnel users in the earliest stages of their decision-making too. This dichotomy called for lots of UX exploration.
The various iterations explored:
-
3 versions of the hero module - minimal, full photo, and card promotion
-
3 versions of the points slider module that played with photo cropping, icon use, and points earn vs. burn
-
2 other interactive modules that played with 'spend or save' and 'level-up benefits' concepts
-
3 versions of the CTA reinforcement module that created additional easy conversion opportunities
-
3 versions of the mobile 'Meet the Cards' module that explored different hierarchies for at-a-glance information
-
2 versions of page copy that accounted for the shift from business-as-usual to Covid-19's new normal
VISUAL DESIGN COMPONENTS
Finding the right balance of the brands
The visuals were heavily influenced by the fact that the experience is Hilton-hosted. Leading with the Hilton color palette and applying it to some American Express iconography helped reinforce the unequal nature of the partnership in this context.
USABILITY TESTING METHODOLOGY
Asking the right questions
The point of initial testing was to dig in to two overarching questions: 1) Is the purpose of each module and overall page message clear? 2) Does the page feel functional and easy to navigate?
10 sessions focused on qualitative feedback
10 dentsuMB team members who consider themselves “frequent travelers” were guided through the page in 1-on-1 virtual interviews. They were asked to 'take off their marketing hats,' and all sessions were recorded.
1 hour per session kicked off with background Q&As
Participants were asked background questions about travel frequency,
hotel loyalty, as well as web behaviors. They were prompted to scroll through the entire page while voicing gut reactions and first impressions.
Detailed desktop & mobile in-situ exploration
Some users started with the desktop prototype whereas others began with the mobile prototype. Both were guided through the by module and asked a series of perception vs. reality and likelihood to engage questions.
USABILITY TESTING TAKEAWAYS
Identifying immediately actionable opportunities
For each module, a combination of key, most common findings and secondary considerations gave way to priority must-have optimizations. Higher-level takeaways guided additional creative changes that would be nice-to-have for launch.
“I assume it would take me to the application, but it’s too soon! I need to learn more.”
- Max reacting to the mobile sticky navigation
Participants assumed that the mobile sticky navigation link and all desktop sticky navigation links would drive to a new page.
FINAL DESIGN
Applying the usability takeaways
The first launch was usability-optimized, but there was still more to learn. We employed A/B testing for validating our redesign against the original version of the page. Clients needed to see improved performance before redirecting all traffic.
BEFORE
AFTER
RESULTS
Using A/B testing to asess KPIs
Our initial September 2020 launch tested the redesign against the original version of the co-brand multi-card landing page.
Test 1: Desktop and mobile performance impact of redesigned MCLP with new engagement modules and interactivity
Control: Original version of the page
Date range: Sep 25 2020 – Jan 12 2021
Results: Stable app start rate with lift in NAA by 15% across devices. Desktop app start up by 6.6% vs. mobile down by 3.7% - 98% significance across devices
Variation: Redesigned page with hero that highlights features all 4 cards come with
Then, we introduced an additional engagement opportunity by featuring 1/4 Card options in the hero with corresponding copy across device types.
Test 2: Desktop and mobile performance impact of featuring one Card in the hero with CTA
Control: Redesigned page with hero that highlights features all 4 cards come with
Date range: Jan 12 – Mar 24 2021
Results: Control continued to outperform desktop on start rate (18.1% vs. 17.9%) and NAR 7% vs 6%). Flat performance for mobile with start rate at control at 12.3% vs. variation at 12.5%. NAR for control at 2.7% vs. variation at 2.1%.
Variation: Redesigned page with hero that highlights 1/4 cards
As mobile continued to remain flat, we explored a truncated version of our original mobile hero that brought the card tiles slightly closer to the fold, then we eliminated it entirely and introduced a sticky navigation to make all 4 cards always accessible.
Test 3: Mobile-only performance impact of bringing all 4 Cards above the fold and making them sticky
Control: Redesigned mobile page with hero that highlights features all 4 cards come with
Date range: Apr 14 – Aug 17 2021
Results: Stable app start rate, conversion rate and NAR across both control and variation, 100% significance
Variation: Stable app start rate, conversion rate and NAR across both control and variation, 100% significance
