matt ropel - Teach.org

The TEACH.org Checklist 2.0 was the capstone project from the School of Visual Concepts UX certification program. It acts as a comprehensive test of all the lessons and classes before it. It allowed me to apply all aspects of UX design with a real client, solving a real problem. Along with two other designers, we tackled uncovering the user’s needs through various research methods, creating recommendations, and acting on them with a new vision on TEACH’s Checklist.

Outcomes

Redesigned Checklist
New Compare Experience
Improved SUS score - 91.25

Roles

Lillian Szugyi - Project Lead
Jenn Hicks - Research Lead
Matt Ropel - Design Lead

Timeframe

Spring 2020

Background

About

For the project, our client was TEACH.org, a non-profit organization, which provides tools and services that help raise the image of teaching, reduce teacher shortage, and improve the quality and diversity of the new teacher supply. In short, to rebrand what it was to be a teacher. They used advertisement and outreach campaigns to identify and cultivate prospective teachers. Then once identified, TEACH converts those prospects into a new generation of teachers through various tools, reimbursements, and guidance to ease the path. It is in this phase that TEACH came to the school for help.

TEACH’s site has a lot of great ideas and tools but suffers from user engagement. Its primary product, the Application Checklist, aims to gather all the various requirements and information for schools and states into a centralized location and provide a walkthrough for the maze of applying for an Education Preparation Program (EPP). The problem, however, is that there is a significate drop for returning users. Between January and March 2020, TEACH saw a decrease of 85% of repeat sessions. People are starting a checklist but not returning to it. Are they abandoning the pursuit of teaching? Are they not seeing the value of TEACH and continuing the path on their own? How can TEACH increase engagement? These are some of the questions our group was to answer.

Goals

Coming into the project, TEACH had a precise vision of what they wanted from us. The Application Checklist is a source of pride for them. It’s their overreaching product, and they feel it’s vital for the organization. I don’t think there was a lot of interest in questioning whether the Checklist was the right solution or not. They wanted to improve upon it, not start over.

Ultimately, they wanted a Checklist that:

Increase user interaction
Integrate other tools they currently offer
Track how many users apply to a program
It made it fun, easy, and interactive for users

Users

TEACH’s summary of the target audience was “prospective teacher,” which they define as high schoolers, college students (both community and conventional four year), paraprofessionals (teacher aides), substitute teachers, and career changers. That’s a pretty vague audience and didn’t give us much to work with. When we conducted our interviews with current and former teachers, we gained a better picture of the audience’s beliefs.

Proficiency – Teachers get into the field because they feel that it’s something they can be good at or they have a skill that they are good and can give back.

Emotional connection – Almost all our user interviews had a favorite teacher story, a person that influenced their life in ways beyond simple academic. This led to a desire to make a difference to a new generation. To create personal relationships and watch the students grow up.

Intellectually stimulating – Every class of students is different, which is both challenging and satisfying. As one user in our interviews put it, “…you have to be constantly reinventing the way you’re doing things to respond to the particular group of students you have in front of you or the particular moment that we’re living in.”

Pragmatic reasons – There are often other reasons to become a teacher. These are personal or conditional connections that lead people into the teaching field.

Research

Competitive Analysis

Teach for America page showing compare experience

Teach for America empowers users with the ability to compare different programs

TurboTax steps users through the complicated process of taxes through a wizards

Classtag also uses wizards as well as engaging visual branding

We started our research by divide and conquering nine websites and products that were related or a direct competitor. The analysis gave us an idea of what the possibilities and risks are in this space. We noted our findings and shared them among ourselves. Ultimately what we felt there were several areas TEACH could improve.

Competitor websites have a way to compare different programs. Sites like Niche and Teach for America allow users to compare apples to apples of various products quickly.

Wizards work well on guiding users through a process. Classtag has a first-run wizard that eases new users through the process of setting up a virtual class.

The process of applying to a program could be more engaging. A site like TurboTax takes something like taxes and break form input into a pleasant experience .

