Travel
Challenge
Our homepage and comparison page were riddled with extensive design and technical debt (Typo3, PHP). Over the years, multiple design changes and patches have been applied without a holistic strategy, leading to inconsistent user experiences and degraded performance. The outdated design not only impacted user engagement, click-through rates, and conversion rates but also made it challenging to implement new features efficiently.
Key issues:
Inconsistent Design Elements: Various styles and elements were incoherently patched together, leading to a disjointed user experience ( 3rd-Party, Legacy).
Slow Load Times: The accumulation of legacy code and unoptimized assets resulted in slow page load times, negatively affecting user retention.
High Bounce Rates: Users often left the site without engaging further due to poor navigation and a lack of intuitive design.
Low Click-Through Rates: While approx. 70% of UV (Unique Visitors) on the Homepage moved to the comparison page the data changed in the funnel and was not satisfactory.
Low usage of filters: The filters were "hidden" leading to low usage statistics - besides the fact there were no dynamic and personalized features.
Technical Limitations: The existing codebase was difficult to maintain and scale, impeding the ability to introduce new features and improvements quickly.
Poor Usability and accessibility scores: Across the product, accessibility, and usability issues were prevalent, significantly hindering user experience.
Solution
We embarked on a comprehensive redesign of the homepage and the booking funnel, focusing on creating a cohesive, user-centric design while addressing technical debt from scratch by rebuilding the status quo in next.js and implementing the new "world".
Key components:
Usage of Design System: Implemented a consistent design language across all elements to provide a seamless user experience.
Performance Optimization: Refactored the codebase and optimized assets to improve load times and overall site performance.
Collection and Integration of Research Insights: Extensive qualitative and quantitative research led to relevant insights that helped us set the baseline for improvements.
Enhanced Navigation: Redesigned the navigation structure, cards, badge logic, and filters to make it more intuitive, visible, customer-centric, and user-friendly.
Focus on Usability and Accessibility: Implemented WCAG and APCA standards to ensure the product is accessible and usable to all users.
Scalable Architecture: Modernized the underlying technology stack to facilitate easier maintenance and scalability for future enhancements.
9%
17%
11%
Process
Step-by-Step Approach
Discovery and Analysis
Thorough Audit: Conducted a comprehensive review of the existing desktop product to gain insights into user behavior, identify usage patterns, and validate accessibility, and usability scores.
Multirole-Collaboration: Facilitated workshops around our so-called self-developed "One-Pager" consisting of "Business Goal, Problem Definition, Target (Segment, Persona), Assumptions, Hypotheses, Questions, Health Metrics, Success Metric, Cluster, and Prioritization Matrix" as a baseline for future steps.
User Feedback Collection: Gathered extensive user feedback through detailed surveys, interviews, and usability testing to pinpoint pain points and better understand user needs and expectations.
Design and Prototyping
Applied Design System: Utilized the newly developed design system to ensure consistency and coherence across the product.
High-Fidelity Prototypes: Created detailed high-fidelity prototypes to visualize the new design, enabling comprehensive feedback collection across the organization using our self-developed Design-Critique framework.
Development and Optimization
Codebase Rebuild: Rebuilt the codebase using Next.js and Python, significantly enhancing maintainability and performance.
Asset Optimization: Optimized images (using .WebP format), scripts, and other assets to improve load times and overall site speed.
Modular Architecture: Implemented a modular architecture to facilitate future scalability and seamless addition of new features to become increasingly independent of limiting dependency systems.
Testing and Iteration
A/B Testing: Conducted extensive A/B testing to validate assumptions and hypotheses, focusing on critical metrics such as bounce rate, click-through rate, conversion rate, SUS, CSAT, UXQ, NPS, and more ...
User Feedback and Iteration: Gathered user feedback through interviews and usability testing, iteratively improving the product based on insights documented in our insights repository (Dovetail).
Launch and Monitoring
Initial Rollout: Launched the first version of the homepage in Austria closely monitoring performance and gathering user feedback.
Performance Tracking: Continuously tracked key performance indicators (KPIs) to measure the impact of the redesign and identify areas for further optimization.
Unfortunately, we couldn't proceed with the next step and launch the next iteration in the German market planned for August 2024.
