Mobile First UX Optimization for Travel Website
Optimized content and restructured information architecture for a mobile-first local travel website, resulting in a 128% increase in click-through rates.
Summary
With 95% of Experience Abu Dhabi's (EAD) traffic coming from mobile devices, the project focused on optimizing the platform for mobile-first design. The goal was to revamp the website’s user interface, improve navigation, and align the platform with mobile user expectations. The redesign not only enhanced usability but also boosted user engagement, with a +128.5% improvement in click-through rates.
Case Study | 5 min read
Mobile First UX Optimization for Travel Website
Problem
The primary issue was the inefficiency of the current mobile navigation system, including the use of the burger menu, which had a very low engagement rate (0.3%). Users were also struggling with slow navigation and a cluttered interface that didn’t align with their mobile-first expectations. As attention spans shrink, the challenge was how to design a responsive and intuitive mobile experience that felt aligned with the brand’s identity and optimized for action-driven interactions.
Challenge
The challenge was twofold:
Mobile Experience Redesign: Given the heavy reliance on mobile traffic, EAD needed to shift from desktop-focused design elements, such as small tappable areas and hover-dependent interactions, to mobile-optimized features, such as larger buttons, sticky headers, and thumb-friendly interactions.
Information Architecture: There was a need to restructure the content flow and improve visual hierarchy to make essential information easily accessible, while also enhancing the overall brand expression and visual consistency across all mobile layouts.
Solution
The solution involved a comprehensive mobile-first redesign, that incorporated several key elements:
Mobile Navigation Optimization: The team revamped the mobile navigation by centralizing key actions, eliminating ineffective elements like the burger menu, and introducing a more accessible call-to-action (CTA) in the hero banner, significantly boosting engagement (+128.5% click-through rate).
Content Restructuring: A new information architecture (IA) was designed to streamline content, with features like "read more" truncation and accordion-based content to improve scannability and speed of use.
Visual and Interaction Enhancements: The redesign included a refreshed visual language that aligned with the brand, optimized for mobile screens, and enhanced with motion principles. The content layout was adjusted for thumb-friendly interaction, while performance optimizations like lazy loading were implemented to reduce load times.
Design System: The team developed a solid design system with tokens and guidelines, ensuring consistency across all pages and supporting future updates across multiple breakpoints.
By leveraging mobile-first design principles, the project successfully increased engagement, improved accessibility, and streamlined the user experience, making it easier for users to plan their trips and interact with the platform effectively.
2 min browse
Process Snapshot
2 min browse
