Dynamic illustration system for OONI

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.

OONI’s existing mascot and visual materials carried emotional value within the community, but lacked the structure needed for large-scale use. Instead of just designing a mascot, we built a full illustration architecture that allowed OONI to build, adapt, and expand their illustrations independently.

Streamlined Aesthetic

We removed the suction cup details from the tentacles and adjusted their spread, ensuring a consistent appearance in every use.

Modular components

The mascot includes a separate head and four movable tentacles that can be adjusted or rearranged independently.

Versatility

This modular design allows for a wide range of combinations and poses, making the mascot adaptable to many different scenarios.

Beyond structure, we focused on giving the mascot emotional depth. Adding an array of emotions brought the characters to life, infusing them with personality and expression. We designed a range of expressions, including neutral, bored, excited, shy, and angry, to cover the main emotions the character would need. This variety ensures that the mascot is vivid, lifelike, and approachable, making it easier to connect with and engage the audience.

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.

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.

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

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.