top of page

Overview

  • Date / Duration: 3 weeks, February - March

  • My Role: Product Manager

  • Deliverables: High Fidelity Figma Prototype

  • Highlighted Work: Project plan, interview with potential users, affinity map, sketches, wireframes, usability testing, digital prototype

Our Client

Design Challenge

Educompass is an educational planning tool that supports educators and educational leaders. It helps them stay on top of curriculum requirements and on track with their schedule. 

Leverage AI to help make the process for creating tailored plans even easier on busy teachers. 

Planning

Project Plan

To create an effective project plan for our client engagement  we created a plan broken out by key phases: Planning, / Define, Discovery,  Research, Ideation, Wireframing, Prototyping, & Review / Documentation. From here we backed into critical tasks, key milestones, and activities (see below). We then leveraged Jira for daily task management. 

Client Discovery

About EduCompass

We collaborated with EduCompass' founder and CEO to understand the future of the educational planning tool. Today, the tool consists of a scope and sequence planner, unit planner and generators to create learning materials (see video overview below). In our first client discovery call, we discussed the redesign of the following tools to make them more AI and user-friendly. 

To effectively redesign these tools within the site, we conducted a heuristic analysis. The following shows the key insights pulled from this analysis. 

Heuristic Overview

Research

Interviews

EduCompass has two key sets of stakeholders; educators and educational leaders. Because of this, we interviewed both types of individuals. The following shows the breakdown of interviewees and some questions that we asked our users. 

8.png
9.png

Research Synthesis

Affinity Map Themes

We asked respondents a series of questions related to their educational planning process and their sentiments towards AI. We found that teachers are concerned about the misuse of AI by students and recognize that there would be a lot of teacher training required to implement this technology effectively. Teachers are also struggle to ensure their plans are aligned to state standards and that all students support needs are met (see below for more information on these key themes). 

10.png

Our user interview insights showed us that user needs and classroom preferences varied based on the teacher's level of experience. Where younger teachers were more willing to adopt AI and welcome it into the classroom, more experienced teachers were more apprehensive about it being used in the classroom. To represent these two types of individuals, we created Jordana & Alex. 

11.png

Jordana's Problem Statement: 
Jordana needs an easier way to plan her curriculum and ensure that it meets state standards because creating a new one takes time and standards are complex and always changing.

13.png

Alex's Problem Statement: Alex needs an intuitive user interface and targeted training materials because he has a harder time learning how to navigate through new educational platforms / tools.

Ideation

Dashboard, Student Portal, Scope & Sequence Tool & Unit Planner

During our initial sessions with our client, we identified that the following items were in scope:

  • Creation of a dashboard style home page

  • Incorporation of AI throughout the educational planning process

  • Redesign of unit planner and scope & sequence tool

  •  Creation of a student portal

​

With the above prompts in mind, we conducted a series of design studio sessions where we rapidly sketched our ideas for different prompts related to the Educompass platform. Our first design studio session was dedicated to ideation around a dashboard for Educompass.

​

Dashboard

For the EduCompass dashboard, we knew that there were three components that needed to be included in our design:

1. An AI component

2. Schedule component

3. Progress tracker.

 

The images below show early iterations of our dashboard design with these components incorporated: 

Educompass Final Presentation.png

Student Portal

From our user research, we found that a major pain-point of educators today is around coordinating support for students that need it. We saw this an area of opportunity to develop a student portal, where teachers could more effectively intervene in a student's learning experience when necessary. 

Student Page.png
Student Profile.png

Scope & Sequence Tool

To make the scope and sequence tool more conducive for AI intervention, we knew that the following components needed to be included:

1. A unit overview

2. Breakdown of standards

3. GAANT chart.

 

With these three components, our goal was to create a simple snapshot into  an educator's curriculum. 

38.png

Unit Planner

For the unit planner, we got feedback from users during our interviews that the current unit planner page was a bit crowded and overwhelming. We redesigned the tool with this in mind below: 

42.png

Ideation

Color Palette & Branding

We took some time to experiment with the current color palette for EduCompass: as shown on the bottom left. The  current color palette reflected things associated with status: Green = good, go, easy,  and yellow = slow, caution. We knew that in our redesign, we wanted to stay away from these associations and, instead, focus on color associations that enhanced the brand. The color palette below to the right, identified by the number 1, has variations of green and blue that signify things like growth, professionalism and trust.

​

We also wanted a name the reflected the cutting-edge technology that is at the core of EduCompass. So, we looked at the branding of other educational planning tools, like Magic School AI and Eduaide AI and came up with, EDUAI. To us, this name / branding highlights the cutting edge nature of EduCompass and  the future AI technology. 

45.png

Wireframing

Dashboard, Student Portal, Scope & Sequence Tool & Unit Planner

We leveraged the sketches created in ideation along with our new branding and color palette to develop wireframes for the dashboard and student portal. 

After we put the wireframes together, we connected with our client on our research insights and initial designs. The section below highlights the key points of this feedback: 

Client Feedback

Testing

Usability Testing & User Feedback

After receiving this feedback from the client, we incorporated these edits and increased the fidelity of our designs and put it in front of 5 educators for usability testing. We asked users to complete the following tasks within our platform.

​

  • Task 1 - Plan the curriculum for Quarter 3 using the scope and sequence tool.

  • Task 2 - Find information on the color-coding of the standards and find what the GA.3 standard is.

  • Task 3- Use the align-o-meter tool to see how well a unit is aligned to state standards.

  • Task 4- Add more information to the "Introduction to Fractions" lesson.

  • Task 5 - Find a student profile.

  • Task 6 - Create and assign a homework assignment for your class.

​

The following video shows the general sentiment of users towards the updated platform. 

As shown in the video, the feedback from our five users was generally positive. But, during usability testing we recognized two problem areas for users. In Task 1, users couldn't easily find the section where they were meant to go to plan a unit via the scope and sequence tool and , in Task 2, users couldn't figure out what the color-coding system meant. See the following videos for more insight into challenges users faced while trying to complete the first two usability tasks. 

Due to the difficulty that users had in finding the scope and sequence tool in the first task, we moved this tool to be grouped under the "Plan" category. Since this was a tool that was being used to plan unit materials, it made more sense under this category, rather than the "Create" category it was grouped under before (see below for dashboard change).

53.png

Because users were not easily able to decipher the color-coding system that was used for the standards within the scope and sequence tool in Task 2, our team decided that the color-coding system wasn't adding a ton of value to the user's experience. Because of this, we took out the color-coding system as evidenced below. 

56.png

Prototyping

High Fidelity Figma Prototype

The following shows a video of our final prototype. In the video, we walk through the following tasks: 

​

  • Creating a unit using the scope & sequence tool ​

  • Checking the alignment of the unit using the align-o-meter

  • Adding one of the suggested standards based off of alignment score

  • Building out the "Introduction to Fractions" unit with AI tool

  • Viewing full "Introduction to Fractions" unit

  • Viewing a student, Maya's, profile

  • Viewing the full class 

  • Generating and assigning homework

  • Posting homework assignment to Google Classroom

bottom of page