Resources were well-integrated into competitor flows.

User Interviews

After completing our initial research, we wanted more information about the application process and the strategies that worked in managing it. We also wanted to build empath with the users and find out what motivates them. So, we conducted four user interviews with current and former teachers and then surveyed an additional 40 current and former teachers to validate our findings.

What we took away for this:

A lot of consideration went into choosing the right program for them.
Participants applied to several schools to make sure a program accepted them.
Participants thought the application process was long and confusing
Participants felt overwhelmed, juggling multiple school applications
To get through the process of applying to their program, all participants found value in talking with someone who could guide them.

Reframing the problem

By the end of the research, we had a lot of data and insights. Honestly, it felt very overwhelming. My natural inclination is to just jump into something and just start drawing. But without a tight focus, it could be very easy for the project to spiral of out scope. So, to help add focus to problem, as a group we created a series of How Might We statements. When we compared and analyzed, some common themes started to appear.

Students applying to educator programs feel overwhelmed by the complexity of the application process.
They aren't motivated to continue working on the application.
They have difficulty keeping track of all their application requirements.
They need support and encouragement from others familiar with the process to continue.

We workshopped these for a bit until we came to the main problem statement. Something we could start designing with.

How might we create a simple, engaging, and manageable process so that students can become teachers?

Ideation

Initial Sprint

Aimed with a direction, we felt we were ready to move into the design phase. Together we took stock of all that we knew about the problem and rapidly sketched out some ideas using the “Crazy 8” method. After eight sketches, each of us took one of our most promising ideas and filled out that direction as much detail as one could in 15 mins.

Together we discussed the commonalities between these directions and planned out what the second round of sketches should include.

Commonalities:

break into manageable chunks
persistent help

Likes:

seeing the actual steps progressing in the wizard

Sketch of breaking down information into small bits

User flow that breaks the amount of info into smaller bits that are more “manageable" groups.

Steps are broken into manageable sections that are represented through a map. Steps are broken down into chunks with resources at the bottom. Application process can be found in a dashboard.

Checklist progress is represented on the left side. Resources are found on the right. Each step in displayed through a wizard dialog.

Hero Moments

Moving into more detailed annotated sketches, I wanted to start framing the designs in hero moments. This story telling aspect allows the user flow to be explored organically.

Entry page - How do you get to the checklist? How does a user find a program?
Map of the steps - What would a wizard look like?
Individual page - What are the groups of information for a checklist? How would we arrange them?
Help system - How many way can we offer help at key moments? Some ideas: a chatbot, a persistent '?' icon, way to connect to a real teacher.
Dashboard - How should visually show the status of the checklists?

School Page

Concept 1

The idea behind this was all about comparing programs within a school. It also introduced having a snapshot of the program at the very top of the page.

Concept 2

This keeps the current tab navigation but adds the snapshot card and some of the layout changes from Concept 1

Sketch of comparing programs within a school

This concept focused on the idea of comparing programs within a school. I

Sketch of quality of life update to the school page

This concept was more of a "quality of life" update that restructured the current info to be more meaningful to the user. Information relating to the school was set to the side to so the details on the program could be the star.

Initial Comp

Initially we presented to the client this comp. The main feed back was that comparing programs was not realistic scenerio. Since the programs are usually based upon the highest level of education, it would be rare that anyone would compare programs within a school.

Using the client's Figma library I was able to quickly create high fidelity comps which allowed me to get quick actionable feedback from the client.

Dashboard

Concept 1

This concept elevated the most recent Checklist to the top of the fold. All Checklists are represented through cards. The profile pic and writing have been added to help make the dashboard feel more personal.

Concept 2

Similar to Concept 1 but loses the profile picture for more quick access to tools and profile management. The most recent card has also been replaced with a unique card showing the details of the next steps.

This concept not only included the checklist but also created a hierarchy of resources and tools. Most important resources are at the top, while the rest are below in a list.

