Redesigning teacher's portal of a Learning Management System— A product design case study
This case study details my approach to redesigning a Teacher’s Portal within Track My School’s Learning Management System aimed at streamlining classroom management for teachers by making their daily tasks more efficient and manageable.
About the company
TrackMySchool, an Ed-tech platform with over 1,50,000 users represents a cutting-edge, cloud-based system that seamlessly interconnects parents, teachers, students, and school management. They offer comprehensive school management solutions designed to streamline school operations using data effectively collected from schools. Functioning as a comprehensive ERP system, it empowers educational institutions with a diverse range of modules and functionalities.
Context
As online learning has become increasingly essential, educational institutions are transitioning from traditional physical classrooms to digital environments. One technology that made the shift much easier is the learning management system (LMS). Wondering what an LMS is?🤔
A Learning Management System (LMS) in schools is a platform that facilitates the management, delivery, and tracking of educational content and resources. Essentially, it’s a digital hub where educators can create, organise, and deliver courses, and students can access learning materials, submit assignments, and engage in various educational activities.
Among the various portals within TrackMySchool’s LMS application, the company decided to revamp its Teacher’s Portal and adopt a new visual style.
You may check out my Visual presentation on Behance
The Teachers Portal in LMS
This serves as a centralised platform tailored specifically for educators, offering essential tools and features to streamline curriculum management. It provides teachers with functionalities such as distributing study materials, creating and assigning tasks (assignments, projects, homework, quizzes etc.), tracking progress and evaluation. Hence this acts as the forefront of teacher-student interaction.
The existing portal was completely outdated in terms of UI design and the teachers expressed frustration with its complex navigation structures and lack of user-friendly features.
Understanding the problem space
- The existing teacher notes module lacked an intuitive and efficient interface which made it difficult for the teachers to create, organise, and manage tasks effectively.
- Teachers struggled with complex navigation structures and inconsistent labelling within the portal, leading to inefficiencies and frustration.
- Teachers faced challenges in managing tasks such as providing quick class notes, creating assignments/homework, managing student submissions, evaluation and grading, and tracking student progress effectively leading to a significant drain on time and resources.
- The primary use case of a teacher from assigning tasks to evaluating the results looked complex. Teachers spend excessive time navigating the interface, detracting from their teaching and planning activities.
Jobs to be done — I mapped some of the thoughts that may come to the teacher’s mind while using the portal
The scope of the project encompassed a complete redesign of the teacher portal, with a focus on making the interface simple by enhancing user experience, user interface and addressing key problems identified through research.
New Teacher Portal Dashboard
The first thing on the list was to create a new dashboard view with essential sections designed to meet the specific needs of teachers like content organisation, track teaching status, visibility into student progress, task management, teacher schedule etc. This view did not exist in the current design.
I wanted the new design to be quite simple and an intuitive interface that provides access to key functionalities without extensive training for the teachers. The new dashboard consists of 3 key components, let’s break them down one by one.
1. Curriculum Summary
Timely coverage of academic portions is crucial for teachers. Each teacher is assigned a lesson plan and scheme of work to complete in an academic year. Now with curriculum summary, teachers can visually see whether they are on track with their lesson plans as well as assessment activities that need to be shared timely with the students. This view enables them to assess their schedules and effectively manage the pace of teaching ensuring alignment with curriculum objectives.
The curriculum summary has two components, that are very direct and to the point: Lesson status and Assessment status each presenting information in user-friendly popups.
The Lesson Status feature provides teachers with a clear and concise list view, offering an overview of their teaching progress across terms, classes, and divisions, seamlessly aligning with their lesson plans. This empowers educators to assess their schedules and effectively manage the pace of teaching, enabling informed decisions about instructional delivery and curriculum pacing.
Additionally, the Assessment Status feature allows teachers to track the progress of various tasks within the scheme of work, including assessments and assignments published by teachers. With a list view highlighting actionable items such as evaluation and publishing, educators can efficiently manage and evaluate student submissions, ensuring timely feedback and assessment completion.
Included basic filter options, so that the information can be viewed by different groups, individual classes, divisions and subjects.
2. Teacher Notes
The Teacher Notes serves as the forefront of student-teacher communication in the digitalised school curriculum. This is a central hub for teachers to seamlessly manage their course materials, assign tasks and assessments, conduct evaluations and grading effectively while ensuring easy accessibility to the entire course content.
The primary purpose of the Teacher Notes module includes:
- Create Content & Assign Tasks
- Evaluation & Grading
- Manage & View Content
The new design has a clean and intuitive interface with clear navigation paths to each feature. Let's dive into each section:
2.1. Create Content & Assign Tasks
This section allows teachers to effectively upload and organize class notes and study materials, assign tasks such as assignments, quizzes, and projects to students, set deadlines and attach materials directly to tasks for easy distribution.
Key Problems
- The current teacher notes page lacked hierarchy and had scattered placement of information, resulting in an overwhelming visual appearance.
- Many find it time-consuming to upload, categorise, and modify materials due to the unclear navigation structure and user-friendly design.
- The current design results in information overload and inconsistency in the page view across multiple steps of content creation. The form like UI leads to a lengthy page design which causes confusion and frustration among users.
Solution- New Design
I decided to split the task creation flow into 2 steps to ensure that the teacher does not feel overwhelmed by the information being presented to them.
Let’s have a look at the steps one by one.
Step 1: About the task
To simplify the process, I made it as seamless as sending an email. In this step, the teachers can provide all the details related to the task whether it's a course content or an assignment. This includes the content details, recipient details, and any attachment types. By categorising information and reducing clutter, I aimed to minimise cognitive load and enable fast data filling ensuring a good user experience. This step was quite straightforward, now moving to the 2nd step.
Teachers can now choose the recipient students from a list view
Step 2: Review the task
The teachers can now see a preview of the task that they’ve just created. After confirming all the details the teachers can publish posts to students. Once the teachers publish the job post, they can view the same on their dashboard under the teacher notes section.
2.1. Evaluation & Grading
The platform’s revamped evaluation and grading functionality offers teachers a streamlined and efficient way to assess student work and provide meaningful feedback. They can quickly review and grade assignments, homework, and projects directly within the platform, ensuring a seamless evaluation process.
Key Problems
- Time-consuming: With the existing flow, the evaluation page was hidden under many layers and multiple steps were involved between reviewing a task assigned and successfully evaluating it.
- Lack of flexibility: Assignment details, student submissions, evaluation and grading were spread across multiple pop-ups. Unifying these elements is necessary to create a good evaluation experience.
- UI Issues: The assignment details page appeared disorganised and lacked a clear reading pattern making it hard for teachers to focus on key data points such as task type, posted date, due date, and recipients. This information overload made smooth navigation challenging.
- There was no clear submission history for teachers and students to track their work and additionally, options for providing personalised feedback or comments after an assessment were missing.
These problems created inconsistency in user flow and didn’t contribute to a good user experience.
Solution
To help them get where they want to be (evaluation process) and reduce clutter, I grouped assignment details and student submissions using tabs. I have also implemented some new features to enhance the teacher’s assessment experience aimed at streamlining task management and improving clarity in evaluation processes.
With the new and improved evaluation flow, teachers now can easily:
Let's dive into the details:
- Reviewing and Grading student submissions: The scattered task details and crucial insights such as completion status and total learning outcomes (TLO) achieved were visually grouped for easier scanning. This provides teachers with a clear picture of the task outcome.
- The student evaluation tab now has an overall task insight at the top summarising data such as submitted, pending, resubmitted work, and rejections. This summary stays visible, offering valuable insights of the class at a glance. Clicking each statistic reveals more details in a pop-up.
Student submissions are presented in a list view, similar to an email inbox. This layout enables smooth navigation and efficient interaction with each evaluation. Student details and submissions are side-by-side, allowing teachers to review documents, presentations, and other file types directly within the platform. They can provide written feedback directly on the submission, offering suggestions, corrections, or praise ensuring workflow continuity and efficiency. Sorting options allow organising students based on key stats for streamlined evaluation. After reviewing, teachers can assign grades directly within the interface, which automatically calculates the overall grade.
Submission History
Recognising the value of tracking task progress, the platform now offers a comprehensive timeline similar to order history in eCommerce. This timeline includes posts, submissions, resubmissions, and approvals, providing clarity and preventing confusion. It addresses previous design limitations by offering a clear record for both teachers and students.
Teachers can choose individual students or groups from the list for actions such as approval, resubmission, or rejection of work. The platform also supports managing offline submissions or opting out of the evaluation process. By clicking on a student, teachers access options to take action and grade the assignment. Teachers can efficiently assign grades, provide feedback, and execute actions without interruption. This streamlined platform offers a more user-friendly workflow for grading and evaluation.
Evaluation Feature
The previous design limited teachers to evaluating one student at a time, requiring frequent navigation between the evaluation interface and the listing page. The updated design streamlines this process by allowing teachers to switch seamlessly between students during evaluations using arrows. A dropdown menu at the top lets them quickly select a student from the list, improving accessibility and ease of use. I retained the functionality to scribble on student’s submissions (PDF/images) but with improved UI to match the new visual language I have created.
Teachers can now write feedback, offering suggestions, corrections, or praise before taking any actions on the student submissions.
3. Schedule
The schedule is a new calendar feature embedded within the teacher portal dashboard, designed to make the teacher’s life easier by providing a clear, organised, and intuitive way to showcase the schedule for the day and plan their lessons accordingly. It integrates the scheme of work/lesson plan with daily schedules ensuring that the teachers stay on track with the scheme of work and adhere to the curriculum.
The calendar has not been reinvented but only subtle changes have been made to make it simple and helpful for the teachers. With different colour codes given to daily tasks and their status, teachers can easily identify tasks that are due, in progress, or pending, allowing them to prioritise their workload and focus on the most important tasks first. Filter and search capabilities in the calendar allow quick access to specific tasks saving time and improving efficiency.
Schedule Widget in the dashboard
The teacher can have a glance at the schedule of their current day from the home dashboard itself without having to go inside the calendar. Showing limited, lesser and only useful items in one place will make them remember things more often. With arrows on either side, the teacher can easily navigate and see their timetable and tasks scheduled in the widget itself. Clicking on the widget takes them to the holistic view of the schedule calendar.
That’s it, folks! Hope you enjoyed this detailed case study.
Time to retrospect!
So these were my learnings after working on this project.
- With an abundance of content on every screen, achieving an optimal information architecture and visual hierarchy was both fundamental and challenging in the design process.
- I refined the design through multiple iterations to reach the right solution. Iterations are the only way to attain a design that works. There’s no other way around it.
- Small changes in design can make a huge impact on the whole user experience. Minor tweaks means Major delight for the users.
