Cyber Legends Site

Categories:

Art Direction UX/UI Illustration Photography Development

Project Team

Kristiana Vellucci

Art Direction, UX/UI

Paul Willson

UX/UI, Photography

Michael Laine

Development

Magda Eden

Illustration

Juliana Vidal

Illustration

Cyber Legends is a start up dedicated to making sure all kids have the skills required to keep themselves safe online - no matter how the digital world evolves!

The website was designed with the assumption that it’d be one of the first touch points in the user journey for many potential clients. Given this, the website’s copy is concise and the imagery reflects the function of the product. Meanwhile it’s UX takes a user focused approach that allows people to find information that is relevant to them quickly, while driving them to discover the free version of the product along the way.

Understanding the user's mindset

Our first goal was to understand the mindset of users. In order to do this, we audited the existing website and interviewed key business stakeholders to better understand how investors and potential customers see and hear about the current product. We then conducted a round of user interviews to better understand what teachers are looking for before deciding to purchase resources for their classrooms.

User persona template with details on demographics, key motivators, personality traits, influences, goals, and pain points.

Four people on a video call in a grid layout.

Hand written feedback on a website mockup

Our Findings

We then synthesized our findings and reviewed the current website analytics. It became incredibly clear, that while there was a lot of value that teachers saw in Cyber Legends, the product offering was so diverse that it made it hard for teachers to understand the value of the product at first glance. This problem was further compounded by the fact that both teachers and parents have many distractions and little time - emphasizing the need for a website that would speak to their pain points instantly.

Grid of colorful sticky notes from user research synthesis activity on a light blue background

Website page for a games hub and education center for students with colorful characters and educational materials.

The homepage focuses on the outcome of a child’s learning journey

It starts by highlighting that kids earn the title of “Cyber Legend” as they work through different educational content and mini games. And in doing so, kids develop their soft skills alongside their technical skills so they can keep themselves safe no matter how the digital world evolves.

On the homepage we highlighted the brand’s ranking system and skills categories, while introducing the illustrative characters and world that live within the Cyber Legends product.

To learn more about the CL brand, read our case study.

Lower part of a website showing two rows of 2 columns of content surrounded by colourful illustrations

Website page with a character wearing different props with tooltips pointing to them, breaking down what makes a cyber legend.

Coloring book page with a character and two pencils on a yellow background

Product Photography

Shot to show the complete state of resources without giving them away for free. Photographs tie in the CL brand colours, feature the resources, scattered tools amongst them.

Calendar interface with date selection and topic tagging on a purple background

Product Animations

Meant to show how the interactive parts of the product work. Simplified illustrations focus on function without distracting from the text they’re paired with.