This concept focues more on the next steps in a checklist. Resources are listed in a list without any real hierarchy.

Initial Comp

Early rounds of the design included the urgent card and section in the middle for deadline info and help tools. While visually pleasing, it was always a contentious area. It never felt quite right and underwent various options.

Client feedback was very positive, though they too were interest in what would be in the middle section.

Most urgent checklist at the top. This caused a lot of confusion with our testers. Below are some variations

The subtitle changed a bit but the idea was to show the most recent program at the top in a similar way that users see recent tv show on Netflix. Allow the user to quickly jump back in.

This idea stress major tasks that the user needs to do next

This direction is more staightforward with a list of next steps

The transition from sketch to high fidelity comp was straightforward, though many of the details on the top section needed to be worked out.

Checklist Wizard

Concept

The wizard starts with an intro page that broke all the steps into chunks with illustrations/icons. Each step would use a yes or no button instead of Checklist. There would also be a section on the right-hand side for resources. Finally, there would be a summary page showing the state of each chunk.

sketch of the start of the checklist wizard

All the steps are combined into managble chunks. Icons/Illustrations are used to to jump into the section.

Steps are represented with a yes/no dialog with resources on the right side.

At the end, users are able to see a summary of all the sets.

Initial Comp

Early comps kept a close line to the sketches. Client feedback was positive. The side bar for resources excited them to the possibilities.

high fidelity comp of the start of the wizard

Illustrations were existing assets. Final product would have new illustrations that fit with the clients visual direction.

high fidelity comp of the checklist task

Initially I used Yes/No buttons to move the user forward. I was worried that there would be some potential user confusion over that language so "Skip" was later use with a clearer prompt.

Intial summary didn't collapse the completed steps. Feedback was that it shold be collapsed for space.

Final

Picking A Program

In order to start a checklist, you need to pick a school. Users go through extensive research into the programs they pick. They need to weigh the options and compare programs. In our research, we found the only way for users to compare programs was to open several tabs or jump back and forth between pages. This is a missing piece to the experience that is solved with our solution.

EPP Explorer / Compare

The updated EPP Explorer largely leaves the current design along but updates the school cards and adds a compare experience.

School cards are broken apart into individual programs. Users pick the programs based upon their highest level of education.
Basic details are added to the card to give more information up front to the user.
By breaking up into individual programs, users can enter the compare interaction which will allow them to add up to four programs to compare.

Updated EPP Explorer page with Compare tool. This a new feature that solves users from opening multiple tabs in their browsers.

Here is how the old school card compares to the new.

Compare

New page for the site, the compare page empowers users with the data to understand some of the differences between two or more schools.

The is a new experience for TEACH. By allowing users to compare the programs in a apples-to-apple matter, it empowers users to make the right choice. It also builds good will with them on the product.

This got reenforced in our usability study where one participant commented.

…No school is going to compare themselves to another. It’s nice that this is an unbiased take for meP5

Clicking on the “Add Program” opens a modal window that allows users to add suggested programs or return to the Explorer.

Here is how the compare experience in action.

Movie clip from the prototype showing the user interaction

School

Our design includes navigation and snapshot of the program to act as a quality of life to the current design. It also adds requirements up front. One of our hypotheses on one of the reasons for the large drop off rate is users are starting checklist just to see the requirements of the program. By including it, users can make the right decision early in the process.

Updated School page improves the navigation and adds requirements upfront which could solve the checklist drop off rate.

Checklist Wizard

The meat of the project was transforming the current checklist into a more engaging and useful format. A wizard-like user flow that held the user by the hand was chosen for its ease of use and common user patterns.

This design

Provides time estimates for users to manage the time
Combines all the tasks into six manageable sections
Integrate resources into the various steps

Overview View displays all the steps into six steps. This creates a more approachable entry into the checklist.

Summary View allows users to see all the steps

Summary View allows advanced users to see all of the steps and engage them in whatever order they want.

