Dynamic illustration system for OONI
We created a modular illustration system for OONI making it easy for both designers and non-designers to craft their own illustrations, bringing the OONIverse to life.
intro
OONI, or the Open Observatory of Network Interference, is an open source project dedicated to measuring internet censorship worldwide. Their work is vital for documenting and understanding the landscape of internet freedom, particularly in regions where access to information is controlled or restricted by governments or other entities.
We brought new energy to OONI’s outreach materials, designing an illustration system that is more polished and engaging for a global audience. The illustrations have a playful spark that helps the content connect more naturally.
One tentacle at a time. Welcome to OOniverse.
Where the internet is an ocean, censorship hides in the dark trenches, and our job is to design creatures brave enough to explore the unknown. This project started with a simple question:
How do you modernize a beloved mascot… without breaking the emotional bond an entire community has with a floating orb of curiosity?
modular character system
To manage the various elements of each character and scene, we developed a comprehensive design system that organizes all the components and variations. A key aspect of this system is the use of Figma variables to create color options for each illustration component. This approach allows the creatures to change colors with just one click, offering six different color collections, each with 4 different color modes.
ooniverse
Once the mascot was ready, we set out to build a world for them to explore. Using a similar modular approach, we developed two additional characters: the fish and the eel, each with its own set of components and variations. We also created scenes or ‘play sets’ featuring interchangeable elements like seaweed and various ‘underwater’ shapes, allowing for the creation of lively and dynamic scenes, including different color modes for different depths of the ocean.
documentation
7,3 million unique combinations
Because OONI is a global, open-source project, long-term independence was essential. We created a detailed illustration system manual through a tutorial library inside Figma. This way OONI’s team and community contributors could extend the system easily in the future without relying on us.
- ~680 face variants enabling emotional nuance and diverse expressions.
- Up to 2,704 tentacle combinations ensuring each character from protagonist to antagonist feels unique.
- 1,8 million unique combinations in four colours
what we delivered
For the final step, we brought the entire system together. The modular illustration architecture, colour variables, and updated the social media kit into a cohesive visual language. The result is a set of reusable illustrations with interchangeable heads, eyes, tentacles, emotions and poses. We gave them a diver’s licence to their very own ocean of possibilities in a documentation in Figma including tutorials and step-by-step guidance for the OONI team.
Custom Illustration System.
Simplified Mascot.
Social Media Kit.
Enhanced Accessibility.
Documentation.
Cohesive Design System.