Redesigning a product card for improved conversion — a UX design challenge
The Challenge
Stride Travel helps travel enthusiasts discover and book tours and adventure trips. Users browse through itineraries, read reviews, and book trips with independent travel companies via the Stride Travel website.
As part of a design challenge by the team at Stride Travel, I was asked to redesign the product card, which features trip information.
This was a really interesting challenge because I recognized that the product card was the first point of decision making for the user when booking a trip and improving it would greatly impact conversion.
I wanted to share my experience for other designers who might face similar design challenges while interviewing.
Understanding the travel enthusiasts
After reviewing the challenge, I asked the team if they could share details about the users.
The team responded by encouraging me to make assumptions about who I thought the users are. They also gave me the freedom to add or remove content in the product card as long as I could justify my reasoning.
So, my first step was to figure out who the users are.
From the Stride Travel website, I discovered there were three types of users, differentiated by budget:
- Budget Traveler: wants to travel in a group (low price point)
- Midrange Traveler: who wants to cruise (medium price point)
- Premium Traveler: who wants a custom travel experience (high price point)
I picked the first user — the Budget Traveler — and created a persona so I could identify their goals and needs.
How do users book a trip?
Mapping the user’s journey, right from searching for a destination all the way to making a reservation, revealed that the user moves from the product card to the product page where the bulk of the trip information is offered and where the user books the trip. Therefore I concluded that the product card is the first point of conversion and is critical for moving the user towards making a reservation.
Many of the trip details included on the product page were also on the product card, which made me wonder if the card was offering too much information.
What content do other travel websites feature on a product card?
To better understand the business space that Stride Travel operates in, I looked at competitive websites - REI Adventures and Backroads.
Here are some observations:
- Travel websites segment their users differently. Similar to Stride Travel, REI focuses on activities and activity level, while Backroads emphasizes life stages.
- Featuring membership discounts encourages users to become members.
- The REI and Backroads product cards were “content-light”, whereas Stride Travel’s product card included a lot of information. Therefore, I concluded that the product card’s purpose is to provide just enough information to pique the user’s interest so they will click for more details.
The product card’s purpose is to provide just enough information to pique the user’s interest so they will click for more details.
Analyzing the current product card
Below are observations and ideas for improvement:
Redesigning the product card
Design #1 — eliminating redundancy
My goal was to bring uniformity to the product card (based on rest of the Stride Travel website) and eliminate redundant information.
The following changes were made:
- The heart icon was selected to represent favorites as it is commonly associated with that feature.
- The “Great” review rating was eliminated. The 5-point rating system provides the same information and is more commonly used.
- The travel theme tags were moved from their previous position on the banner and placed in the main section so all descriptors are visible.
- The dollar icon was selected to represent Stride Select as users are more likely to associate savings with that icon. (The tool tip on hover interaction would remain the same.)
- The destination photo was enlarged to peak user interest.
Design #2— experimenting with icons and price layout
In another version, I explored icons and a different presentation of the price:
- Icons replaced text to enable scanning
- As price is a key consideration for the Budget Traveler, the placement was changed for better readability. The total price of the trip was highlighted by using a larger font size, while the secondary information — the number of days and price per day — was placed below it in smaller font.
Testing Design #2 with users
To get feedback on the design, I tested with two users who fit the Budget Traveler persona and are avid travelers. I chose to test the second design, as it was the simpler version of the two. Testing revealed the following:
- Users could identify the icons for “tour type” and “travel theme”. However, they couldn’t understand the icon for lodging.
- Users correctly guessed that the Stride Select icon represented savings.
- When asked which pricing layout they preferred — the one in the current card vs. the one in the redesign— they mentioned the latter was easier to understand.
The redesigned product card
In the final version, the new pricing layout was retained. Also, as users were able to identify two of the three icons, I contemplated adding a tooltip for explanation. Eventually, I decided to eliminate the icons and go with text labels as that would be less tedious for the user.
Reflection
In this challenge, I had to make assumptions in the absence of feedback. So, I made sure to share my reasoning behind the design decisions I was making.
I also realized the importance of stepping back and considering the big picture — the user’s journey — to determine what information was most relevant for the product card.
The design team at Stride Travel responded with positive feedback. Relying on my experience and intuition as a designer and articulating my design decisions helped me deliver successfully on this challenge.
Thanks for reading! You can learn more about me and my work here: http://www.kalyanidesigns.com.
