Totem Project

Totem helps security trainers extend the learning experience from a few days of face-to-face, offline training into a continuous and ongoing, interactive learning experience. For example, trainers can curate courses on basic tools and concepts that learners take in preparation for a face-to-face, classroom training. Totem can also be used after a face-to-face training has concluded, so learners can continue to learn advanced concepts and stay in touch with trainers using secure communication methods provided via the platform.

Although it can be very effective and extremely useful, face-to-face, offline training is limited in scope. Totem aims to provide a platform where trainers can continue to exchange new knowledge about digital security and privacy with learners they have trained in the past via frequently updated curricula. This enables activists and journalists to retain and improve their knowledge about the topics that they have received previous training on.

---

Totem currently offers over 57 courses including various languages. Each course is represented by a visual image, which often has been duplicated over various courses. Due to this, various courses have duplicated imagery, offering little visual coordination across the site. Additionally, the current illustrations used are generic freely licensed illustrations which don’t represent the look and feel of Totem and could confuse viewers.

Same old turtle, new shell

But before taking on the illustration system, we updated the Totem logo, together with its turtle mascot, offering a friendly refreshed logo with a new typeface (Maven Pro) moving away from the old typeface (Ubuntu). While Ubuntu is a beautiful and versatile typeface, it’s characteristic to Canonical’s Linux distribution. We wanted for Totem to establish its own character with time.

Illustrations

Totem currently offers over 57 courses including various languages. Each course is represented by a visual image, which often has been duplicated over various courses. Due to this, various courses have duplicated imagery, offering little visual coordination across the site. Additionally, the current illustrations used are generic freely licensed illustrations which don’t represent the look and feel of Totem and could confuse viewers.

Our objective was to create a modular illustration system that is expandable, open, and easy to use by everyone. This would allow the easier creation of imagery for courses in the future once new courses are added. By using this system, we would design compositions of illustrations fitting with the current courses, as well as the Totem’s visual identity.

With Totem being a platform where independent educators can create and submit courses, they should be empowered to create their own illustrations. The illustration system should make it easier for them to create covers which is close to the Totem identity, even if they are not professional designers.

Figma Community

After deciding on the visual direction for Totem’s illustrations, we built an Open source variant-based illustration system with over 154 unique elements and 15 different types of backgrounds, offering a variety of possible combinations. This way, everyone can create new illustrations just by dragging & dropping elements and playing with their variants.

Licensed under the Creative Commons 4.0 License, we proudly shared our work on Figma Community with a tutorial included. This system will be used to provide the final illustrations we will be offering for all of Totem Project’s courses.

Additionally, the illustration system also includes a tutorial with examples where everyone can follow the steps to create their own illustrations.

Link: Totem Illustration System on Figma Community

What we learned

We were very excited to open-source the illustration system under Creative Commons Attribution on Figma Community. This allows us to have a central place where the design can be maintained and shared with others.

While talking to the Totem team, they were looking forward to build up this story arch further with the aquatic theme in Totem. The world of the turtle mascot is versatile and offers a wide range of metaphors we can explore visually. Protagonists (like the turtle) and antagonists (trolls, bugs) are included and offer a way to explain complex topics in a more simplistic visual explanation, especially tailored for beginners.