Compass Design System
Built to reflect brands, accelerate workflows, and boost bookings
Company
The Access Group
Role
Product Designer
Tools
Figma, Crazy Egg, Jira, Confluence, Bitbucket
Project Timeline
8 Months
Hightlight
14% improvement in Booking Convertions
The Challenge
For nearly a decade, the Allora Hotel Booking Engine—SHR Group's flagship product—operated without design involvement. This created an inconsistent, inaccessible interface that failed to match the platform's robust functionality. Despite comprehensive features that met hotelier needs, the poor user experience drove conversion drops and customer complaints. Hotels began migrating to competitors offering superior UX, even with fewer features, directly impacting revenue.
Since Allora's business model depends on booking conversions (SHR receives a percentage per transaction), improving the user journey became critical. The solution required a purpose-built design system addressing engineering team needs to eliminate implementation friction and deliver immediate business impact.
My Role
As Principal Product Designer, I led the complete design transformation through mentoring, user research, ideation, validation, and quality assurance. I established design standards, guided cross-functional collaboration, and ensured scalable solutions that aligned with both user needs and technical constraints.
The Impact
14% conversion improvement validated the strategic approach. The design system achieved seamless developer adoption, fostering collaborative workflows and accelerating delivery timelines. Customer satisfaction increased significantly, and the proven results positioned SHR Compass Design System as the company standard—retained even after The Access Group acquisition and expanded across two additional booking engines.
Timeline
8 months for initial phase delivery with a focused team of three: Product Designer (myself), Lead Developer, and Product Manager. This lean structure enabled rapid iteration and maintained clear accountability throughout the transformation process.
The Problem
Beyond excellent customer service and admin functionality, Allora's booking engine failed to deliver quality user experience. The solution lacked accessibility, appeared outdated, and performed poorly on mobile devices. This resulted in low guest engagement, poor conversion rates, declining Net Promoter Scores, and inefficient front-end development due to inadequate documentation and direction.
The Process
Design Culture and Mentorship
I established design culture within the department, clarifying responsibilities, processes, and project objectives. My engineering background proved crucial for understanding developer constraints—since developers are the primary design system users, I crafted component documentation specifically for their needs to eliminate implementation friction.
Research
Working with the Product Manager, I identified valuable data within Allora's admin area while implementing CrazyEgg across multiple booking engines to analyze user navigation patterns through heatmaps. I conducted comprehensive competitor analysis across 20 booking engines and researched UI patterns from 12 recognised applications, identifying common components and user journeys. During ideation, I validated these journeys through user interviews and conducted developer interviews to assess implementation impact against tight deadlines—critical as we risked losing a major customer.
Discovery
Analysis revealed icons and components weren't recognisable as clickable elements, hiding key functionalities and indicating significant conversion improvement potential. I identified poor semantics, accessibility issues, subpar mobile experience, time-consuming brand customisation processes, components with missing states, and unnecessary JavaScript libraries causing slow loading times.
Approach
I catalogued existing booking engine components, documented them, and aligned with engineering on naming conventions for components and styles. I assessed branding customisation requirements and planned automated backend restrictions, including contrast colour checkers for the new solution. I evaluated documentation platforms for components and workflows, and selected task management systems. After understanding the development team's workflow, I progressed through research, ideation, validation, implementation, and quality analysis phases, sharing progress weekly with the Product Manager and Development Lead.
The Solution
SHR Compass Booking Engine launched on schedule with successful engineering team collaboration. We retained at-risk customers and, with a reduced team, rebranded and updated all Allora booking engines within one year. Following SHR's acquisition by The Access Group, Compass became the accommodation division's primary design system, now being implemented across Casino Solutions and AI Concierge products.
Customers like Adere Manor experienced 14% revenue growth, substantially increasing their returns. With AI capabilities, SHR Compass Booking Engine is currently being updated for MCP models, Figma Make, and tested for context with Devin AI.