Class Dojo
New folder feature for an educational tool
I added a folder feature to ClassDojo.com
Class Dojo is a free educational technology and classroom management tool. It connects school teachers, students, and families through communication features and student portfolios.
**Note: I have no affiliation with ClassDojo. This was done solely as a project for Designlab.

PROBLEM
Teachers and students cannot organize class activities on the ClassDojo platform.

SOLUTION
A folder feature that allows teachers and students to organize activities by category.
My folder feature design includes options to sort and manage folders. It utilizes actions such as delete, rename, and rearrange.


Prototypes:
Project
Add a Key Feature

Tools
Figma 
Maze

My Roles/Deliverables
UX Design 
UX Research
UI Design
Information Architecture
Interaction Design
User Testing
Teacher Portal
Folder Feature throughout activities and portfolio.
Student Portal
Folder Feature to filter through assignments and portfolio posts.
My Design Process:
Empathize Strategize ⇒ Design ⇒ Test
I created a detailed research plan before beginning the research phase.
Some of my Research Goals:
1. Learn the goals and limitations of ClassDojo through a Competitive and Comparative Analysis
2. Understand through observation and research how an online platform can become a part of a real and healthy classroom routine.
3. Discover teachers’ and students' preferred methods to upload and engage with assignments online. 
4. Identify the most common design patterns to organize content/categories on pre-existing online platforms.
5. Explore educational technology market trends.
I began by looking at the market trends of educational technology tools.
I focused this secondary research specifically on the role online classrooms play inside the physical classroom and at home. 
Note: The year 2020-2021 was particularly unique due to the impact of Covid19 on education systems across the world. Even platforms we were using before need to change and evolve for the growing needs of the educational community. Instead of a secondary tool, online classrooms play an integral role in the classroom, now more than ever.
A thorough competitive analysis uncovered the increasing popularity of online classrooms. 
The appeal of sites like ClassDojo emphasizes the importance of communication between teachers and families. 
I conducted a Competitive Analysis to understand the existing market.

To learn more about teacher motivations, I interviewed three elementary school teachers. 
Each teacher I spoke to has had experience teaching online. Our conversations confirmed that teachers lack the means to organize assignments on ClassDojo. ​​​​​​​
Moreover, I have real-world experience using ClassDojo. When I taught 1st-5th grade, I learned that students need straightforward directions. Over the course of five months, I watched students struggle to organize their work using ClassDojo's platform.

Some teachers prefer to be in constant communication with families. Many families appreciate the transparency, while others find it overwhelming. 
The user personas and empathy maps I created represent teachers, students, and families from my research. 

Empathy Map for Coordinated Christina, a user persona of a teacher I created based on interviews.
HMW Statements helped determine which user needs the folder feature intended to solve:
I created a SiteMap of ClassDojo's existing Information Architecture.
Research indicated that the user's main frustration stems from a lack of features to help them stay organized. I placed the new folder feature within the preexisting structure of ClassDojo.
SiteMap zoomed into the portfolio section on the teacher portal.
The SiteMap uncovered two PAIN POINTS centered around user organization:

1. TEACHER PORTAL 
PAIN POINT:
Student posts and activities are both featured in the “Portfolio” section. This makes it difficult to differentiate between posts and activities.

MY SOLUTION:
Create a separate "Activities" page that incorporates folders.

Teacher Portal

2. STUDENT PORTAL 
PAIN POINT
The feature to post any new content is the first CTA students interact with on the homepage.
Research indicated that 50% of students upload assignments to the wrong channel. This makes it difficult for teachers and students to track their work.

My SOLUTION:
Replace the "post new content bar" with folders and move it to the "portfolios" page.

Student Portal

Then, I created a new SiteMap that included elements of a folder feature in both the teacher and student portals.
 The addition of the folder feature meets the user's need to stay organized.

Features included in the new SiteMap:
A) Teacher Portal:
1. "Activities" page added to the navigation menu
2. "Portfolio" page will feature student posts. The "Activities" page will feature activities only
3. "Activities" page will feature folders that the teacher can organize by category
4. "Create a New Activity" pop-up window will allow teachers to use folders

B) Student Portal:
1. Add folders to the homepage
2. Replace the option to create a new post from the homepage with a list of the student's folders
3. Include a filter option on the portfolio page. This way, students can filter through their work by folder
Each user flow I created supported the unique needs of my user personas. 
I discovered ways users will interact with the content on the site and any pain points. I used the pain points to guide future iterations.
For example:
Through completing the user flow for Coordinated Christina, I realized that it would be beneficial for the user to include a “Move to” feature, which would allow teachers to rearrange assignments between folders.
I gathered my research to flesh out some ideas for the teacher and student portals with pen and paper.
Brainstorming and sketching before moving to Figma helps me explore many ideas quickly.
Next, I created Lo-Fidelity Wireframes to include the folder feature:
Teacher Portal:
Student Portal:
User testing uncovered some areas for improvement to include in the next iteration.
Before I created the Hi-Fidelity frames, I created a prototype for the new folder feature. 
I created a UI Kit that combined pre-existing elements from the site with my own designs.
Some of the elements I added are the folder imagery and the new icons. 
Hi-Fidelity Frames:

*I created an "Activities" page for teachers to filter through and manage activities by folder. 

*I added "Activities" to the Navigation Bar
*I added filtering and a folder icon on the top left of each student's post.
*I added the requirement to sort each new activity into a folder before assigning it to a class.
*I added a folder icon on the top left of each student's individual portfolio.
* I added folders to the Student Portal homepage. This way students can view their new assignments via folders.
* I added folder filtering to the Student Portfolio.
User Testing Goals:
Teacher Portal
Test if teachers can...
1. Easily locate an assignment in a specific folder.
2. Manage folders (ie: delete, rearrange).
3. View student work by folder.
4. Create a new folder.
5. Sort each new assignment into a folder while they are uploading it for the first time.

Student Portal:
Test if students can...
1. View new activities by folder.
2. Access old work using the folder filter.
3. Upload new work in response to a specific activity and place it directly into a folder.
I used Maze to create a prototype to test user responses to the new folder feature.
I sent the test to teachers who are familiar with using educational technology.
Due to the time constraints of this project, I was not able to send the prototype to students. But, I would like to do so in the future.

The next iterations stemmed from my test results in this affinity map:
My UX Recommendations for Future Releases:
1. Usability Testing
I would like to spend more time testing the platform from the student and family's perspective as well.

2. Multi-Media Features
When teachers “Create a New Activity” the only type of file teachers can attach is a recorded video. Teachers should have the option to attach multiple media, such as photos and pdf files.

3. Gradebook Accessibility
The Gradebook should be made more accessible, depending on the school culture. This can be made to be an adjustable feature within classroom settings.

4. Permanent Student Login
Why do student logins change every 48 hours? I am curious about the rationale behind this feature. Further testing will uncover an efficient method for students to access the portal.
Back to Top