Project Metachrosis: How We Turned a UI Kit into a Global Movement
Strengthening bonds across frog with a community-driven, scalable design system
By Anthony Nguyen, Design Director, frog
Back in 1974, a few years after founding frog Design, the industrial designer Hartmut Esslinger selected a Brazilian Treefrog named Friedolin to be the design firm’s official amphibian mascot. Friedolin was about 4 cm long and was quite the chameleon, with a tendency to change color depending on his surroundings. Friedolin has long been a source of inspiration for us at frog. Now, over fifty years later, he has inspired a new internal design system called Project Metachrosis.
Metachrosis is an ability held by some animals to change color or appearance depending on surroundings. Core to our design ethos at frog is a commitment to flexibility, adaptability and changing for survival—not so different from some of the qualities held by our long-standing mascot, Friedolin. Read on to learn how we created our own mutable, scalable design system that enabled us to better support our designers around the world.
In support of design systems
Design systems often get a bad rap in product organizations, but even more so from highly creative organizations. When creatives–whose purpose and nature of daily work is to innovate, and even to defy the established order — are given the suggestion to follow a design system, it can be met with resistance.
“They’re restrictive.”
“They are like digital/brand police and limit my creativity.”
For an organization like frog, where we employ the minds that have brought to life experiences such as Steve Job’s Snow White industrial design language, Illumina’s cutting-edge biotechnology devices and digital products and Rakuten’s dominance in the consumer cash savings space, adherence to a system can be treated with a healthy dose of skepticism.
Despite the resistance to design systems, their value is undeniable. One of our favorite references to the inefficiencies of building repeatable things comes from Nathan Curtis, who shows us how costly building something as simple as a button can be:
“Let’s imagine you combine a designer, engineer and QA specialist to design, build, and test buttons. If these staff cost $100/hr, and it takes this team of three 200 hours combined to design, build and test buttons at this level of quality, then buttons cost $20,000. If your enterprise has 50 teams each making buttons, then it costs your enterprise $1,000,000 to have good buttons.”
Inspiration strikes
Then came an idea. One of our senior design system specialists, Max Breaux, had toyed around with creating a white-labeled Figma component library with all the latest and greatest features (auto-layout, variant properties and built-in interactive animations), that could be used by other teams to quickly create a customized UI. It would be intended either for speedy prototyping or high-fidelity wireframes, bridging the gap between early sketches and final production-ready visual language. This way, when frog designers were pressed on time and were presented with an option of whether they wanted to build a button from scratch or impress the client with additional flows they were not expecting, many would opt for the latter.
Unlocking possibility
It was a gut hypothesis, which was taken and validated with a small group of internal Figma enthusiasts, which was then shared up the chain to their directors. Eventually hype started growing around this ‘UI toolkit’ that unlocked new possibilities; like building conceptual prototypes from workshop sketches overnight using a global distributed team. Word started spreading (as good, problem-solving work tends to do).
A month after release, frog’s Global COO Andreas Markdalen caught wind of our efforts. He held a global design meeting, giving us the stage to pull this all together and share with VPs, directors and studio heads. We learned that other efforts were happening all over the globe from different studios. New York was working on a library for brand and marketing assets. Malmö in Sweden had just started pulling together a presentation library to make it easier for designers to put together decks and gather feedback all from one tool. Magic, it seems, was in everyone’s intention, as was their willingness to share, to say “yes — and together we can make this even better!”
The before and after
At this point, there was no operating model. No governance. No versioning. It wasn’t a project with dollars allotted. It was just a natural evolution of the work and things we were doing already. Before Metachrosis, the nature of the studio model meant every studio had their own internal tools and design system, with little re-use of assets after a program has ended, let alone releasing it to the rest of global frog. It just took a few individuals to strike the match, then a couple more to start pulling together a quorum. Plus, the all-important foundation of working within an organizational structure that celebrates creators and rule-breakers, rather than punishing them.
After Metachrosis, within its first year, we’ve tracked over 15 programs who have used the UI toolkit for concepts and prototypes, and over 1000 insertions of the Presentation library with many studios switching over from Keynote to exclusively working in Figma.
To date, we’ve had two major releases with a third planned for summer 2023. We’ve gone from three libraries to five, adding in a concept Illustration toolkit packed full of environments, objects and people (accounting for skin tones and disabilities) and a modular Service Design blueprint, as well as ongoing improvements to our original UI kit.
We’ve also started diving into best practices when using design tokens, building out a custom plug-in that allows complete automation from design to code by leveraging Figma’s robust APIs — so that a color becomes the ‘hard truth,’ then spits out reusable code in web, mobile and any other platform you can think of.
Cross-generational knowledge
Collectively, this work spans ‘generations’ of frogs, oftentimes combining the knowledge of new team members who have worked in product organizations who truly understand the difficulty of establishing, building, writing and continuing to maintain these complex systems over time.
In many ways, a design system program is more than simply auditing some patterns and standing up a design library — it is organization design: it requires stakeholder buy-in, an understanding of the mechanisms and KPIs that drive progress in a company, then turning those levers into a movement by treating it almost like an internal marketing campaign, so that when people do get their hands on it that there’s already a queue forming behind them.
Anthony Nguyen, Design Director, frog
Anthony leads the product and design system teams at frog and has experience working on startup ventures to consumer apps to complex industries (such as finance, infrastructure, auto and healthcare). His close collaboration with clients and teammates sets him apart as leader, providing both expertise on strategy and hands-on execution. During his free time, he tinkers with home automation and interior spaces, mentors students interested in design and runs his own online rare plant shop.
Team Project Metachrosis:
- Anthony Nguyen, Design Director (frogSF)
- Lorien Talmadge, Associate Director of Program Management (frogATX)
- Lili Zuniga, Associate Design Director (frogMC)
- Maxwell Breaux, Senior Visual Designer, Design Systems Specialist (frogATX)
- Michael Devin, Director, Solutions Architecture (frogSF)
- Kaz Saegusa, Director, Design Technology (frogSF)
- Breyna Braden, frog Alum
- Johan Olsson, frog Alum
- With thanks to Andreas Markdalen, frog Global COO
