Neon Design System (v1)
An in-house design system built to unify UIs of all web applications across client-facing and internal tools at Marex, providing a comprehensive library of design assets, style guides, UI patterns, documentation, and reusable React components.
MY ROLE
Project lead, established design framework and processes. Support to development, testing, and deployment.
THE TEAM
Cross-functional team with 4 designers, more than 20 developers contributing and 3 QA for testing.
TIMELINE
Q3 2019 – Q2 2023
CHALLENGE
Marex's technology ecosystem had grown organically across multiple products, resulting in inconsistent user experiences, duplicated development efforts, and slow time-to-market for new features. Each application had its own unique styling, interaction patterns, and component implementations, making Marex digital products feel disjointed and increasing maintenance costs. We needed a scalable solution to unify the visual language, streamline development, and create a cohesive experience for both client-facing and internal applications.
SOLUTION
I led the development of the Neon Design System following the Atomic Design Methodology to create a modular component architecture. We strategically chose MUI React library as our foundation to accelerate development and focus on customisation rather than building from scratch, essential for our proof-of-concept phase and resource constraints.
The implementation involved:
Creating a collaborative governance model involving 5 development teams and business stakeholders
Establishing a contribution framework that allowed any team member to propose, critique and improve components, as opposed to just consuming them in their projects
Developing comprehensive documentation and testing via Storybook
Facilitating workshop sessions to promote adoption and collect feedback
The system needed a modular component architecture, so we followed the Atomic Design Methodology by Brad Frost.
OUTCOME
The Neon Design System delivered significant measurable benefits:
60% reduction in UI development time for new features across the platform
40% decrease in design inconsistencies identified through user testing
Improved brand perception with higher user satisfaction scores for redesigned applications
Faster onboarding for new designers and developers, reducing time-to-productivity from weeks to days
Streamlined design reviews with shared language and standards across product teams
Successfully unified 15+ applications under a consistent design language
The system has served as the foundation for all new Neon product development, establishing a scalable approach that can grow alongside the business.
TECHNOLOGIES/METHODS USED
Design System Architecture: Atomic Design methodology
Design: Figma, FigJam
Development: React, TypeScript, MUI (as foundation)
Documentation: Figma, Storybook
Version control: Git, BitBucket
Project Management: Jira, Confluence
Research: User interviews, AppCues, retrospective meetings
Process: Agile methodology, Kanban, cross-functional collaboration, workshop facilitation
