Duration: 4 weeks | Individual Project

Role: Product Designer | Mobile Application Design

Background

Substantial Classroom is a non-profit organization that provides a platform for school teachers to communicate with substitute teachers. Currently, Substantial Classroom serves 12 schools and 332 users across the united states. During this 4-week project, I work individually to design a mobile application for substitute teachers to enhance their teaching experience. The final prototype is highly prized by the client.

Define Problem

Problem

Once school teachers know they need substitute teacher to help them sometime in the future, they write class/students information and class schedule on a web form. These information will be reformatted as a PDF and printed for substitute teacher on the teaching day. 

During the initial discussion, Substantial Classroom requests me to design a mobile application for substitute teachers. The main purpose of the application is for substitute teachers easily access PDF information. The mobile application serves as an add-on to the original PDF. Besides, with the benefit of the mobile version, sub teachers can access the study plan before the teaching day.

In order to fully understand the purpose of the application, I started analysing the current design. The current PDF provides useful information such as parking, school contacts information and class schedule. However, it is lengthy and text-heavy. Moreover, sub teachers only receive the PDF on the teaching day. They don’t have enough time to get familiar with schools and prepare for the class. 

Objective

Through reorganizing useful information and reducing the text-heavy visual to design a mobile application that help substitute teacher better prepare for classes and easily find out necessary school information.

Target Users

Primary school substitute teachers who have basic knowledge of smartphone.

Research and Analysis

Current Design Analysis:

I analyzed the current PDF structure. It contains 5 main sections:

User Interviews and Insights:

I also conducted user interviews to better understand common pain points that substitute teachers have and the problems they encountered when they use the above mentioned PDF.

Insights Summary:

1. Unfamiliar Environment

   The most challenging thing to sub teacher is the unfamiliar environment they need to face when they teach in a new school. They don’t know about students and other teachers. They don’t know where to park their cars. One interviewee shared with us that he once spent 20 minutes to find out the entrance of the school.

2. Unclear Expectations and Communications:

   Lots of substitute teachers mentioned that clear expectations from the school teachers will help them a lot in teaching the class. Moreover, knowing who can help you, who are the students that required extra help are super useful to substitute teachers.

3. Limited Preparation Time

   As substitute teachers only receive the PDF file on the teaching day, they only have limited time to prepare for the class.

4. Text-heavy Lengthy PDF:

   The PDF contains useful information. However, text may not be the best way to represent all these information. For example: in the original design, it shows “Teacher’s lounge” is at room 110 on the first floor of the Great Hall in text. This is a useful information to the substitute teacher, however, the text description may still cost sub teacher a lot of time to figure out where is the “Teacher’s Lounge”.

Design & Iteration

Ideation

Throughout my design, I hope to achieve the following design objectives:

• Present information more interactively

• Better visual information display

• Reduce lengthy and heavy text format; Keep the important and necessary information

In client's original idea, substitute teacher inputs an access code to access class information PDF. In this case, if a substitute teacher teaches different classes, she/he needs to use different access code to access each class information. I suggest the client to use the membership feature which allows substitute teachers to login and access all the classes details under their profiles. Client loves this idea. Thus, I decide to provide code access option and login option for substitute teacher to access teaching information.

The biggest challenge I encountered in this project is information reorganization. In the initial draft, I tried to keep the PDF format in the mobile application as client has no objection to this idea, however, considering the limitation of mobile phone screen size, I decided to push myself harder and to reorganize PDF information in a more visual way. There are different ways to reorganize and display these information, I employed usability testing and design critiques to shape my ideas.

Iterations:

Feedbacks:

• In the first row, the initial design 1 displays all the information, however, on user’s mobile phone, it’s not easy to spot the most important information clearly. Design 2 has clear information structure.

• In the second row: icon in the design helps to illustrate the “Lounge” functionality. Design 1 contains a lot of information, some of them are not critical. Design 3 highlights the room number which provide a clear visual cue for users.

Feedback:

• The initial Bottom Navigation has 4 destinations. During design critique and usability testing, I received feedback: wording in the bottom navigation is confusing. For example: school map is part of school info. Teaching plan is also part of school info, Why there are 3 separate destinations at the bottom?

