Educator Tools

Xello Educator Tools

Xello also developed an application for educators. The app is a desktop, responsive, that helps educators to track students progress within Xello, generate reports, create assignments, send messages, and more. 

My Role

Sr. Product Designer.


What I learned

Talking with developers on daily basis was the key to get this amazing tool on the wild. UXR was also important, and talking with educators gave us an idea of what they wanted, and most of all, what they didn't know they wanted.

Explorations, prototypes, tests, more explorations, and so on and on. That's the process we used for the Educator Tools application.

We needed to create the responsive versions (1366, 1024 & 768), account every text for translations, and accessibility.


Thinking about the IA

The most important aspect of the app is the information architecture of it. Navigation structure, submenus, user menu, search...

Recently we decided to change the old IA for a new one to fit two new features that were asked by the clients very often: Reports and Messages. The V1.0 of the Educator Tools didn't capture that, yet.

We moved from the vertical navigation on the left side to a horizontal top navigation bar. We had to group and re-think the entire IA. The objective was to keep the consistency with the Student 6-12 app that has 3 pillars: About Me, Explore Options & Goals and Plans.

Screen Shot 2019-02-14 at 10.34.31 AM
Screen Shot 2019-02-14 at 10.24.40 AM


When the client team asked what features Xello Educator Tool should have, Messages was almost unanimous. The previous version was barely working and we dare to call the feature as messages.

After 3 months of design explorations, thinking, testing, prototyping, and iterating with developers, data science team, customer service and client team, we ended up having an entirely new message centre with a roadmap to implement more and more features in the near future.

Screen Shot 2019-02-14 at 11.50.17 AM
Screen Shot 2019-02-14 at 11.52.18 AM


Another feature that clients always request is the possibility to generate reports. We already have that too, but with a small number of options. When we called a couple of clients to interview them and ask questions about reports, the amount of request was insane.

Some told us that they needed around 80 options of reports. Then we start to connect with the data science teams and the average usage of reports was from 5 to 8 options.

Then we start to study the top 5 reports, which had the most access, how many clients were actually generating those reports and etc.

Lots of research work were done on:

  • How to represent graphically the data?
  • How we would categorize the reports?
  • Having or not custom reports where the user could generate more accurate data from the students?
  • How the search would work?
Screen Shot 2019-02-14 at 1.37.40 PM
Screen Shot 2019-02-14 at 1.40.32 PM
Screen Shot 2019-02-14 at 1.46.43 PM

Design System and Library

As each product of Xello has its own library, the Educator Tools couldn't be different. This keeps our consistency value up to date, and the visuals flawless.

I helped to co-create the Educator Tools library because at the time I was fully committed to the mobile app.

Screen Shot 2019-02-14 at 2.07.45 PM
Screen Shot 2019-02-14 at 2.12.26 PM
Screen Shot 2019-02-14 at 2.15.35 PM
Screen Shot 2019-02-14 at 2.13.39 PM

Daniel de Paola

Toronto, Canada

Where to find me?

Linkedin, Twitter, Dribbble, Behance, or Email

©️2018 - All Rights Reserved

Made with Semplice