Marcel

Marcel is an internal tool for Publicis Groupe, one of the largest advertising and marketing agencies in the world. The tool is intended to help connect the 100,000+ employees all around the world to enable communication, collaboration, and productivity in ways previously not possible.During my time at Marcel, part of my time was focused on building design systems directly with both web and native engineering teams to streamline product delivery, engineering efficiency, and brand adoption.

Foundations

Critical to the success of the system was the alignment of all our teams on the foundational elements for each technology. Marcel's design system is structured to be scaled for each iteration of the app, meaning that our foundational system needed to account for every potential UI element. Our foundations supported our brand logos, grid systems, spacing scale, typography scales, and color systems.

Component Library & Tokenization

Each iteration of the app incorporates an atomic style component library, which comprises reusable interface elements. Within our design system, utilized a tokenization system that could be used in both swift and tailwind. Clearly outlining the distinctions between these component classes was pivotal in ensuring that design choices align efficiently and precisely with the specific context of each page.

Motion

Incorporating motion within our design system was a strategic choice aimed at elevating user experience to new heights. rom subtle hovers that provide feedback to captivating animations guiding users through complex processes, our motion design principles were meticulously documented within the design system. This systematic approach not only ensured consistent and purposeful motion across all interfaces but also empowered our teams to innovate while adhering to a cohesive user experience.