PagesJaunes Design System: a new methodology

TL;DR

Joined PagesJaunes to discover fragmented design processes causing inconsistencies across platforms.

Transformed isolated Photoshop workflows into a collaborative design system with shared libraries, modern tooling, and integrated handoff processes—establishing 360° design consistency across web and mobile without requiring daily oversight.

The challenge: design chaos across platforms

Walking into PagesJaunes, I found a team working in silos. Designers created mockups in Photoshop and shared them via email. Feedback arrived sporadically through reply-all threads. Developers received incomplete specifications and rebuilt every button, title, and component from scratch—each time.

Mobile developers had no component libraries. Android and iOS teams hardcoded every design element at each occurrence. The result? Visual inconsistencies across platforms, no shared vocabulary, and zero scalability.

My approach

1. Diagnosis: understanding the workflow gaps

• Tool assessment: Identified bottlenecks in Photoshop-centric workflows and email-based handoffs
• Code review: Discovered mobile dev teams rebuilding components from scratch at every instance
• Pain point documentation: Each delivery called for hours/days long work to document each element of the design

2. Foundation: building collaborative infrastructure

• Design System creation: Established living system collaboratively maintained by entire UI team
• Tool migration strategy: Led phased transition from Photoshop to Figma for true real-time collaboration
• Comprehensive training program: Delivered in-person and online workshops to ensure full team adoption of new platforms
• Shared libraries: Implemented Figma component libraries enabling designers to contribute and consume reusable assets
• Handoff platforms: Introduced InVision for stakeholder collaboration and Zeplin for precise developer specifications

3. Adoption: evangelizing new ways of working

• Multi-format training: Conducted both in-person workshops and online sessions to accommodate team schedules and learning styles
• Developer advocacy: Collaborated with Android and iOS teams to implement design tokens in codebases
• Off-roadmap alignment: Secured commitment for technical implementation outside official product roadmap
• Documentation: Created guidelines ensuring consistent adoption and maintenance practices
• Change management: Supported team through multiple tool transitions with hands-on mentorship

Outcomes

• Platform consistency: Achieved unified visual language across web, Android, and iOS
• Autonomous quality: Design integrity maintained without daily supervision
• Development efficiency: Mobile teams reused coded components instead of rebuilding from scratch
• Collaboration velocity: Stakeholder feedback cycles shortened through interactive prototypes
• Designer productivity: Shared libraries eliminated redundant work and accelerated iteration
• Seamless tool adoption: Complete team successfully transitioned from Photoshop to Figma

Key learnings

• Systems enable autonomy: Well-structured design systems reduce dependency on individual oversight
• Developer buy-in is critical: Technical implementation determines whether design systems live or die
• Tools are force multipliers: Right platforms transform collaboration from obstacle to accelerator
• Change requires evangelization: New processes succeed through training and advocacy, not mandate alone
• Multi-format training works: Combining in-person and online sessions accommodates diverse learning needs and ensures adoption

Beyond delivery: This wasn’t just about prettier interfaces—it was about building infrastructure that let designers design and developers develop, with confidence that the end result would be consistent, scalable, and maintainable long after my direct involvement ended.