Astore Design System

Project Overview

Astore Suite is Accor’s B2B procurement platform used by hotels and suppliers across multiple countries. As the platform expanded to new modules and teams, I led the creation of a scalable Design System in Figma, structured using Atomic Design principles, to ensure consistency, speed of delivery, and product quality at scale.

Challenges

Beyond visual and interaction inconsistency, accessibility was not considered at this stage of the product, creating risks in usability and inclusiveness — especially for a platform used across regions, roles, and device environments.

🎯 Key challenges:

• UI and interaction inconsistency across modules

• Duplicate effort between squads

• Scattered documentation and design decisions

• High UX debt and rework

• No accessibility framework (contrast, states, keyboard rules not defined)

• Slower handoffs due to lack of standardization

The goal was not only to unify the interface, but to introduce design maturity, including accessibility and shared UI decision-making.

Methodology

1-Research & Audit

I began with a full UX/UI audit and cross-team interviews to understand design inconsistencies, duplicated work, and delivery friction points. The review highlighted the absence of accessibility foundations and the need for shared standards across product squads.
This groundwork allowed me to define a clear, scalable roadmap for the Design System.

2-Benchmark

I analyzed leading design systems such as Material, Carbon, and Lightning to establish strong foundations for structure, component logic, and documentation. This helped align Astore Suite with proven enterprise-level patterns while adapting them to our product needs and technical constraints.

3-Atomic Design

Adopted Brad Frost’s Atomic Design methodology to structure the system for long-term scalability.

• Atoms — colors, typography, grid, spacing, iconography

• Molecules — inputs, buttons, form fields

• Organisms — tables, filters, modals, navigation components

• Templates — reusable layouts for procurement flows

This approach established a consistent and modular foundation, accelerating cross-team delivery.

4-Accessibility

Accessibility was initially not considered in the platform, so I introduced core WCAG principles to the system, including contrast guidance, focus and interaction states, and scalable typography rules. This established a foundation for future compliance and ensured the Design System supported more inclusive and consistent experiences.

5-Validation & Testing

I validated components and interaction patterns through iterative reviews with designers, developers, and internal users. This ensured the system remained practical, easy to adopt, and aligned with development constraints, while allowing early adjustments before scaling to all product squads.

6-Visual Design & Style Guide

I defined the visual foundations — typography, color system, iconography, spacing, and UI tokens — and documented them directly in Figma. This created a single source of truth for all teams and ensured a consistent visual language across the platform.

Outcomes & Impact

The Design System accelerated delivery across squads and significantly improved product consistency. Teams adopted shared components and visual standards, reducing redesign time and alignment friction. Development cycles became smoother thanks to clearer handoff and reusable logic in Figma.

Lessons Learned

Building a Design System is as much about people and process as it is about components. Collaboration with engineering and product teams proved essential to ensure adoption and long-term value. Introducing accessibility foundations early helped shift mindset toward inclusive design, even if full compliance will grow over time.
Clear governance and contribution rules were key, once teams understood how to request, use, and evolve components, the system gained traction naturally and became a shared asset rather than a designer-only.