In today's digital landscape, consistency is key. This was certainly the case for Premier Inn, a leading budget hotel chain in the UK. Prior to my involvement, their digital presence lacked a unified voice. Different teams used varying styles and components, resulting in a confusing and disjointed user experience for guests. This inconsistency also posed a challenge internally, making updates and feature iterations a slow and cumbersome process.
My three-year journey at Premier Inn (from 2021 to 2024) centered around tackling this very issue. I led the creation of a design system, put together a comprehensive set of reusable components and guidelines that would ensure a cohesive brand experience across all digital touchpoints and also created page templates for replatforming the whole Premier Inn system from Bart to Opera.
The initial stage involved a deep dive into research. Understanding the inconsistencies, guest needs and pain points across the website, mobile app and the booking engine was crucial to create a unified brand language.
I started assessing the current design elements and the brand language to list all the discrepancies and the essential points that the brand is missing.
To fix the communication breakdown, I moved the entire design operation to Figma. This change alone was a game-changer, as it allowed designers, developers, and stakeholders to collaborate in real time on the same files.
I also integrated the design workflow into JIRA. This bridged the gap between teams, allowing business analysts to request incremental changes without disrupting the engineering cycle. It created a clear trail of version history and ensured that the QA and testing teams were always working from signed-off designs.
First, I diagnosed some systemic issues and built a foundation for a more unified digital presence. I focused on two primary solutions: creating a comprehensive design system and rethinking our internal culture of collaboration.
I started putting up the design system based on atomic design principles. By breaking elements down to their smallest parts, I created a scalable library that serves as the single source of truth for the entire company.
The system is organized into two main pillars:
Foundations: These are the building blocks like color palettes, buttons, and input fields.
Components: These are more complex elements categorized by their purpose, whether they are global navigation items, functional tools, or editorial content.
Before I took over the design system, there were no clear brand guidelines for foundational things, in this case, colours. We didn’t know which colours actually meant what for the brand. There were multiple inconsistencies even between online and offline in terms of colour usage. I added guidelines for foundational elements and how to use them where and when.
This two type foundational and component structure allowed us to build out template repositories that cover various user scenarios. Due to Premier Inn replatforming itself, structuring the design system to have all the templates helped the transition operate smoothly. Along the way, we also revamped the experience. We added small but effective updates such as revamping the meal selection process to be much more user-friendly. Guests can now select different meal plans for different people in a single room, and we integrated vital allergy information directly into the flow to make the experience safer and more intuitive.
I didn't just design the system; I led the transition. This involved hosting workshops to train stakeholders and team members on these new processes. By establishing this rhythm, we created an environment where everyone can focus on their specific tasks without stepping on each other's toes, ultimately leading to a more polished and consistent experience for Premier Inn guests.
Implementation and adoption were the final hurdles. Working hand-in-hand with development teams, we ensured the design system became an integral part of their workflow and an optimized consistent source to help replatforming Premier Inn in a more consistent fashion. To maintain consistency, a detailed documentation was created to educate designers and developers on its usage.
This project wasn't without its challenges. Gaining buy-in from different departments required a focus on demonstrating the system's benefits tirelessly. Balancing consistency with flexibility for different platforms was another hurdle, Premier Inn was replatforming itself from Bart to Opera, and it required careful consideration of platform-specific business needs.
