Back arrow icon
What's new icon launch icon
/ What's new

Xello Elementary Case Study


Xello is a collection of tools to equip students for future-readiness. It provides engaging experiences that help students transform their aspirations. Fun self-discovery tools help students to know themselves and the world around them. Its rich catalogue of careers introduces youngsters to the world of work.

Xello provides learning experiences through engaging stories that are full of illustrations and immersive imagery. Xello is a friend who tells you cool stories about careers and other exciting age related topics.

In the last year or so, I was part of an exciting project from the start to create an inviting experience for learning and exploration.

Xello Elementary Screenshot
To comply with my NDA, I have omitted confidential information from this case study. All info on this page is my own experience and it doesn’t reflect views of Xello.


Xello has been competing hard to gain prominence in the educational technology area by rethinking the way it designs software. From late 2014, there has been a lot of changes in the process of creating experiences. Design had played the catalyst for the change by taking a human centric approach of looking at problems, and solving them.

Old and new versions of Xello Elementary dashboard
Old version of Xello Elementary called Spark on the left, and the new product on the right.


Recreate The Product From Scratch

Our goal was to rethink and redesign Xello (for grades 6-12) version of the program for elementary students, in addition to have other age related features. The goal had to be achieved within one year extend, but design started earlier exploration before the development starts.

Our goals were:


I started as the only senior designer to roll out the project and lead the creative directions. Later another designer joined the project. There are three main phases to my contribution:

Early idea formation affinity mapping
Early idea formation affinity mapping
Structure Model
Early idea formation affinity mapping
🚀  The product was launched on  🚀
Sept 13th, 2019


Defining The Character and The Design Language

The project started very openly with a wide exploration of basic building blocks to form the user experience elements. The mission was building the design genome for the organism to develop on top of it. The only grand creative strategy was that the new product must be perceived as part of Xello family reflecting its core principles.

These are the essential perceptual and functional design elements to be defined:

Early moodboard
Early moodboard
Back arrow icon
Back arrow icon
Photos of our early moodboard on what's out there in the market for this audience.

Basic and General Understanding of Users

First step before getting heads into the design, we need to gather what do we know about kids. We gathered objects, investigated existing studies, and talked to kids. Here is what we should remember while designing for kids:

Early character developments
Early character development: this was a close collaboration with different artists to shape and form the characters who were later called Xellions.
Final screenshots of Video Game Developer profile
Final screenshots of Video Game Developer profile


Working Backwards from The Core Feature

The core feature of Xello is its rich career profiles that give students a very detailed view of every career. Creative exploration started from this page which will define the structure and visual characteristics of the entire product. So the question becomes how do we optimize career pages for younger students.

Early exploration of career profiles
Early exploration of career profiles

Working with our content writer and the PO we came up with a content strategy for career profiles. Then based on the main agreed structure, I explored various solutions.

When we have the greater model of the product, we need higher fidelity prototypes that we can put in front of the students.

To put our assumptions to test, we wanted to know:

Qualitative and generative research photos
Qualitative and generative research photos
Qualitative and generative research photos
Back arrow icon
Back arrow icon
Photos of our early generative and participatory research. Kids drew their thoughts on career profile print outs. They also use drawing to express what they want to see in a career profile.

Deeper Insights from Qualitative Research

We continued deepening our understanding by talking to kids and educators on designs and use cases. Things we learned during the sessions:

Visual Signposts

Reliance on Visual Navigation

Visual signposts were used to spot essential information without the need for heavy reading.
Abstraction Difficulties

Abstraction Difficulties

Many students didn’t comprehend some abstract concepts. For example, they didn’t have a clear understanding of the value of money. They had little idea of what income is, and how high is a good income.
Constructing Meaning Thumb Image

Constructing Meaning

Many students couldn’t elaborate on concepts like ‘interests’ or ‘skills’. They couldn’t define what ‘goals’ and ‘achievements’ are.
An image of a map of Chef's career path

Maps Aren’t Intuitive

Students were having a hard time understanding the path it takes to get to a career. Maps were confusing and prone to misinterpretation.

Typing and Reading

Younger kids aren’t fluent readers, and their vocabulary isn’t vast. Using complicated words might cause confusion and frustration. Fonts must be large and sentences must be shortened. Also, they aren’t great typists. They pause, look at the keyboard to type, and make a lot of typos.

Love Games and Stories

Most of the students we interviewed were dedicated gamers. Stories fulfill their curiosity and engage students to learn more.


Areas For Improvement

So we identified areas that can be improved and things we should remember:

Image of video animation with comic stories and fun avatars and playful backgrounds for customization.
We created videos for every lesson to educate kids about the topic before they start the lesson, and created comics with exciting characters.


How Did The Workflow Go

Design started several sprints ahead of the development team. So we had some time to explore and be creative.

This is a summarized version of the design process and product evolution:


Qualities of the Released Product

Throughout the process, we made sure the experience of the product is suited for our audience fulfilling the needs of both educators and students.

Xello Characters in a comic format.

Story Driven

We designed interactive lessons on different topics that kids could learn life and career skills. These lessons are based on the characters ‘Xellions’ and stories around them. They’re funny and educational. We worked with an illustrator to design our characters based on the personalities we’ve defined. We had to make sure students relate to characters, and like them.
Fun avatars and customized backgrounds.

Customizable, but Relevant

Students will have the tools to make the product an extension of themselves. They can customize their profile by selecting from a set of well-designed avatars and change the theme based on their preferences.
Image of read aloud feature for students with reading difficulties.

Guiding and Assistive

We created animation clips for the main topics to educate students. Videos were a huge success. Students love them.

We designed an intuitive text to speech tool that students in lower grades with lower reading fluency could use for consuming textual content.
Fun micro interaction for the like button that bursts out of stars when clicked.

Playful and Fun

We used fun interactions combining with characters and illustrations to provide a fun and playful environment, in which students can feel entertained and engaged.


My Part In This Project

Profile page and Career Explore page
Left to right: Student Profile page, Career Exploration page
Career Profiles
Left to right: Student Profile page, Career Exploration page
Thanks to Marcio Bomfim, Kim Turnbull and Jina Hwang for great directions, strategy and co-designing.