Xello Educator Tools

Helping the educators to track their students progress


My role

Sr. Product Designer, re-thinking the information architecture and building reports and messages features

What I learned

  • Communicating more often with the developers
  • UXR with educators to understand requests
  • Having translations, French in this case, in mind for text areas and tables

The Challenges

The Educator Tools is the application where educators, school managers, and district admins can track student's progress when using Xello. In this case, they can generate reports, send messages, create assignments, create lessons, and more.

The first work we had to deal with was information architecture. After a couple of years building this application, so many features were buried in menus and submenus, new features were not fitting  in the old structure which consisted of a sidebar menu that let the interface less fluid.


Educator Tools old structure

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.

We took the features related to students and educators and grouped them in one menu, another menu with all features of the software and the third menu only for reports, which is a huge piece of the Educator Tools.


The new structure, more aligned with the student side


Educator's sidebar menu, just like the Student's sidebar menu

To get to this final version, we needed to design lots of other versions and prototype them to check with the developers what would be the best way to change it.

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, requests for Messages was almost unanimous. And that had put us on a spot that we had to think in either build a new Gmail within Xello or a web-based WhatsApp or a whole new message centre. And we'd chosen the last option.


Pen & Paper sketches


Excercise on how would work on mobile

Rounds and rounds of meetings, great interactions with developers, and co-design sessions with my team... after all that, I could deliver a component-driven interface where the development would be independent fo the old or new structure. That way we could build and deliver to stakeholders and educators a more reliable experience in a short amount of time.

Screen Shot 2019-02-14 at 11.52.18 AM

User journey of sending a message, replying, and stacking the message

Screen Shot 2019-02-14 at 11.50.17 AM

User journey of sending a message to a student with an attachment


Modal screen with the message details


Modal screen with all students added to the message


Another feature that clients always request is the possibility to generate reports. While we already have that, there were very few options. When we called a couple of clients to interview them and ask questions about reports, the number of feature requests 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. We started to study the top 5 most-access reports to see how many clients were actually generating them and etc.


Reports dashboard

Lots of research work was done on:

  • How to represent graphically the data?
  • How we would categorize the reports?
  • To have or not to have custom reports where the user could generate more accurate data from the students?
  • How the search would work?

Search and filter working together


Logins by Day report


Suggested Careers report

The explorations also took place here as part of the design process. This is something I learned a lot at Xello, working with my managers and team mates.

Screen Shot 2019-02-14 at 1.46.43 PM
Screen Shot 2019-02-14 at 1.37.40 PM
Screen Shot 2019-02-14 at 1.40.32 PM

Sketch artboards of reports


I could deliver great features working closely with developers, POs, clients, Data Science team, and on-boarding team. That was the right way we found to make sure all requests and expectation would be achieved, plus, we could explain to educators what they really needed instead of what the would have wanted.

Daniel de Paola

Toronto, Canada

Where to find me?

Linkedin, Twitter, Dribbble, Behance, or Email

©️2018 - All Rights Reserved

Made with Semplice

©️2018 - All Rights Reserved

Made with Semplice