Xello Elementary Case Study

— OVERVIEW

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.

— A DESIGN REVAMP

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 version of Xello Elementary called Spark on the left, and the new product on the right.

— THE CHALLENGE

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:

• To create an engaging and unified experience that could enhance learning and exploration. This consists of strong and unique visual language to support immersive storytelling
• To design an experience that can be relevant to an 8yr old and an 11yr old. We know developing brains abilities change year by year so how do we optimize the experience for them.
• To design an adaptive interface system that could work on all devices as well as three other languages - English, French and Spanish.
• To design a system that looks and feels like other Xello products.
• To design an inclusive user experience, and to keep the quality the same for users with different abilities.
• To design a product that meets the need of educators as well as students.

— MY ROLE

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:

• Creative strategy and direction: I worked with the PO and the top executive leads and managers to form strategies for defining the primary elements of the system. Those include typography, illustration and iconography styles, structure and layout, interfaces and interactions.
• Exploration and validation: I worked closely with the leads and the PO to plan and experiment on potential features by brutal idea generation and selective validations. I worked with a content strategist and a researcher to design research session and improve prototypes.
• Collaborative execution: I worked with developers to build a strong foundation for our component-based design system, and to review and check the design quality of the end product.

Early idea formation affinity mapping

Early idea formation affinity mapping

— KICKOFF

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:

• Visual Design: typeface exploration, illustration style, iconography, character design. Then, later on interfaces.
• Interaction Design: interface behaviour patterns and functional mechanics.
• Structure and architecture: layout and content organization.

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:

• Abstract Thinking: Designing content and tools for kids need to be clear and direct with guidance and explanations. At this age, kids are learning to think abstractly and theoretically.
  
• Fun Factor: Dynamism and playfulness make them excited. They love illustrations and vibrant colours. It works as both an engagement factor and a learning component. How do we leverage these elements for better experiences.
• Customization and Making: Kids love making things of their own by decorating and personify objects. They broadcast their characteristics through customizations.
• Device Preference: We found that both at home and school kids most favourable device is a tablet.
• Learning by Experimentation: Kids learn things by trying and experimentation.
• I’m Not A Baby: Playfulness and colourful interfaces indeed make kids excited, but it could also easily make them look too childish for them. They think they’re not baby and silliness might harm their egocentricity.

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

— PROBLEM DISCOVERY

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

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:

• What students care about.
  
• How do they consume content.
• What are their preferences.
• How in-class scenarios are.

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:

Reliance on Visual Navigation

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

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

Many students couldn’t elaborate on concepts like ‘interests’ or ‘skills’. They couldn’t define what ‘goals’ and ‘achievements’ are.

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.

— OPPORTUNITIES

Areas For Improvement

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

• We should be clear and guiding: Educational videos about different topics.
  
• Tell stories to create meaning: designed comics as a means for storytelling.
• Provide tools for personalization: designed characters to satisfy the taste of every student.
• Make it more fun and visual: designed fun fact blocks in career profiles to break the monotonous reading experience.

We created videos for every lesson to educate kids about the topic before they start the lesson, and created comics with exciting characters.

— PROCESS

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:

• Preliminary Research: What we know about children's digital behaviour and content consumption. This had informed many of our early design decisions. For example, we used tablet screens to base our designs because kids statistically have more access to them than mobile devices.
  ‍
  
• Design Fundamentals: Creating a strong language for the structure, behaviour and visual design of the product. This would include the information structure, defining typefaces, illustration styles and UI patterns.
  
  We went through a series of divergent explorations by rapid prototyping. Trying various illustration styles to get the fittest for the stories we wanted to tell. We ran experiments with students to see how they react to our different illustration styles, and what’s their feeling about them.
  ‍
• Build and Test: Working with the stakeholders we mapped out features that have the most business value and prototyped them. These would go through user interviews and qualitative research. Working with students to refine and develop. The sessions included both students and educators. Very much like the hot potato process where we sat together to designed/developed.
  ‍
• Systemization: As we had another designer joining the team and at the same time the dev team had started building the site. We had to create a solid system of components that can be reused for developing new features. We worked very collaboratively with devs to make sure the system is feasible and realistic.

— OUTCOME

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.

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.

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.

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.

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.

— RESPONSIBILITIES

My Part In This Project

• I was given this project from the start as the senior designer. I worked with the management to conduct the primary research and plan for product strategy.
  
• I worked on the design language and style formation appealing to our audience (grade 3-5 students).
• I helped with finding and defining illustration and imagery styles, typeface choices considering accessibility and user research insights. I looked for artists and illustrators for recruiting them.
• I worked on user interfaces and interactions.
• We formed our ideas through massive hi-fi interface and interaction prototyping.
• I worked with the user experience research team to test validate design solutions. 
• We developed a solid front end system through componentization and scalable codebase.