Shopping cart editing feature
In-app editing feature for TripAdvisor's attractions shopping cart, allowing users to modify their selections directly within the shopping cart.
Client: TripAdvisor
Role: Lead UX/UI Design
Duration: September – December 2017
To comply with my non-disclosure agreement, I’ve omitted confidential information. The data featured here is my own and does not reflect TripAdvisor’s views.
background
TripAdvisor’s shopping cart for attractions was a crucial part of the user experience, but it came with significant friction. Users were unable to modify attraction details directly in the cart, which led to cart abandonment and lost revenue. This pain point frustrated users, who were often forced to remove and re-add items to their cart to make simple changes. Our goal was clear: empower users to edit their selections without having to start the shopping process from scratch, ultimately boosting engagement and conversion rates.
My role
As the lead UX/UI designer, I spearheaded the design process from start to finish. This involved deep user research to uncover pain points, designing wireframes and prototypes, and working closely with product managers, engineers, and the research team. My focus was to ensure that the design was both user-centric and technically feasible. My leadership ensured the collaboration between teams was seamless, resulting in a user experience that not only solved problems but also delighted users.
problem space
The main problem was simple but impactful: users wanted the ability to modify product details directly within the shopping cart. The inability to do this created significant friction in the user journey, causing users to abandon their carts or, worse, leave the website altogether. The solution was to create an intuitive editing feature, designed to save users time and streamline the purchasing process. The goal was to increase attraction purchases by 10% and reduce cart abandonment rates by 7%.
This feature was designed for both desktop and mobile platforms to ensure a consistent experience across devices.
Pain points
The current shopping cart functionality was clunky. Users had to remove and re-add items to make edits, such as adjusting dates, changing group sizes, or selecting different tour grades. This process was time-consuming and frustrating, leading to a poor overall experience and increased cart abandonment.
Research
Through research, we discovered valuable insights into when and why users abandoned their shopping carts. Many users added attractions to their cart but didn’t complete their purchases until much later—some returning just days before their trip or even during the trip itself to make last-minute adjustments.
We identified three key user behaviors that drove the need for editing functionality:
• 40% of users made changes within a week or a few days before their trip, often adjusting dates, tour grades, or group sizes based on evolving plans.
• 30% of users made edits during their trip to accommodate unforeseen changes in their plans.
• 30% of users made last-minute changes, seeking flexibility and spontaneity in their travel plans.
By understanding these behaviors, we were able to create a more tailored and user-centered shopping experience.
User personas
To design for the varied needs of our users, we created three distinct traveler personas:
Emily (32, Vacation Planner): A meticulous planner who carefully curates every detail of her trip. Emily relies on the cart edit functionality to fine-tune her itinerary and make last-minute adjustments as her plans evolve.
Jose (38, Family Traveler): A family man who values flexibility when traveling with kids. Jose uses the cart edit feature to make changes on the go, ensuring his family's travel plans remain as smooth as possible.
Sarah (26, Spontaneous Traveler): A free spirit who embraces the excitement of last-minute travel. Sarah values the ability to modify her selections on the fly, adapting her plans as new opportunities arise.
Design strategy
The strategy was to design a feature that was intuitive, seamless, and easy to use across platforms. We focused on testing wireframes extensively to validate our approach before refining it into high-fidelity prototypes. This allowed us to ensure we were heading in the right direction with user flows and overall experience.
Flow charts
We categorized user flows into two groups: non-user dependent and user-dependent. Our focus was on the user-dependent flows, which included edits that could be made based on user preferences, such as changing dates, adjusting the PAX-mix (group size), or modifying the tour grade.
We also introduced two additional features:
Safe for Later: Allowing users to save items for future consideration.
Edit: Enabling users to directly modify items in their cart, including dates, group sizes, and tour grades.
User Flows
The core user flows for editing items in the cart were designed to be simple and straightforward, allowing users to easily make changes without any confusion.
Change Date: This flow allowed users to modify their selected date, ensuring that they could adapt their plans with minimal effort.
Change PAX-Mix: Users could adjust the number of people in their group, ensuring that all attendees could be accommodated in the best way possible.
Wireframes & Testing
Initial wireframes focused on a tabbed interface for date and PAX-mix selection. However, user testing revealed that switching between tabs caused unnecessary friction, particularly when an attraction was no longer available or when users couldn’t find the ideal date. Based on these insights, we iterated on the design, simplifying the flow by removing the tabbed interface and presenting a more flexible, dynamic selection process.
Prototype
Once wireframes were validated, I moved forward with creating high-fidelity mockups for both desktop and mobile platforms, ensuring a seamless experience across devices.
Desktop: The desktop version was contained within a modal window. The primary focus was on ensuring easy access to date pickers and PAX-mix selectors within the modal while maintaining the core structure and flow.
Mobile: The mobile version adapted the desktop design to smaller screens, ensuring usability and intuitiveness. We optimized key interactions, such as date selection and group size adjustment, to be mobile-friendly and easy to navigate.
learnings
The Cart Edit feature was a resounding success. Within the first three months of launch, cart abandonment rates dropped significantly, and conversion rates soared by 12%, exceeding our initial goals by 2%. This feature was so well-received that it was eventually rolled out across other segments, such as hotels.
Key takeaways from this project include:
Embrace Failures: The initial design of the tab-based navigation didn’t work as expected. Although this was a setback, it provided valuable insights and ultimately led to a much smoother user experience.
Pivot: Continuous user feedback during research and testing led to several changes in direction, ensuring that we stayed aligned with user needs.
Think Globally: While the Cart Edit feature was originally developed for the Attractions team, its success made it clear that similar features could be adapted across TripAdvisor’s other verticals, ensuring scalability and broad applicability.
