Product Cards: Tailoring experiences to diverse needs

With TUI’s vast catalog of travel experiences, users needed a search tool that was powerful yet intuitive. The previous search bar lacked customization, making it difficult to refine searches efficiently. My redesign focused on balancing functionality and usability—introducing a dynamic search bar that adapts to different products, improves discoverability, and enhances the overall user experience. Through research, iterative design, and close collaboration with developers, we created a seamless and visually engaging solution that is now being rolled out across TUI Iberia

🃏 Context

TUI offers a wide range of travel products, including vacation packages, flights + hotels, custom trips, hotels, activities, transfers, and cruises. However, the search experience was outdated and ineffective. Users often struggled with a lack of advanced filtering options, a cluttered interface, and generic search fields that didn’t adapt to different product types. Given TUI’s expansion into B2C, improving the search experience became a priority.

🔎 Initial research

User feedback

To identify key pain points, we analyzed heatmaps, customer support inquiries, and direct user feedback. Many users found the search experience frustrating due to unclear filtering options and an inefficient use of space. The lack of customization also led to confusion, as all search types followed a rigid structure. Additionally, essential filters were hidden, making it difficult to refine searches effectively.

Understanding the problems

To identify key pain points, we analyzed heatmaps, customer support inquiries, and direct user feedback. Many users found the search experience frustrating due to unclear filtering options and an inefficient use of space. The lack of customization also led to confusion, as all search types followed a rigid structure. Additionally, essential filters were hidden, making it difficult to refine searches effectively.

Competitive analysis & heuristic evaluation

We benchmarked against leading travel platforms to identify best practices in adaptive search fields, multi-step filtering, and persistent search bars. An expert review of our existing search functionality highlighted usability issues, including poor layout prioritization, inefficient space distribution, and an overwhelming number of generic input fields.

🎯 Defining objetives

The redesign needed to make key information easy to find while keeping navigation intuitive. A balance had to be struck between expanding filtering options and maintaining a clean, user-friendly interface. Visually, the new design aimed to create a modern and engaging experience that aligned with TUI’s branding. Functionally, we introduced a search bar with multiple states—compact by default and expanding when activated—allowing for a more dynamic and efficient user experience.

⚜️ Design & Prototyping

Wireframing the solution

We started with rough paper sketches to explore layout ideas, followed by structured component alignment and low-fidelity wireframes. The goal was to ensure clear information hierarchy and intuitive navigation.

From Concept to High-Fidelity prototypes

After validating wireframes, we moved to high-fidelity prototypes in Figma, incorporating advanced filtering panels, product-specific search fields, and improved visual hierarchy. The new design also featured a more aesthetically refined layout, addressing the previous version’s cluttered appearance.

✅ Validation

Testing & refinement

As the redesign is still in the launch phase, full-scale user testing in a real environment has yet to be conducted. However, preliminary tests with internal stakeholders provided valuable feedback. Based on this, we refined button placements for better accessibility, improved contrast and typography for readability, and optimized the filtering logic for a smoother search experience.

👨🏽‍💻 Implementation

Bringing the design to life

Collaboration with the development team ensured pixel-perfect implementation and smooth interactions. Extensive quality assurance testing was conducted to verify cross-browser compatibility, mobile responsiveness, and interaction consistency across all search types.

🚀 Launch & iteration

Rolling out the new experience

The redesigned search bar is currently in the process of being launched across all TUI Iberia pages, providing a unified and improved experience. Once fully deployed, we will gather analytics on search usage, track engagement through heatmaps, and collect direct user feedback to measure its impact.

Looking ahead

Future iterations will be guided by conversion rate analysis, seasonal travel trends, and advancements in AI-driven search enhancements. The redesign sets a strong foundation for a more intuitive and efficient search experience that evolves with user needs.

Final toughts

Future iterations will be guided by conversion rate analysis, seasonal travel trends, and advancements in AI-driven search enhancements. The redesign sets a strong foundation for a more intuitive and efficient search experience that evolves with user needs.

More by Pier Di Silvestre

View profile