REBECCA TORVIK
UX/UI Bootcamp
The George Washington University
Nonprofit
Dashboard Redesign
Case Study:
Every Child Ready
Project Overview
Team
Rebecca, Eddie, Sam, Alex
Duration
4 weeks (2020)
Tools Used
Sketch, InVision, Miro, Figma
Summary
Every Child Ready (ECR) is a learning instructional model for PreK students developed by the nonprofit, AppleTree Institute. One of our group members worked at the nonprofit which gave us access to real users to interview and the ability to take business needs and goals into account. The Every Child Ready teaching platform provides a full curriculum in addition to tracking the progress of PreK students. Teachers want to access the curriculum and lessons provided to them. To do this job, a teacher will utilize their lesson plan dashboard. The aim of this project is to address the user’s need for a teaching platform that is responsive, intuitive, and usable.
Our Roles
The research, definition, and ideation phase was a collaborative effort, while the UI designs and testing were completed individually. However, our team would share our individual designs and testing results with the group as we progressed and bounce off ideas with one another.
The Process
HiFi Prototype
LoFi
Prototyping
& Testing
Ideation
Definition
Research
Current Site
One of the first tasks our group worked on to tackle the redesign was completing a heuristic evaluation of AppleTree's Every Child Ready teaching platform. Our primary concerns included the following:
APPEARANCE
-
unclear iconography, not responsive on mobile, not AAA compliant colors
CONENT
-
very content-heavy, use of jargon makes onboarding difficult
NAVIGATION
-
hard to recognize what is home
FUNCTIONALITY
-
lack of confirmation for actions, broken links
Taking a closer look, we obs the Every Child Ready Platform can only be accessed by going to platform.everychildready.org and logging in.
There is an unusual amount of white space following the footer
The logo was not a link to the AppleTree site. The AppleTree website also does not offer the ability to login to the dashboard from its site. Additionally, the AppleTree website on the desktop could benefit from a couple of improvements. The mobile version of the website, on the other hand, is not optimized for the smaller screen.
The search and language selection seems disproportionate to the rest of the site
Poor contrast of text on image
Same red color buttons cause congestion and lack of differentiation
Text cut off
Image zoomed in, not responsive
Buttons not aligned
We have observed that the current site, both on mobile and web have limitations within the design and lacks key resources. The layout is confusing and the use of jargon makes navigation difficult.
Poor alignment
To much info before schedule
Weekly view requires scroll, difficult to read
Poor Contrast
Planning mode is chunky and feels misplaced
UX Interviews
To determine the needs and wants of users, we interviewed 6 participants who were faculty, teachers, and TA's that regularly use the platform.
-
Most teachers use the desktop site for planning
-
The mobile version difficult to use in the middle of a lesson
-
Teachers are finding other resources/platforms to help with communications to parents
-
Users who are not provided with desktops have some issues with the mobile version
Affinity Diagram
We used an affinity diagram to organize our research. We separated our data into the categories - teaching background, mobile use, MISC, other resources used, what they use the platform for, likes about the platform, wishes the platform would have.
-m.jpg)
UX Survey
We received 24 survey responses from teachers and faculty currently using the platform in order to gain further insight into our user's pain points. Survey highlights included:
32%
Found updating the daily schedule difficult or very difficult
30%
Found moving students in the FSG app difficult or very difficult
26%
Found making a note/differentiating a lesson difficult or very difficult
Empathy Map
To better empathize with and understand our users, we created an empathy map. It gave us insight into what our user might be saying, thinking, doing, and feeling.
Dana Boston
39 years old
PreK Teacher
Married with 3 Kids
WHAT DO THEY SAY?
-
"I like clean platforms that also offer a lot of features"
-
"I’ve become used to the current platform but it was a struggle to learn it at first."
WHAT DO THEY THINK?
-
Constantly thinking about her student's needs and progress
-
Finding ways to improve herself as a teacher is always top of mind
WHAT DO THEY DO?
-
Gets to class early for last-minute preparation
-
Prints everything out
-
Uses sites like TeachersPayTeachers
WHAT DO THEY FEEL?
-
Has anxiety about creating last-minute lesson plans
-
Is stressed when having to learn technology
-
Feels proud when children learn and improve
PAINS
-
Taking multiple steps to perform simple tasks
-
Not being able to find the information
-
Struggles to find time to plan and enter grades
GAINS
-
Being able to have an exciting lesson for the kids
-
Save time when planning a lesson
Research
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.
We have observed that the current site, both on mobile and web, has limitations within the design and resources on the platform, which is causing teachers to spend more time planning and searching for external platforms.
How might we improve the site so that our teachers are able to follow the curriculum and complete all tasks quicker on desktop and mobile?
Feature Prioritization Matrix
We created a Feature Prioritization Matrix to determine the key features to focus on.
-
Mobile Responsive Design
-
The Schedule
-
Lesson Plans
-
Icons
HIGH PRIORITY, HIGH IMPACT FEATURES
A feature we found useful from our research but could not focus on because of time was the idea of a Parent Portal, which would allow teachers to communicate and share results with parents without having to leave the platform.
Definition
Storyboard
Competitive Analysis
While conducting our competitor analysis, we looked at other platforms used by teachers, like Canvas, and noticed a trend of icons and vertical navigation on the desktop. Every Child Ready also uses Canvas, so we wanted to have consistency.
As for mobile, a key feature we wanted to focus on was the schedule since that is the page teachers will be using the most. The obstacle we had was trying to make a calendar easy to navigate on a smaller device. To get ideas, we looked to Google Calendar since a majority of users we interviewed had mentioned using Google programs because of their simplicity.
Ideation
Canvas
Google Calendar
Unlike the current platform, our user flow begins at the AppleTree site and gives the option to sign in as a teacher, parent, or leader. We focused on the teacher's dashboard and the goal of opening a detailed lesson plan.
User Flow
Low-Fidelity Prototype
Guerrilla Testing
I tested 5 individuals that have experience with teaching platforms, as well as peers in not in the education field. Although I was not able to test the real users of the platform due to the limited time allocated for this project, the participants I tested still provided me with valuable data that I used to improve the design.
GOALS / OBJECTIVE
I wanted to determine how visually appealing, usable, and accessible our designs were with a focus on mobile responsiveness. I was specifically interested in determining if the monthly view and color assignment made sense. Participants were tasked with assigning a lesson to a teacher and viewing their lesson plan.
TEST RESULTS
Language of Edit button confusing, the feature itself may be unnecessary on mobile
Too much information presented, somewhat cluttered
Poor placement of 3 dots, purpose is also confusing
Missing teacher assignment
Lesson too long, could be broken up into categories
Navigation menu is missing pacing guide
Don't know you can change to month or day
Too much information, users don't understand colors and edit button is misplaced and unclear
Low-Fidelity Prototyping & Testing
Desktop
For the desktop, I aimed to make the dashboard have a more minimalistic and modern look. This is illustrated through the use of a vertical navigation menu and by utilizing white space. Based on our user testing, I also decided to move the location of the teacher assignments to within the schedule itself and change the language of the button from "edit" to "assign".
Mobile
For both the mobile and the desktop, we decided to start our user flow at the home page of Every Child Ready's parent site, AppleTree. Logging in here will allow users access to additional information and demonstrates the potential for a parent portal.
Our user research signified that most users accessing the platform on mobile devices are doing so to find information about a lesson. The mobile version combines the daily and weekly views to not overwhelm users. The monthly view to be accessed with one click. Users can also jump from week-to-week or month-to-month using the arrow buttons. Collapsing the schedule menu into a dropdown was necessary on the mobile version to conserve space. Additionally, I removed the teacher assignment feature from the home page on the mobile version because planning is not a high priority when users are accessing the platform on their phones. However, users can still plan and assign teachers within individual lessons. The lesson pages are broken down into 3 submenus to help reduce the amount of information presented at once, allowing teachers to find what they need seamlessly.
High-Fidelity Prototyping
Final Thoughts
Next Steps
-
Test prototype with real users
-
Change the language of error messages and buttons
-
Update the way teachers can customize the daily scheduling tool
-
Update the FSG App to have similar color scheme and looks to the platform
-
Update the FSG App to provide easier ways to input data
-
Would like to create a Parent Portal and Leader Dashboard
What I Learned
-
Collaborative working provided the team the ability to find solutions to problems and then share as a group to help advance our designs
-
A huge obstacle was that there were so many tasks to be worked on but we had to prioritize which of the many features we wanted to focus on
Other Work
