Trivago — a renowned tech giant in the hotel &d lodging industry — operates a diverse portfolio of B2C (Hotel Search), B2B (Hotel Manager), and internal solutions (Talent Community), spanning web & mobile. To address the complexities of scalability, performance and usability inherent in its vast portfolio, the company maintains a global pattern library, based on atomic design principles.
As they had adopted a design system later in their journey, Trivago was still grappling with having an incomplete library, inconsistent legacy components and component misuse. In this project I took on this challenge; developing a uniform design language for tabs and toggles.
→ 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
My journey began with an in-depth audit of Trivago's products, meticulously documenting every legacy tab & toggle. To anticipate future needs, I also hosted a workshop with fellow designers to study their work-in-progress designs and their use of any tabs and toggles. For each identified component, I documented functionality, placement, and styling, ensuring every detail informed the design of the new, unified solution. I rigorously evaluated each component against Nielsen Norman Group (NNG) guidelines, recommending alternative components or championing new additions to Trivago's pattern library when needed. This meticulous approach resulted in a unified, user-centric solution for tabs & toggles, addressing current challenges & ensuring adaptability for future needs.
Armed with a thorough understanding of each component's requirements, I then tackled the design phase. This began with crafting a new, unified visual style for Trivago's tabs and toggles. Next, I meticulously evaluated these designs against industry best practices to ensure optimal user experience. The final stage involved creating detailed design specifications that outlined not just the visual aspects, but also comprehensive application guidelines and functional specifications for developers, ensuring a seamless translation from design to implementation.
By consolidating legacy components and introducing a unified style, Trivago enhanced its visual design language and strengthened the accessibility of its UI. Trivago's new tab design took on two adaptable forms: left-aligned & full-span. This versatility ensured seamless integration with both block & embedded elements within the UI, creating a cohesive visual language. Recognising the importance of accessibility, for Trivago's majority-mobile audience, vertical lines were strategically implemented between labels on mobile viewports. This thoughtful design decision guaranteed clear distinction on even the narrowest screens, prioritising usability on mobile devices. Adherence to WCAG 2.0 Level AA standards was paramount, and the new tabs exemplified this commitment through two-layered hover effects. These effects incorporated background & label colour changes, enhancing user understanding & providing engaging interaction feedback.
The newly designed toggle component drew inspiration from familiar analog switches. When users toggled the switch on & off, the central component physically movesd left & right, mimicking this real-world interaction & offering an immediately understandable user experience. To eliminate any potential confusion regarding the toggle's state, a dynamic status label was introduced. This label had the flexibility to be positioned on either the left or right side, ensuring optimal visibility & clarity across diverse UI applications.
"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."