• In the initial design, I planned to put text information such as the location and facilities of the teacher’s lounge under school info destination. In the design 2, I decided to combine the text information with the map visual design and eliminate those unnecessary information. Thus, I change the bottom navigation to 3 destination.

Final Design & Rational

After all the research and feedback, these are the final designs.

Design System

Login / Access

I decided to provide 2 login options:

Code access: for one time substitute teachers.

Login: for frequent substitute teachers.

Search bar allows users to search for school/class name. It provides an easy way to access school/class information, especially for users who are substitute teachers for multiple, different schools.

School Selection

Substitute teacher can choose school using school list or calendar view.

School List: The list contains all the schools that the substitute teacher is going to teach. It starts from the current month, substitute teachers are able to scroll down the list for schools they are going to teach in the future months. As most of the substitute teachers receive their teaching tasks only several days or weeks before the actual teaching day, the school list should not be very long. Thus, I exclude search function for this page. (Sub teachers should be able to find the school easily)

Calendar View: The dot under the number indicates there are teaching plans on that day. If users click on the date with dot, they are able to see the plan overview.

This feature provides substitute teacher an easy way to manage their teaching schedules. Besides, they can also prepare the class in advance.

Contacts

Once users select school and class, they are directed to the main page of the application. I reorganized the PDF information in to 3 main bottom navigation destinations: Teaching info, Map, Contacts. 

Contacts destination provides substitute teacher a direct and easy way to connect to school administrators (Similar to Getting Help in the original PDF). As substitute teachers are using their phone, I provide 1) the direct call button on the page and 2) call from school phone option.

Teaching Info

For the Logistic, Class Rules, Class & Students and Lesson Plan these original PDF sections, I reorganized them under 2 sections of Teaching Info destination. 

• Classroom Info. This contains logistic, class rules and class & students details. These are specific rules that substitute teachers should know and can make quick reference from. These important information provides substitute teacher a better understanding of school teacher’s expectations. I included small visual icon in front of each rule’s title to illustrate the categories and to make the information more approachable.

• For lesson plan, I changed it to Class Schedule. Instead of full text descriptions, I chose to present the information with the overall schedule view and each section detailed view. The overall schedule provides substitute teacher a general flow of the school day. I used 3 different colors to represent the break, teaching time and logistic (start and closing). Users can click on each time period to explore the detailed instructions.

Interactive Map

I chose to use an interactive map to help substitute teacher get familiar with the school. As mentioned previously, unfamiliar environment is one of the biggest challenges to substitute teacher. Interactive map provides them a direct and visual way to figure out the location of the places. I also listed some key locations that users can easily refer to.

Design Outcome

Thank you so much for doing so much great work on this design!  The classroom information section looks much easier to use and I think it will really help teachers. I love the Logistics, Class Rules and Student/Class Details Screen.

The app also looks amazing!  It looks very easy to use and very clear.  The calendar is very clear and will help substitutes maneuver through their schedules and get important information about the schools they will work in before they get there.  The map looks great as well. Very great work!

— Holen Robie, SubPlans Manager (Client)

Reflection

During the initial discussion with clients, they only have a very brief idea of developing a mobile application for substitute teachers. They insist the basic content of the application is based on the original PDF, However, they don’t have a very clear structure of the application. These provide me a lot of freedom but also a lot of challenges as well. I spent extra time for user interviews to figure out substitute teachers’ needs. Another big challenge for me is information reorganization. Although PDF contains lots of important information for users, It is worth thinking about the best way to present these information on mobile phone. Through user interviews, I had better understanding of users pain points. From design critique, usability testing and my product analysis, I continue to refine my solutions to meet client requirements and solve substitute teacher’s problem. The final solution provides an interactive way for substitute teachers to get familiar with schools, better understand school teacher’s expectations and get prepared for class. 

I also learned that, don’t be afraid of making suggestions to clients. My previous product analysis skills and experience and fresh perspectives help me make a lot of good suggestions to the client. I am glad that the client said: “You have given us so many ideas about where we would like to go next with an app!”