Modern Classroom Project: Redesign
Bernardo Caram: UX Design | Duration: 3 Weeks | Project Status: Completed
Project Overview
Problem/Opportunity:
Modern Classroom Project is a nonprofit organization committed to empowering educators to drive impact in the classroom with self-paced, mastery-based learning. Their Virtual Mentorship Program is a professional development training where they pair educators with mentors who have successfully launched classrooms that nurture mastery-based learning. Educators can enroll individually or through their school district sponsorship or open scholarship opportunities. The MCP team is not satisfied with the graduation rates of the educators who are enrolling in this virtual mentorship program. They would like our help interviewing users who opted out of the course at various stages of training. It would be of great value for MCP to understand the experiences of educators who engage with the program — by logging into Moodle and/or by holding initial coaching calls with their mentors — but don’t complete submissions, on time or at all.
Project Goal:
Through contextual inquiries and user interviews, the UX Design apprentices team will be on a pursuit to get as close as possible to finding why users are unable to or choosing to not complete their training. With those insights, we aim to define the problem and design potential solutions to hopefully improve MCP’s users’ experience so that they go on to complete the program.
Target Users:
The MCP team is most interested in understanding the pain points of educators who engage with the mentorship training program by logging in and/or by holding initial coaching calls with their mentors, but don’t complete submissions, on time or at all.
Scope:
Phase 1: Through contextual inquiry and interview of users from the recent summer institute program understand the pain points that may have kept them from completing the course. Use the insights to hypothesize the problem & potential solutions.
Phase 2: Design data-driven solutions to aid in user completion of the course. Deliver prototype, key findings, and next-step recommendations to the MCP team to conclude the research project.
Key Considerations:
MCP is committed to giving educators the ability to improve their teaching whether they are paying for the course or not. Money should not be a factor in hindering one’s education.
The design solutions should be led by this consideration.
Explore why users are not completing the course in spite of making contact with the mentor.
Enhancing program engagement: MCP should identify and address factors contributing to low graduation rates to increase educator engagement.
Key Constraints:
Low program engagement: Educators’ low graduation rates indicate a constraint in engaging and motivating participants throughout the mentorship program.
Time: (prioritization during 3-week sprint).
Key Assumptions:
Mastery-based learning can positively impact student outcomes.
Program-related factors contribute to low graduation rates.
Interviews will provide valuable insights into the low completion rates.
Modern Classroom Mission:
The Modern Classrooms Project empowers educators to build classrooms that respond to every student’s needs. We lead a movement of educators in implementing a self-paced, mastery-based instructional model that leverages technology to foster human connection, authentic learning, and social-emotional growth.
Vision:
Every day, in every classroom, every student will be appropriately challenged and supported. This will happen when:
Students learn at their own pace, building authentic understanding as they go.
Teachers adopt instructional practices that meet each student’s academic and social-emotional needs.
Technology facilitates more meaningful human interaction.
When teachers build Modern Classrooms that use technology to meet every student’s needs, our learners develop deeper content mastery and greater self-worth, while our educators become happier and more effective.
Values:
Every student is unique and capable of learning.
Classrooms should empower students at different levels and those who are chronically absent.
Responding to students’ academic and social-emotional needs leads to limitless achievements.
Empowered teachers inspire students and communities, reshaping their lives.
We respect teachers’ expertise and provide an approach to enhance academic and social-emotional growth.
Our focus is on actionable solutions and continuous improvement.
We redesign instruction from the ground up. -Every interaction is an opportunity for improvement, and learning from students, teachers, and stakeholders.
Rigorous evaluation and reflection are integral to our approach. -We foster a diverse and inclusive community to better serve students and teachers.
Education impacts everyone, and we believe in collaboration and shared contributions.
Project Stakeholders:
Robert Barret, Calla Miller & Megan McGregor
The target audience for Modern Classroom
+25 years old men and women, especially those belonging to the education field.
Process
Methodology ~ Competitive & Comparative Analysis
Competitive Analysis:
We chose to conduct a Feature Analysis of the Teaching Channel, Ed2Go, ISTE U, and Khan Academy websites for our Competitive Analysis. Each of these companies offers similar products and services and therefore, competes with Modern Classroom for the same customer base and market share. We chose to analyze what features each of these companies offers to see if there was anything Modern Classroom might be missing that would be of value to customers.
Main Takeaways:
Khan Academy recently added an online professional development session for teachers to educate themselves on how to use the program for students. This is a direct competitor to look out for setting a program that has similar outcomes. Additionally, Khan Academy is always free.
When looking at Ed2Go, modern classrooms are much bigger. They have a wider reach and have implemented so much more than Ed2Go.
Modern Classrooms, and a few others are often used as professional development. School districts are able to get partnerships so that they can be given to multiple teachers at the same time.
Comparative Analysis:
Our comparative analysis consists of different learning programs. Regardless of if the program is specifically to teach educators. Using several programs as a comparison, we wanted to see how else and learning experience is being made.
Key Takeaways:
These were all self-paced, free of a mentor's guidance. So it was interesting to see how information was given to have a lasting impact.
Platforms like Hotmart or Coursera head free courses, along with some paid courses. We needed to look at how they showed the difference between a free and a paid course, and how we can put this into practice for Modern Classrooms.
The compared performance of all her downloadable material. Which is something modern classroom lacks. While you can download the assignments and the feedback journal, but not have the lesson material to say for later.
Programs like Udemy, Google, and Coursera have a larger following since they have been around for a while. What can be done to increase Modern Classrooms standing?
Heuristic Evaluation
Heuristic Evaluation ~ Modern Classroom Website
Heuristic Evaluation ~ Modern Classroom Website
User Interviews
We performed a total of nine user interviews to gather feedback on the current website. Our approach involved a combination of contextual inquiries, where we observed users interacting with the website in real-time, and general questions aimed at obtaining a broader understanding. By conducting contextual inquiries and user interviews concurrently, we aimed to gain comprehensive insights throughout the entire process.
Overall Takeaways:
Pros:
7/9 Users like MCP’s current modules page layout
Users would very likely benefit from the free course’s left-side modules navigation.
Users were generally satisfied with the content of the training. 7/9 users.
Cons:
We observed that users were not aware of many features currently available. 9/9
Navigate the course — 7/9
Badges — 7/9
Educators Commons — 6/9
5/9 users had trouble finding a mentor appointment page — wished it was simpler to locate.
9/9 users did not like the right size navigation of Upcoming Events — which is actually assignments quick access.
9/9 users were not clear about the dates — why all of the assignments had the same due dates.
6/9 users are unsure why suggested deadlines were not mentioned on the right navigation when these deadlines were mentioned in the email they received.
7/6 Users were not even aware of the Navigate This Course onboarding video. One user would not have had to bother her user had she known this feature was available.
We observed that:
Badges/motivation was there but not leveraged to get maximum use. Looking at our competition, we think it would be helpful to make use of it.
Refine the current navigation /site layout — to make it more intuitive for the users.
Affinity Map
Key Takeaways:
Navigation-
The layout of the program can be confusing, and cluttered at times. Users want an additional way to navigate the program so that it’ll be easier to go back and forth between modules.
Mentorship-
Would like more personalized feedback from mentors, and possibly different methods of communication.
Incentives/Reminders-
Wants to be reminded to take the coursework, so that educators will go back and complete assignments. As well as having “rewards” for completing the work.
Key Takeaways:
Timing/Scheduling-
The biggest issue for users when not turning in assignments is timing. The timing of the program mixed with their daily lives does not bode well. And they end up turning in work
Navigation-
The layout of the program can be confusing, and cluttered at times. Users want an additional way to navigate the program so that it’ll be easier to go back and forth between modules.
Deadlines-
Deadlines need to be clearly identified outside of the official due date (due dates for each assignment needed)
Mentorship-
Would like more personalized feedback from mentors, and possibly different methods of communication.
Incentives/Reminders-
Wants to be reminded to take the coursework, so that educators will go back and complete assignments. As well as having “rewards” for completing the work.
Content-
The videos do not match when it comes to video/sound quality. Ensuring that the quality remains the same to maintain professionalism.
User Persona
To redesign this website, we need to create a user persona for someone like Sarah, including her goals, needs, and frustrations related to Modern Classroom Project.
Sarah requires a mentorship program that offers support and opportunities for self-reflection to keep her motivated.
User Journey Map
In Sarah’s case, she begins her journey at a neutral level and upon logging in, feels optimistic about starting the course. She soon begins to feel annoyed because she finds the page difficult to navigate and has a hard time finding the mentor and course info section. She moves on to the summer institute section and feels hopeful because she is liking the way the modules are set up. She continues browsing the modules which she is very impressed by and hits an emotional peak. However, when she begins the submission process she hits a low point and is confused about why the suggested deadlines are not being displayed. Sarah ends her journey on an optimistic note but would like it if the website was easier to navigate and the overall flow was more motivating.
From this map, we can tap into two opportunities to improve Sarah’s experience:
1. More Intuitive Navigation & Site Layout.
2. Motivational Incentives.
Problem Statement
USER: Educators need a more motivating and intuitive experience during their Paid Mentorship Program to aid continuous engagement and completion of training.
ORGANIZATION: MCP needs a more intuitive and motivating experience for their educators during Paid Mentorship Program to to cultivate continuous engagement and aid in educators completion of course
How Might We?
How might we make educators’ experience with Paid Mentorship Program more intuitive for educators.
How might we motivate educators to complete the training?
Hypothesis
By re-designing the website with more intuitive site architecture, navigation and motivational design with incentives we think educators will be able to promote engagement and increase course completion rates.
User Flows
Part of our design process included creating a user flow, which is a visual representation of a user’s path and actions within the website. As designers, this helps us identify potential issues or areas where the user experience can be improved, ensuring a smooth and intuitive journey for the user.
User Flow 1 outlines the path the user takes to complete an assignment.
User Flow 2 outlines the path the user takes to set up an appointment with the assigned mentor.
Sketches
The next part of our define stage includes creating hand-drawn sketches to start to map out the pages we will be creating. We carry out what we refer to as a “design studio” where we set a timer and each creates our own version of a certain page. We continue this process for each page and come together afterward to share our designs and decide which elements from each sketch we like. We then repeat the process until we land on something that we are satisfied with.
We also annotate our sketches as you can see in black around the border. This helps describe different buttons, image placeholders, and interactions.
Wireframes ~ Mid-Fi & Hi-Fi (Before/After)
The initial landing page in the mid-fi highlights everything that is important to the mentorship program. However, the users felt this page was redundant, and didn’t need to be there if the same things would be on the next page. Going to the Summer Institute page, the module cards were kept the same with some minor changes including the addition of a side navigation.
Mid-Fi Wireframe
Mid-Fi Wireframe landing page variation
Hi-Fi Landing Page — Summer Institute
The communications preferences will give Sarah the ability to provide a method of contact so that they can be able to actively communicate with their mentor without accidentally missing an email/message due to the large amount they get over a period of time.
Communication Preferences
Mentor’s Page
Mentor’s Page Hi-Fi
We also wanted to have a mentor page. Since the course is a mentorship program, Sarah felt discouraged as it was hard to locate information about the mentor and how to contact them. With these changes, everything that has to do with the mentor can be found in one spot.
Adding motivational design to the process with congratulation pop-ups
Congratulations pop-up for submissions
Congratulation pop-up for the last module submission with the certificate
The congratulations card will show up at the end of each module (submitting an assignment) These can be shared (LinkedIn, Twitter, email, etc.) with the educator’s admin or through their social media of choice.
Certificate of completion that we created for the Modern Classroom Project.
We gave the CERTIFICATE.
Mid-Fi ~ Prototype:
Mid-Fi — Prototype Modern Classroom Project
Usability Test Plan
Problem Statement:
Educators need a more motivating and intuitive experience during their Paid Mentorship Program to aid continuous engagement and completion of training because right now they are unable to smoothly navigate the website and be motivated to complete the course.
Hypothesis:
By re-designing the website with more intuitive site architecture and navigation and adding motivation through gamification and incentives we think educators will be able to continue engagement. We expect this will lead to an increase in the course completion rates.
ROUND 1 USABILITY TESTING — 6/15/23
Tasks:
(Task type — Critical, Typical & Testing priority — Must be tested)
The user has already registered for the course. The user has logged in before but has not yet made contact with their Mentor.
1. The user will set up mentor communication preferences.
2. User has already gone through module 1 lessons in their free time. He/she will now go to module 1 and ‘submit’ their completed assignment.
3. The user clicks home.
4. The task is complete.
Scenario:
The user is an Educator who has signed up for professional development (PD) through the Modern Classroom Project. He/she has logged into the training before. He/she will now set up their mentor preferences and also submit their first assignment.
Scope & Purpose:
DDD UX Team has re-designed the site and navigation for MCP Summer Institute’s virtual mentorship program and would like to test it with target users to see if:
1. The users find the updated site and navigation more intuitive.
2. It provides a more motivating experience for users to continue engagement.
The above will contribute to the ultimate goal that with continued motivation and engagement a higher number of users will go on to complete the course.
Goals
Users will be able to set their communication preferences and go through Module 1 and submit their assignment in under 4 minutes with no more than 3 errors.
Method
Moderated, Remote Users tested — 4
Recruited from — Summer Institute Users provided by MCP
Users will be able to set their communication preferences and go through Module 1 and submit their assignment in under 4 minutes with no more than 3 errors.
Moderated, Remote Users tested — 4
Recruited from — Summer Institute Users provided by MCP
Synthesis
The goal for the first usability testing is for users to be able to set their communication preferences and go through module 1 and submit their assignment in under 4 minutes with no more than 3 errors.
For the second usability test, users will be able to set their communication preferences (email only), submit assignments 3 & 5, and view certificates.
We conducted remote testing through Maze, giving 4 users two different tasks.
Usability Testing #1 — Results
After the first round of usability Testing, we got an overall System Usability Score or SUS score of 85.6%. The user had a relatively positive response to the mid-fidelity prototype. This tells us how functional the prototype was, and how well the user could navigate during the testing
Some of our quantitative found:
50% of the users would love it if the modules page was the landing page(after log-in).
All 4 Users found the new navigation more intuitive.
The average time to complete the tasks was about 2:30 minutes with 3–5 errors
Usability Testing #1
Hi-Fi ~ Prototype:
Prototype Explained:
As we log in we are taken to the summer institute landing page instead of the original landing page that was there.
We’re setting up our communication preferences so that Sarah can be contacted through phone calls and texts instead of email. After setting this up we are taken to the mentor page that our group has added. This gives Sarah one place to see everything she needs to be involved with her mentor. Whether that’d be scheduling an appointment or viewing the mentor feedback.
After that, we’re going to submit an assignment. Going to the fifth project. When submitting the assignment a pop-up will show up to congratulate Sarah for finishing the program. She can also take a look at the certificate she receives at the end.
When closing out of these two things the assignments section will update to show that she submitted an assignment.
Usability Test 2 & Takeaways
ROUND 2 USABILITY TESTING — 6/20/23
Tasks
(Task type — Critical, Typical & Testing priority — Must be tested)
The user has already registered for the course. The user has logged in before but has not yet made contact with their Mentor.
1. The user will set up mentor communication preferences (e-mail).
2. The user has already gone through modules 0,1 & 2 and submitted assignments. He/she will now go to module 3 and ‘submit’ their completed assignments. We assume a leap in time, with only assignment 5 remaining. The user then proceeds to submit # 5.
3. User views certificate.
4. Finally, clicks home.
Task is complete.
Scenario:
The user is an Educator who has signed up for professional development (PD) through the Modern Classroom Project. He/she has logged into the training before. He/she will now set up their mentor preferences and also submit their first assignment.
Scope & Purpose:
DDD UX Team has re-designed the site and navigation for MCP Summer Institute’s virtual mentorship program and would like to test it with target users to see if:
1. The users find the updated site and navigation more intuitive.
2. It provides a more motivating experience for users to continue engagement.
The above will contribute to the ultimate goal that with continued motivation and engagement a higher number of users will go on to complete the course.
This test is of a hi-fi prototype and we are confident that color and its readability will only enhance our user’s experience.
Goals:
Users will be able to:
1. Set their communication preferences (email only)
2. Submit assignments 3 & 5, view the certificate and
3. Go home
All in under 2 minutes with no more than 3 errors.
Method:
Moderated, Remote Users tested — 4
Recruited from — Summer Institute Users provided by MCP
Usability Testing #2 — Results
After the second round of usability Testing, we got a higher SUS score of 90%
Users found that the color coding was very intuitive for them to identify exactly which modules were not submitted and to take action.
The average time to complete the tasks was about 1:20 minutes with 1.5 errors.
Usability Testing Results #2
Usability Testing Overall Results
After 2nd usability test, we compared the average time for locating mentor and assignment-related features.
The red bar shows users took about 3 minutes to complete the comparable tasks on the original site
For the mid-fi prototype, the yellow bars show that we were able to reduce that time by roughly one minute.
With further iterations on our hi-fi prototype that we went over just now, we were able to cut this time by another 20 to 40 seconds.
Overall the time has been reduced by half.
Usability Testing Takeaways:
Takeaways from testing 1 include
Removing the current landing page, and changing it to the Summer Institute page
Having an indication as to whether an assignment is submitted
Testing 2
Changing the location of “Communication Preferences”
Next Steps:
As the next steps towards the motivational design and based on industry standards, we proactively created some re-designs for current MCP badges for module completion.
Motivational Design
4/4 users in 2nd usability test said this would add to their motivation.
In addition, MCP already has an online merch store and we want to leverage that and offer a motivational course completion gift.
Motivational Design
Here are some suggestions on how it could look like.
4/4 users in 2nd usability test said this would motivate them
We think Sarah will like it!
Things that we want for the future
Usability test the 3rd prototype.
Implement adopted design changes.
Test it in the Summer of 2024
Goal: 6% in 1st assignment submission & 4% in course completion rates SU 2024.
Repeat research, design, and testing for SU 2024
(For an incremental goal of 5%YOY increase in completion rates).
External Factors:
Time & resources allow, further research timing of the course & run alternate time pilots.
