ClassDojo

Adding an updated messaging feature

The Problem

ClassDojo is an educational tool that connects school teachers, students, and their families. It functions both as a communication tool and an insight into classroom behavior.

Currently, only teachers and parents may directly communicate via the app. Students must use another platform if they wish to communicate directly with their teachers. This is a source of frustration for teachers, parents, and students, who are struggling to keep up with all the new technology, and would rather use a platform they're already familiar with.

The Solution

Adapt the messaging feature within ClassDojo to allow students and teachers to message each other within the app, as well as allow for 'third party' safety viewing of student-teacher messages from parent, co-teacher, or admin accounts.

This was completed as an unsolicited project.

My Role

Product Designer

Tools

Pen and Paper, Google Forms, Figma, Whimsical, Maze

Process Overview

Research

Information Architecture

Interaction 
Design

UI Design

Interpretation

Market Analysis
Interviews
Persona

Site Map

Task Flows

UI Kit
Hi-Fi Prototypes

Usability Testing
Iteration
Project Takeaways

Research

Market Research

In order to better understand the current student-teacher messaging platforms, I conducted market research on ClassDojo's most direct competitors in the edTech world. The following was determined:

Most of the edTech tools have some sort of messaging for parents and teachers; not all have messaging for the students

Language translation features are important; the apps most dedicated to communication offer more language support than the ones that are more for student work

App use seems to vary by age group; ClassDojo is popular with K-5, while Bloomz, Remind, and ClassTag have older target audiences. This is reflected in the child-friendly UI and simple interface.

Ability to monitor student-teacher conversations varies across platforms, with most requiring parent to log into the student account to see message history. However, this is a highly requested feature according to user interviews.

User Interviews

I interviewed three groups of participants to better understand the digital communication methods used between students, teachers, and parents, as well as the motivations, pain points, and needs specific to use of ClassDojo.

Students are motivated by avatar personalization and ease of use to use ClassDojo. They are frustrated by the multiple apps/emails they are forced to send to their teachers without guarantee of response. They need an easy way to directly connect with teachers and know that their teachers have read their messages.

Teachers are motivated to use ClassDojo by its ease of use, stories feature, and the translation tools that are built into the app. They are frustrated by the difficulty of various competitor tools that students are expected to use, and not always having a direct way to contact their students. They need a way to be able to communicate with their students that is easy for their students to learn and use, and doesn't add to the many tools they have to use, especially while in digital/virtual learning. They also want some way for another adult to monitor their messaging with students, for safety reasons.

Parents are motivated to use ClassDojo by its ease of use, expected updates, and the ability to communicate directly with their child's teacher. They are frustrated by too many notifications. They need a safe way for their children to directly connect with their teachers, preferably with the ability to monitor communication.

Personas

I created three personas to represent the three main user groups of ClassDojo- the students, the teachers, and the parents. Each group has different motivations and pain points. Additionally, though there is only one app, the layout of the app differ depending on the type of account, so this must also be taken into consideration during the design process.

Information Architecture

Site Map

While ClassDojo already has a site map, recreating it was essential to understanding how to incorporate the new feature, especially with each user group's app experience being so different. This new feature is highlighted in gray. For the teacher and parent version, the new student messaging feature (active messaging for teachers, passive monitoring for parents) was integrated into the existing message center. For the student version, a new messaging center was created for messaging their teachers directly.

Interaction Design

Task Flows

Each group required a different flow through their respective versions of the app to accomplish the task of using the messaging center. I created these task flows to demonstrate this, and also determine which screens were needed for the prototyping stage.

UI Design

UI Kit

The UI kit was created from screenshots of each version of the app. Using the kit, I was then able to recreate the UI for each version (student, teacher, parent) of the app, and create the screens for the new feature.

Hi-fi Prototypes

The student's version of the app now features a messaging center, with student-teacher messaging. Read receipts are also part of the interface, allowing students to see when their teachers have read their messages.

Please click and swipe through for full details.

Try student prototype

The teacher's version of the app now features an updated messaging center, with student-teacher messaging added to the existing parent-teacher messaging. Read receipts now show when the messages have been seen by students, parents, and any co-teachers or administrators, as well as any translations.

Please click and swipe through for full details.

Try teacher prototype

The parent's version of the app now features an updated messaging center, with the ability to passively read student-teacher messages sent from a linked child account. Read receipts were updated to allow parents to see when students have read their teacher messages, as well as see which other adults (co-teachers, administrators) have also read the messages.

Please click and swipe through for full details.

Try parent prototype

Interpretation

Usability Testing

The following was revealed through the usability study:

• Overall, the new feature was well-received by all user groups. Familiarity with the existing versions of ClassDojo, as well as familiarity with other messaging apps, helped them with using the new feature.

• The main area where users struggled across the board was how to see when a message had been read, and by who. In the original app, read receipts are hidden until the user taps the last sent message. In competitor messaging apps, the read receipts are not hidden. I believe that, following the precedent of apps like iMessage, WhatsApp, etc, it would be beneficial to have the ‘read’ receipts automatically display, versus a ‘click to display’ model as the current ClassDojo app employs.

Project Takeaways

Deciding what feature to add is not easy. While we are always told to remember that  we aren’t the user, as a former user of ClassDojo, I had my own ideas about what current users would want to see added.  However, my interviews revealed that every user had their own experiences and ideas for the app. The realization that I wasn’t going to be able to design something that made everyone happy was a sobering one, and a reality of the UX/UI field that I needed to learn.

This project was my first time working within an existing UI system. I learned that you have to be really cognizant of the existing components and design patterns when adding a feature, especially when different versions of the product exist for different user groups. 

Furthermore, this project taught me that products in the real work don’t always follow design principles precisely. ClassDojo’s UI was not always the most consistent, and it was also out-of-date. This actually lead to the main issue I found in usability testing- the messaging UI was a hidden receipt pattern, whereas most modern messaging app’s UI has it permanently displayed. This led to user confusion and errors in an otherwise straight forward app.

I really enjoyed working on this project. I found it fun to work within the constraints of the UI system, and I got a sneak peak into what working on a product design team for an existing app might look like.

Let's work together!

Want to collaborate and create something amazing? Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.