Accor is a global leader in hospitality. The group includes iconic brands such as Sofitel, Novotel, and Ibis. In a context of growing digitalisation in the travel industry, Accor undertook a major digital transformation to improve the customer experience across all touchpoints. This project aimed to redesign the group's online booking platform, making it more intuitive, responsive, and performant across all devices.
Reflection.
Strengthening and scaling the design system
Context
March 2020: Accor had just launched its loyalty programme "Accor Live Limitless" (ALL). This strategic initiative aimed to transform the customer experience by offering a complete digital ecosystem, going far beyond simple hotel booking. The goal was to create an integrated lifestyle platform combining reservations, personalised services, and rewards for loyal customers.
This redesign was part of Accor's ambition to become a major player in augmented hospitality, responding to market shifts and the growing expectations of travellers for seamless, personalised digital experiences. The project represented a considerable technical and creative challenge, requiring a complete overhaul of user interfaces and back-end systems to bring this new vision of connected hospitality to life.
In this context of major digital transformation, implementing a design system was crucial to ensure visual and functional consistency across all user interfaces. This system enabled rapid development and the harmonious evolution of Accor's digital ecosystem. Lilian Chapellon, Head of Design, and Jean-Christophe Besson, design system lead, had been working on this from the very beginning of the programme. They now needed reinforcement to continue developing and implementing it across all the different products.
My role
I joined the design team as a UI Designer, responsible for the design system, working alongside Jean-Christophe Besson (JC). We split the scope between us: JC continued with the website he had established, while I initiated the work on iOS and Android mobile applications.
Process.
Bridge between design teams and product teams
Organisation
Accor's organisation was built around autonomous "feature teams", each led by a lead product designer and sometimes supported by additional designers depending on the scope. A Product Owner coordinated between the strategy, design, and development teams within each feature team.
My role sat at the crossroads of these different teams. I needed to build bridges between the designers working on their respective features and the mobile development teams, while keeping the group's strategic objectives in sight. This central position led me to establish processes and tools that facilitated both the designers' creative work and the technical implementation by developers.
In practice, I ensured that the foundations and every component of the mobile design system were clearly documented, that they met the real needs of the feature teams, and that they were technically implementable within the given timelines. This cross-functional approach accelerated production while guaranteeing a consistent user experience across all of Accor's mobile applications, as well as with the website.
Technical design and cross-platform consistency
My primary role involved building components in Figma, making full use of the tool's advanced features to get as close as possible to how they would behave in code. Variants and auto-layout became my closest allies during this period.
The challenge was twofold: designing an interface consistent with Accor's branding while scrupulously following each OS's guidelines so as not to disrupt our users' habits. iOS and Android each have numerous native components, which we integrated and harmonised with our own custom components.
This is where documentation became essential, as each OS has its own best practices and its own nomenclature. JC and I spent a great deal of time brainstorming together to find the right balance and design a system that was both consistent and efficient for everyone.
Supporting product and development teams
I also supported product designers and developers on UI matters more broadly. From the start of each project, we would collectively align on which existing components to use or adapt, look through OS guidelines to see whether any native elements could be incorporated into our system, and then product designers would begin their work with a solid foundation already in place.
I would then step in as needed throughout the design process, and we would iterate to adapt the system to the new pages being designed. On the development side, once mockups had been collectively validated, I would also intervene based on the issues encountered and liaise with designers when we needed to iterate on a given element.
Foundational work
Alongside this, there was deep foundational work on the system itself: improving what we called the foundations, refining the nomenclature, defining best practices — including the introduction of design tokens. You can read my article on component naming here.
At that point, Figma had just introduced the ability to create variables. We experimented with processes using Specify, an emerging tool designed to automate the management of design tokens between Figma and code. Unfortunately, the results were not conclusive at that stage, as our overall technical stack was not yet mature enough.
Training and evangelisation
I also had the opportunity to present the design system to various teams, and to run sessions on using Figma — including training specifically designed for developers to help them get comfortable with the tool and improve design-dev collaboration.
Brief technical overview
- Figma
- Storybook
- Web : Vue.js
- iOS : Swift natif
- Android : Java natif
Retrospective.
Takeaways and lessons learned.
What I learned
This experience gave me a deep understanding of managing a design system at the scale of a large organisation with sizeable design and development teams. The larger the teams and the more diverse the products, the more critical the system becomes for ensuring overall consistency and shared processes that drive efficiency.
I was able to experience this multi-product management challenge firsthand, constantly looking for the right balance between Accor's visual identity, the native guidelines of iOS and Android, and web best practices alongside JC. Finding that sweet spot — preserving the brand while respecting the standards of each platform — is the very essence of a successful design system.
What came next
Like any living design system, Accor's continued to evolve in response to the changing needs of the group's digital ecosystem. The next step was to automate the management of the foundations, in particular through the implementation of design tokens enabling smoother synchronisation between design and development teams. This automation was intended to ease maintenance and ensure even greater consistency across all platforms.
At the same time, work on creating and enriching components continued, driven by feedback from feature teams in the field and the evolving needs of the product. This iterative, collaborative approach ensured the design system remained a tool in service of innovation and user experience excellence at Accor.
Kevin Bizien
UI Designer & Creative Developer
Want to tell me about your web project? Contact me at bonjour@kevinbizien.com and we can start talking soon!