We wanted to convert our Firebase Realtime Events into a useful dashboard, to help teachers using Jelly.
Alex BB.
Founder, Visual Binary
Context
Jelly Tutor is a mobile app containing AI tutoring games, designed to help kids aged 5-11 with their Maths, English, Reasoning & more.
Whilst working on Jelly, we partnered with schools to offer enhanced features to teachers: giving teachers the ability to track activities completed by their students inside the mobile app.
When we started working with the schools, we just relied on Firebase's interface to track user activity. This is the story of how we transformed the cumbersome JSON event structure into beautiful and intuitive dashboards for teachers.
If you want to learn more about the story, and key takeaways, from working on Jelly Tutor, you can check out this other article.
The process
We started with a first principles approach, putting ourselves in the perspective of the teachers.
We purposely chose not to start from a template or framework, as we wanted to ensure that we created the most intuitive-to-use interface for its specific purpose.
We identified the key 'jobs to be done' for the teachers:
View a key summary of their class' performance on assigned homework
Quickly identify any weak performers, to figure out who needs more support
Focus in on the questions and topics that individual students found the most challenging
None of these jobs could easily be done in our current Firebase backend interface.
We needed to design the web dashboard from the ground up, focusing first on the user's needs, and figuring out technical implementation details second.
Example of the Firebase JSON structure
The result
After a week or two of designing and iterating, we had a dashboard that we felt was easy to get started with, intuitive to explore, that also provided seamless ways to both dive deep into individual student's performance and get a class-based overview.
The dashboard was made available to teachers at schools across the UK, helping to incorporate the Jelly app as a legitimate way to enhance studies inside and outside the classroom.
Example of the Jelly Teacher web portal
Fin.