SEARCH
Project:
Overview
Background
This project aimed to modernize and improve the search module on fluege.de by combining insights from previous user research on various other projects. With the rest of the home page already redesigned other than search, we planned to create a streamlined and intuitive search experience that addressed identified usability challenges.
​
By incorporating progressive usability testing and A/B testing into the process, we aimed to iteratively refine the interface to align with user needs and modern design standards.
Duration
Project Duration: 4 Weeks Concept to Release
( UX/UI: 2 Weeks)
Company
Invia Flights
Team Composition
1 UX/UI Designer (My role)
1 Product Owner
2 Frontend Developers
1 Backend Developer
​
UX/UI Design
User Testing
A/B Testing
Previous Research Insights
A workshop was organized to gather previous research insights from colleagues, identify key issues, and define the project scope. During the session, product designers and product owners collaborated closely to discuss challenges, pinpoint areas for improvement, and ensure alignment on the project’s objectives. The goal was to create a comprehensive understanding of the existing problems and opportunities, fostering a shared vision for the next steps. This collaborative approach helped ensure that all critical aspects of the project were thoroughly considered before moving forward.
Problem
Pain points identified from user research across various projects were collected and discussed to the design team to gather feedback on the home screen search module. The key problems are outlined below.
1
2
3
4
1
Confusing Placement of Plus Membership
During the previous user research, we discovered that the placement of the Plus Offer next to the search bar leads to significant confusion. Users often believe they are searching for flights specifically linked to the Plus Offer, which results in misinterpretation and frustration.
2
Cluttered Layout with Unused Ad Space
Unused ad space has remained stagnant for years, contributing little to the overall experience. By eliminating this clutter, we can create a cleaner and more purposeful design.
3
Lack of Visibility for Benefits
Important information about available payment types and other benefits are not prominently displayed, leading to uncertainty and a lack of trust during the booking process.
4
Layout Design
Modernizing the layout with a fresh, intuitive design may create a more engaging and seamless experience. A refined structure and visually appealing elements could enhance user interaction across all devices, especially the website.
​How might we create a seamless user experience by improving the search module and refining benefits?
Aligning objectives, identifying potential technical difficulties, and crafting a strategic plan
Kickoff
Scope discovery
We started by aligning on project objectives and ensuring clarity on the desired outcomes for all stakeholders.
Identifying Technical Challenges
During the discovery phase, we worked closely with the technical team to uncover potential difficulties early on. Fortunately, there were minimal restrictions, which allowed us to plan efficiently.
Planning the Approach
To move forward strategically while prioritizing user needs, we adopted a progressive approach. This included iterative user testing and A/B testing to refine and finalize the most effective solutions.
Ideation
During the ideation phase, we focused on balancing design goals with efficient business strategies for ad placement. In collaboration with product owners and developers, we addressed key considerations.
-
Wireframes: Developed multiple sketches to meet design objectives while optimizing ad placement to enhance user experience.
-
Ad placement strategy: Evaluated potential technical challenges arising from various layouts and discussed ad placement strategies for revenue generation.
-
Benefits section: Discussed the positioning of the benefits section to ensure it stands out and finalised additional elements to be incorporated into the sections.
-
Future design considerations: Anticipated the number of ads to be featured in the future, planned their placement and prioritized essential aspects in design.
We designed multiple variants based on identified problems and goals, then conducted user testing to validate our solutions. Throughout the process, we maintained regular discussions and alignment with the development team, incorporating their feedback to ensure feasibility and seamless implementation.
Mockups
Initial design
Target state: Variant A
1
2
3
Key Improvements
1
Adjusted the position of the Plus Ad to reduce user confusion and prevent misinterpretation of its connection to specific flight searches.
3
-
Refined the search module design to create a more streamlined and user-friendly experience.
-
Replaced icons without text with links, improving usability and navigation.
2
-
​Added payment information to provide users with more informed decision-making support.
-
Applied design system elements to benefits and improved text clarity, making them more understandable and user-focused.
User testing
Various user testing methods were employed to evaluate the current and proposed designs, identify user preferences, and to take actionable steps to enhance the proposed design.
Short answer questions
Preference test
Linear scale
Target state :Variant A​​
Initial design
User testing: Outcome
Performance Summary
Variant A outperformed the current design, with 93% of participants preferring Variant A, compared to just 7% who favored the current screen.
Key Reasons for Preference
Participants highlighted the following advantages of Variant A:
-
Improved contrast, which made elements more visually distinct.
-
Easily readable fields, enhancing usability.
-
A better overview, providing a more organized and accessible layout.
​Identified Improvement Areas
Participants provided feedback on several aspects of the design:
-
The promotional content felt overly prominent, detracting from the overall design balance.
-
Some areas of the design were perceived as blank and unfinished, leading to a sense of visual incompleteness.
-
The search functionality appeared too small, which potentially affected usability.
Room for Improvement
Despite its success, Variant A received a low mean score of 2 on a linear scale question about appearance, indicating that its visual appeal required further refinement.
​Next Steps Taken
Based on these insights, the design was iterated further to address the identified concerns. Updates focused on balancing visual elements, improving layout completeness, and optimizing critical interactive components such as the search area.
Further Improvements
1
2
3
Previous state: Variant A
Target state: Variant B
User testing
We utilized a range of user testing methods to assess new design variants A and B, understand user preferences, and implement actionable improvements to optimize the proposed design.
Short answer questions
Preference test
Linear scale
User testing: Outcome
Option A is 34 percentage points higher than Option B, leading us to select the horizontal version as the preferred design. However, we continued to refine the layout by developing additional variants that balanced modernization with user personas and brand identity.
We developed and user-tested several design variations. The user testing results clearly indicated a preference for the horizontal layout, leading us to explore and refine multiple iterations of horizontal designs.
Further Iterations
Various use cases
Variants
Website, Tablet and Mobile site
Click any image to expand and explore the full panel!
Final Design
Watch the prototype!
Design Validation
5
Variants
9
User tests
4
A/B Tests
Iterative Design Testing and Data-Driven Decision Making
To optimize the user experience and drive sales, we adopted a progressive testing approach, creating and refining 5+ design variants. Rather than overhauling everything at once, we conducted step-by-step user testing, allowing us to analyze the impact of individual design decisions and identify key factors influencing user behavior.
​
Approach
-
Conducted 9 user testing sessions in 2 weeks to streamline insights and minimize the time required to achieve a user-centric approach.
-
Implemented A/B testing with 4 groups:
-
Group 0: Existing design (control)
-
Groups 1-3: New design variants validated during user testing.
-
The user testing revealed minimal differences among the three new options, prompting us to rely on A/B testing to make a data-driven decision.
Key Performance Indicators (KPIs)
-
Click-Through Rate (CTR): Increased by 21%
-
Search Drop-Off Rate: Reduced by 11%
-
Conversion Rate: Improved to 7%
Outcome
This methodical approach not only enhanced the design based on real user feedback but also accelerated the decision-making process, ensuring measurable improvements in user engagement and business outcomes.
