As the world's leading hotel search, trivago serves over 120M MAU across 55 countries. Though mobile surpassed desktop traffic in 2016, it trailed in conversions, spotlighting potential issues with the mobile booking experience. The main factors limiting trivago's mobile UX were found to be unstable connections and high data costs. Users often grappled disrupted network access, even in well-connected urban areas with 4G availability, while an aversion to download data-intensive native apps added to their concerns. In response, trivago initiated "Project Meteorite". Harnessing the power of Progressive Web Applications (PWAs), the goal was to design a low-bandwidth, offline-friendly solution that effectively eliminated the notorious "Google Dinosaur".
→ Platform Audit
→ Stakeholder Interviews
→ Literature Review
→ NNG Guidelines
→ Legacy UI Evaluation
→ Brainstorm
→ Sketching (x2)
→ Wireframes
→ UI Design
→ Interactive Prototypes
→ UX & IxD Specifications
→ Design Critique
→ Visual QA
→ Team Workshop
→ CompetitorAnalysis
→ User Survey
→ Brand Definition Workshop
→ Brand Framework
→ User Requirements
→ Moodboarding
→ Wireframes
→ Visual identity Design
→ UI Design
→ Design System Creation
→ Functional Specifications
→ Brand Guidelines
→ Think AloudTesting
→ Visual QA
→ Kick-off Workshop
→ Metadata Analysis
→ PWA Technology Research
→ Use Case Definition
→ Functional Requirements
→ Team Brainstorm
→ Wireframes
→ UI Design
→ Interactive Prototypes
→ Cognitive Walkthrough
→ Click Testing
→ User Questionnaire
→ PWA Build
→ Visual QA
→ Competitor Analysis
→ Social Media Analysis
→ Content Requirements
→ Functional Requirements
→ Moodboarding
→ Sketching
→ Wireframes
→ Visual Identity Design
→ UI Design
→ Design System Creation
→ Design Critique
→ Design Revisions
→ User Interviews
→ Literature Review
→ CompetitorAnalysis
→ Persona Creation
→ User Requirements
→ Product Scoping
→ Brainstorm
→ Sketching
→ Journey Mapping
→ Wireframes
→ Visual Identity Design
→ UI Design
→ Design System Creation
→ Think Aloud Testing
→ User Interviews
→ Literature Review
→ CompetitorAnalysis
→ Persona Creation
→ User Requirements
→ Product Scoping
→ Brainstorm
→ Sketching
→ Journey Mapping
→ Wireframes
→ Visual Identity Design
→ UI Design
→ Design System Creation
→ Think Aloud Testing
→ Competitor Analysis
→ Literature Research (PET)
→ Brainstorm
→ Functional Specification
→ Sketching
→ Journey Mapping
→ Wireframes
→ Visual Identity Design
→ UI Design
→ Design System Creation
→ Moderated User Testing
→ Client Review
→ Visual QA
→ Analytics Monitoring
Introducing an offline experienced post three key design challenges. First; orientating users in the offline/online space, in accordance with Nielsen's heuristics (#10: Visibility of System Status). Second; eliminating interactions which failed offline & degraded trivago's UX (so called “dead ends”). And lastly; providing a compelling offline experience that challenged the long-standing misconception that offline meant non-functional.
To orientate users in the offline space, we explored several components from the existing pattern library, as well as new components & evaluated them against Nielsen's heuristics. Ultimately snackbars were a perfect fit; maintaining a visible & fixed position above all other interface components whilst still allowing users to interact with the UI.
Through mapping common hotel search userflows, I identified 4 possible "Dead-end" scenarios. Whilst solving these, a key consideration was to avoid disabling all interactive elements such as buttons as this created an uninviting interface which visually emphasised a lack of offline functionality. To enhance the user experience, we employed PWA's offline data caching to locally store hotel information, making it accessible offline. Storing data locally, however, posed performance risks to the platform and I was therefore tasked with defining feasible parameters for caching. I conceptualised several potential designs for the uncached slide-outs and evaluated these via user testing.
Trivago's PWA offers a seamless and user-friendly experience, allowing users to search for accommodations, compare prices, and book hotels with ease, whether they're at home or on the go.
To inform users of their connectivity, we implemented new toastbar components. Toastbars had two forms - online and offline and sported the darkest brand colour elevating their visual weight on the hotel search UI. True to their name, these components would 'pop' and remain visible while scrolling. The offline toastbar persistent until connection was recovered, to alert users about their status and limited usability. Conversely, the online toastbar was transient, momentarily informing users of their regained connection before timing out.
To tackle the dead-end scenario encountered by first-time visitors, we built a JavaScript-powered maze game that kept users entertained during connection recovery. It reconfigured with each refresh for a unique experience. Additionally, we included a reconnection button and implemented automatic connection checks every 15s, to minimise friction for users.
To ensure trivago's UI felt active and engaging offline, we opted to keep "View Deal" CTAs active. Users clicking the CTA were directed to a holding gateway, which redirected them to their selected deal once the connection was regained.
Trivago users could easily browse millions of hotels online but faced the dreaded offline Google dinosaur when they tried to access hotel information offline. To balance interactivity with performance, we strategically cached only previously viewed slide-outs. These were highlighted using darker blue hotel names to minimise users' cognitive load, when trying to recall which hotels they had interacted with.
By leveraging empty state illustrations in the non-cached slide-out UI designs, we were able to create a solution both visually distinctive and glanceable. These designs replaced confusing placeholders with clear images representing the type of information in each slide-out, like amenities, location, and deals. In addition, they included a noticeable offline message and an explanation of the steps to regain full content access.
In our drive to optimise user retention and present PWA as a lighter alternative to data-intensive native apps, we harnessed the 'add to homescreen' feature of PWA. This simplified user navigation to our mobile site, while providing an app-like experience for those deterred by expensive mobile data costs.
"She masterminded an entire refresh of our app & brand setting a foundation for design here at Muzz. Always focussed on finding the right balance between user & business needs.
I could always trust Laura to find the right solution for a particular design or user experience problem & one of the strongest designers I've worked with."
"Laura is quite simply amazing. Hugely talented and creative. Her take and revamp of our website UX is fantastic and she helped us to understand the logic and theory behind her suggestions. Highly recommended."
"Laura's contribution to the design aspect of my mobile game was nothing short of remarkable.
Working alongside Laura has been an absolute pleasure. Her contributions have been instrumental in elevating the game's design to a new level."
"She nailed the website looks exactly to my expectations. On top of that, she's also super fast & efficient... & thinks about other aspects of the web design. le. how people would convert, what attracts their attention etc.
Definitely give her a chance, and you'll be glad you got such a pro working with you."
"Love working with Laura! The attention and care to details makes me feel fully held with clear guidance and fully supported on our projects.
Look forward to future projects as well. Much gratitude!"
"Laura has a unique quality through her skills & professionalism in drawing out from the client exactly what they are looking to achieve. Then visualising this back to them with different options, so they have a choice.
I would recommend Laura anytime and every-time to anyone that is in need of such expertise, or design services."
