The Problem

We have observed that the current site for Every Child Ready, both on mobile and desktop, has limitations within the design and lacks in some key resources which causes teachers to spend extra time planning and searching for outside tools.

The Solution

We believe providing a unified, concise, and easy to navigate platform for teachers of Every Child Ready to prepare lesson plans, input data, and communicate with parents will reduce the stress and extra work teachers often experience throughout the school year.

The Team and My Roles

The team consisted of four UX/UI Designers from the UX/UI Bootcamp through The George Washington University. I acted as the Project Manager of the group and contributed with User Research, Wireframing, and User Testing.

The Current Site

We started by taking a look at the current site. One member of our team works for Every Child Ready and was able to give us access to the platform and walk us through the site.

The Interviews

We interviewed 5 current employees of Every Child Ready to figure the what/how/why of using the site. Three of the teachers were also able to show us a walkthrough of what they will usually do on the site.

Survey

There were many areas of the site we wanted to work on, but because of time limitations, we needed to prioritize a feature that was going to be beneficial for the teachers. We created a survey and sent it to approximately 300 users of the platform, with a response of about 30.

Empathy Map

We created an empathy map because we wanted to get in the mind of a teacher, thinking about what they are doing everyday, and what they are thinking and feeling while they complete these tasks.

Problem Statement

We believe providing a unified, concise, and easy to navigate platform for teachers of Every Child Ready to prepare lesson plans, input data, and communicate with parents will reduce the stress and extra work teachers often experience throughout the school year.

Every Child Ready was designed to set teachers up for success by providing accredited training for teachers, daily classroom lesson plans and corresponding student activities, in addition to tracking the progress of students. We have observed that the current site, both on mobile and web, have limitations within the design and resources on the platform, which is causing teachers to spend wasted time planning and searching for other platforms and resources. How might we improve the site so that the teachers are able to complete all tasks quicker and without having to go to other platforms?

Feature Prioritization

There were many features and pages we wanted to redesign, but because the assignment was for two weeks, we had to decide what to prioritize. We created a feature prioritization matrix to see what would we could get done in time that would benefit the users the most. This is what made us finally decide on focusing on the schedule page, especially for mobile.

Because we had to figure out what to prioritize, there were many elements that we did not get to work on, specifically the idea of a Parent Portal for teachers to be able to easily communicate with parents without having to change platforms.

Our UX Hypothesis

Given that our users are not able to easily navigate the Every Child Ready Platform on their mobile device to perform tasks such as being able to check daily schedules and upcoming needed materials, as well as making changes to their schedule. This causes users to sometimes pause their lesson or spend extra time having to access the desktop version.

We believe that a more responsive web design for the weekly and daily grid, as well as a more intuitive scheduling tool, will allow teachers to better utilize the platform at any given moment and will not interrupt their routine while teaching, minimizing their lesson planning efforts.

Story Board

Thinking of our user, we came up with a story board, mapping out a situation where they would be needing the site, and how our new design could make their life easier.

Competitor Analysis

Before we started sketching, we wanted to look at other sites and apps to see what the trends were. We wanted the platform to be intuitive for our users, so sticking to design patterns they are used to seeing would be beneficial.

For desktop, we looked at other platforms commonly used by teachers, like Blackboard and Canvas. The Every Child Ready site also links to Canvas, which was all the more reason we felt like we should incorporate it into the platform, so users were not having to learn multiple design layouts. We noticed the sidebar navigation was consistent with these sites.

On mobile, our biggest challenge was finding a way to design the schedule. The page contains a lot of information and features, so fitting it to a mobile screen was going to be difficult. We looked at Google Calendar to see how they are designed for mobile since Google was brought up in our user interviews as a site the teachers really liked because of its simple, intuitive design.

Low Fidelity Wireframes

With all the information we had gathered, we were ready to start sketching and designing. Using Adobe XD, I designed low fidelity wireframes. I started with the mobile wireframes since the mobile design was a bigger challenge because of the smaller screen.

For the mobile wireframes, we decided for users to only be able to see the schedule for one day of the week at a time, since seeing more than one was too overwhelming and unable to fit on the screen.

The main navigation was also only accessible through a hamburger on mobile, while having the sidebar navigation on desktop. The biggest challenge with going from mobile to desktop was figuring out where to put all the extra navigation for the planner page that was consistent with the mobile design. I did not want the users who are used to using one device having to search too much if they had to switch.

The Tests

We each had two users, as well as have our instructor who is familiar with Canvas, test our prototypes. For the test, I had users perform these tasks:

1. Log in

2. Access the planner

3. Assign a lesson to a teacher

4. View the lesson plan

5. Rate the lesson

From the testing I found that the users were not associating the “Edit” button with being able to assign the colors. Both went to click the lesson to try to assign the color from there.

Iterating

Taking the feedback from the usability testing, I knew I needed to make it clearer to users how to assign a lesson to a teacher, and my team had the same feedback. Originally we called it an “Edit” function which was confusing to users since it wasn’t clear that “Edit” would also mean “Assign.” I changed the button to say “Assign” as well as making it possible to edit the colors with each lesson because the initial reaction users had for assigning a lesson was clicking on the lesson, instead of the teacher.

The last step was to apply a style guide to the new design for a high fidelity prototype. I chose to stick to colors from the main AppleTree site, as well as the colors from the Every Child Ready logo.

Final Design

Overall, I am happy with the design my team and I were able to come up with. I think it solved the initial problem, though there are many areas that can improve.

Thoughts

Being able to collaborate provided us the ability to find solutions to problems and then share as a group to help advance our designs. A huge obstacle was the many tasks to potentially work on, but we had to prioritize a feature to focus on. As a team, we feel that we have updated the platform to have a professional feel to it that emulates other competitors like Canvas and Blackboard.

Working in a team and collaborating was our greatest strength while working on this project. Individually struggled to find the solutions to every problem, but by communicating with each other, we were able to combine our ideas to create the best outcome.

There were three main struggles with this project:

1. Prioritizing a feature to focus on

2. Fitting information on the mobile version

3. Designing a platform that I did not fully understand

Future Opportunities

The platform still has areas to grow. It was a shame we could not work on it more, but this leaves room for opportunities to come, such as:

1. Ensure that the platform is compatible on all devices, especially tablet

2. Change the language of error messages and buttons

3. Update the way teachers can customize the daily scheduling tool

4. Update the FSG App to have similar color scheme and looks to the platform

5. Update the FSG App to provide easier ways to input data

6. Would like to create a Parent Portal