3 fonts, ~30 different colors, 2 OS : how to make it easily scalable and reusable by techs and designers ?
Context
Following the 2023 web relaunch of Le Point (a leading French news outlet), the mobile app required a complete overhaul to align with the new brand identity while maintaining platform-specific logic.
The goal: Redesign the app experience from scratch while simultaneously building a scalable Design System to ensure long-term consistency and technical velocity.
The challenge: An existing UI Kit was fragmented across Adobe XD, making collaboration with external partners and developers difficult.
My approach
I advocated for the migration from Adobe XD to Figma by demonstrating to the Lead Designer how Figma’s component architecture would provide the sustainability needed for a high-traffic media app. Moreover, the live collaboration and stability of Figma was way more efficient than the other tool: In short, a considerable time saver.
Analysis of the existing UI Kit: I’ve made a quick synthesis of what we already had in our documentation (fonts, colors, weights, shadow etc.) and what we actually use within the product but isn’t in the UI Kit yet. We had 3 fonts, around 30 colors, at least 4 different contexts of use (article preview, article page, ads, polls...) and 2 OS to work on.
Adaptive design logic: Rather than a "copy-paste" of the website, I iterated on mobile-first patterns. I conducted benchmarks and analyzed mobile data to ensure the app felt native and intuitive while echoing the new web aesthetic.
Building the foundation (v1.0): From there, with all the info gathered (existing UI Kit, benchmarks, datas), I architected the app’s first Design System. This involved creating a centralized library of components and tokens, structured specifically to bridge the gap between design intent and developer implementation.
Cross-functional alignment: I initiated a series of "Sync & Show" sessions. I first aligned with a core group (Lead Designer, PO, Lead Dev) before scaling the presentation to the wider tech and product teams to secure buy-in for the new system.
Outcomes
Operational efficiency: Established a "Single Source of Truth," drastically reducing design inconsistencies and "missing cases" during handovers.
Scalability: Built a 0-to-1 Design System that allows for rapid feature prototyping and a more sustainable codebase.
Stakeholder synergy: Improved communication between Design and Engineering by involving developers early in the component-building process, leading to faster development cycles.