At the top of each checklist lists all of the known important deadlines and the user’s relation to it. This informs the users not only the deadlines but also how long the process will work. I also include a radial pie chart to show the progress of the whole checklist.

The initial view users encounter is the overview view which lists the tasks grouped into 6 sections. The path seems to be linear at first, but advanced users can skip to the summary view to see all the tasks involved.

Sample of the main pages

Section Entry Page

Each section includes a list of all the task involved along with an estimate of the time involved. An icon is used to show which tasks will take longer than ten minutes.

Section Task Page

According to the client, only 10% of current users were using the checkboxes. The new version replaces that with an affirmative CTA button. Various resources are shown on the right side.

Section Summary Page

At the end of the section, users are greeted with a positive message and a list of the steps.

Incorporating resources for each task allows better user engagement with all of TEACH’s tools and products.

In this Task Page, a link to the Fee Reimbursment is presented next to a step that will require a fee for the users. The idea is to show relevant information for each task.

The resources breakdown into three types. This allows TEACH to incorporate various types of information into the task.

Primary Resources - This links to TEACH's various tools and products.

Secondary Resources - Minor resources that are not vital but helpful.

Blurb Resource - This allows users to see excerpts from guides and articles without leaving the page

Dashboard

The current implementation of the dashboard does not include the checklist which is a major missed opportunity. It breaks the user’s mental model for what a dashboard should be. This design fixes that.

Creates a personalized hub for the user
Important upcoming events are quickly avalilble
Progress and status of each checklist is easily understood

Dashboard is a persoanl one-stop hub for the users journey through appling to various schools and programs. Because it's going to be their "home" for several months, giving it some personalization helps make it theirs.

Outcomes

Usabilty

Early on the project, we came to the agreement that we need to stress on backing up our designs with as much data as possible. A pretty looking design can attempt to blanket over brash decisions. To keep the us honest, we put together an A/B test on the current site and prototype. We tested eight participants (4 baseline/4 prototype) who had previously applied to an education program in the past ten years. Task completion success rate, time on task, number of wrong clicks, and System Usability Scale (SUS) scores were the factors we measured to determine success.

Overall

14% increase in the SUS; from 80 to 91.25
Participants were able to easily compare two programs.
Participants commented positively on the time management resources.
Participants were able to find the resources quickly and easily
Participants thought the layout, application steps, and positive reinforcement in the checklist made the application process more manageable and enjoyable.

Client Feedback

Final project was presented to TEACH in a presentation that laid out the design and our process. The work was warmly received.

You all did an excellent job. We're already putting together some concrete next steps about how to bring your research and designs to life.Chief Product Officer, TEACH.org

Loved your designs – They were clean, modern and user friendly. The information on the pages/tiles and the workflow was very thoughtful. I am impressed with what you achieved in 10 weeks.Product Manager, TEACH.org

Reflections

The elephant in the room

The time frame for this whole project was during the Spring season of 2020. A time when there were massive restrictions in meeting in person due to the COVID virus. Everything was done remotely; the class, group meetings, user interviews, design sprints, and final presentation

By and large, we live in an age where technology has allowed us to work seamlessly remotely. It’s a double-sided sword, though, where we are easy to reach and always available (regardless of the time of day). There was some burn out but, thankfully the connection I had with my colleges helped ease into the remote work.

Lessons Learned

During this period, I was working a job during the day and working on this project at night. One of the things I’ve learned is that trust and connection with my team are the most important factors in a project’s success. There was a lot of back and forth, but I could always rely on them to get the work done and lighten the mode. It also helped that both of my teammates were excellent in their respective roles.

If I could redo it all again what would I do differently?

Our design was purposely conservative. The goal was to create something that was attenable for client using their existing system. It’s a flexible system that should allow it to be expanded but ultimately restricted to forcing users to the school’s pages to do the actual application. There are some API that could be used to connect TEACH with the schools. If I had more time, I would have liked to explore that direction more.