Hotels.com, 2019 - 2021New ways of working.
Context / Hotels.com, a prominent online lodging booking service, was exploring a proof of concept for a Progressive Web App (PWA) as a faster alternative to the mobile web experience. Though promising, it needed refinement to compete with the existing web product, lacking a true mobile-first approach and visual polish.
Objective & Approach Develop the PWA into a new web product, improving efficiency, speed and visual alignment with the brand direction.
My role / Lead Product Designer, joined PWA team, working alongside another designer and a handful of web developers.
Building experiences with Systems thinking.
As we iterated on the PWA, recurring design patterns emerged. We saw the need to standardise foundational design elements for consistency and reusability. A smaller team of us developed the Unified Hotels Design System (UHDS) as the foundation for the PWA, allowing faster iteration and growth.
Images / Reusable design tokens for components, Standardised motion curves for transitions and animations
Raising the bar for speed and quality.
Though not yet customer-ready, UHDS introduced consistency across flows, enhancing states and intuitiveness such as adapting Map UI based on user interactions. Regular sessions with leadership and stakeholders highlighted UHDS’s value and potential beyond the PWA, sighting is reusability, production efficiency and centralised design decisions.
Images / Before screens of initial PWA POC, Demo of PWA transitions to maximise screen space for user tasks
Onboarding and training teams.
Initially, teams were sceptical about the new product and Design System. We eased their concerns by facilitating knowledge-sharing and onboarding sessions, helping teams adopt UHDS and integrate their product features into the PWA. We also streamlined our design workflow by migrating all tools to Figma.
Images / Snapshot of documentation and best practices provided to help teams transition onto UHDS and build for the PWA
Outcome & ImpactCreated UHDS to set new standards, drove a fresh product experience, and redefined workflows and culture.
Deliverables / Web, App & Email UX/UI, Prototypes, Branding, Visual language, Icons & Illustrations, Motion design, Design tokens, Components, Patterns & Templates, Documentation & Specs, Governance model, Training resources, Onboarding, Support
5
🌟 Products transformed using UHDS and implementing the PWA, including the entire web experience, email comms, and shopping flow in apps.
Images / Designs across platforms using Design language, App download motion, Review component sizes, Homepage wed design, Brand colours for UI and font weights, UHDS logo graphics
“Heeran and Joe with a supporting cast of many, many people across UX, dev and product embraced, challenged and evolved those early ramblings and delivered the robust design system that we have today and that we will all be working with and evolving going forward. I don't say this lightly, this is a fantastic piece of work that they have sweat blood, tears and a significant amount of alcohol over. Great job Heeran. Great job Joe.”
Craig Melbourne
Role at Hotels.com / Principal, Product Experience Strategy & Design
Framing a coherent visual language vision.
The benchmark set by our products accumulated interest from other business areas like Brand and Marketing. We recognised the potential value for greater brand expression and personality in our creations. We presented leadership with a proposal for a brand visual language, outlining a vision and strategy for complete alignment across customer touchpoints. We believed a cohesive brand would enhance trust throughout the entire customer journey.
Images / Core UI and components with greater brand expression, Brand photography that represents our personality and behaviours, Conceptual product designs using Design language
