Establishing and Evolving a Design System at Modere
At Modere, I led efforts to create and evolve a unified design system to improve brand consistency across multiple digital platforms.
This work spanned web and mobile applications, involved cross-functional collaboration, and had to adapt to evolving tools, frameworks, and company priorities, including a major rebrand and e-commerce replatforming initiative.
October 2021 - February 2025
Major Stakeholders
Modere Internal Teams
Tools Used
Adobe XD, Figma, Frontify
UI Toolkit Frameworks
BigCommerce, SwiftUI
My Role
Project spearhead, cross functional coordination, library builder, documentation
This project was a company wide collaboration. Credit for the following work is shared among all contributors involved.
Problem
When I joined Modere, there was a noticeable lack of visual and UX consistency across the company’s digital products.
Teams were using different design tools and styles, making collaboration inefficient and brand execution inconsistent.
A unified design system was needed, but internal roadmaps were already tight and stakeholder feedback cycles were slow.
Initial System Creation
Collaboration: Partnered with marketing and front-end teams to identify shared visual language and components.
Tooling: Built the first version of the design system using Adobe XD, documented in Frontify, and aligned with base frontend code.
Challenges:
A potential rebrand loomed, threatening to make early work redundant.
Choosing a documentation method that was accessible and useful for designers, marketing, and developers.
Roadmap and bandwidth constraints made iteration and feedback cycles slow, often requiring redesigns.
Despite these hurdles, we delivered a usable system that improved visual consistency and collaboration.
Click here to see the pre-rebrand evolution of the design system:
Design System Documentation
Replatform & Rebrand Transition
When Modere decided to replatform its e-commerce experience to BigCommerce, a full rebrand was also greenlit.
This introduced new challenges and opportunities:
Platform Constraint: We needed to align with BigCommerce’s UI toolkit to streamline development.
Third-Party Collaboration: Three external partners were brought in for the replatform, all working in Figma.
Tooling Shift: To ensure smooth collaboration, I migrated the entire design system from Adobe XD to Figma and rebuilt the component library there.
This shift enhanced our workflow across internal and external teams and allowed us to design and iterate more efficiently within the new technical ecosystem.
Click here to view the design systems for both XD and Figma.
Before
After
Additional Frameworks: SwiftUI for Mobile
In parallel with web efforts, I supported a mobile project using SwiftUI for a Back Office Mobile App prototype.
This required that I:
Consider existing design system elements.
Extend and adapt them to fit mobile UX patterns and SwiftUI constraints.
Ensure design choices were consistent with brand direction and functional within SwiftUI’s component architecture.
Click here to watch a demo of the SwiftUI prototype we made for User Testing:
Watch Demo
Outcomes & Lessons Learned
Created and maintained a scalable design system that adapted to shifting tools, teams, and brand direction.
Enabled faster development through better handoff processes and consistent UI components.
Learned the importance of designing with potential pivots in mind and the value of early stakeholder alignment.
Gained experience in rebuilding and maintaining design systems across multiple tools (Adobe XD, Figma) and frameworks (BigCommerce, SwiftUI).
Special shout out to my amazing team who worked so hard to make this project a success!