Building a Place Just for Teachers
This was a website design I created with two other designers. The concept was originally to provide teachers and students with resources when we thought teachers were not teaching to all their students because in our minds we thought teachers wrote off certain kids who they deemed difficult. During this design though, we quickly learned it is not the teachers, but it is the lack of funding, budget, and resources. The project then became about designing a website for teachers in low socioeconomic school districts as a one-stop shop for teachers to gather all the resources they need to achieve a well-rounded learning experience for their students. They are able to gain access to downloadable lesson plans, free classroom supplies, sponsored online classes with our partners, an online forum to connect with other teachers and much more. This was a 10 week project, and between the three of us we split the responsibilities. In this project, I was a UX researcher and designer and a UI designer.
Problem
How might we create a website where teachers can easily gain access to the resources they need to teach and provide a better positive student experience?
Our High school teachers in low income neighborhoods are not provided with enough resources due to low budgets. If we can provide some solutions, it would help teachers provide a more positive experience to each student.
Goal
Our overall goal when creating this site was to provide a platform for teachers to be able to gain access to a variety of different resources that they may not have access to due to limited budgets. It was also to create a collaborative platform for teachers as an additional resource. We wanted to give them access to lesson plans, and classroom materials they may need for the school year.
Timeline
Empathize
We began by researching what we thought teachers and students needed; we thought for teachers it was more empathy, or more being able to connect with their students individually, and for students we thought resources. We needed to find our users, teachers, and be able to emphasize with them. We sent out a survey to teachers, and found out due to lack of budgets it is difficult for them to get the resources or training on empathy and individual needs. We then were able to put together an affinity map which helped in creating our personas, and empathy map. This would allow us to dive deeper and find out how to really help them.
Some Survey Questions
-
Is it easy to get resources you need at your school to teach? Why or why not?
-
What resources are most impactful to you?
-
How reasonable is the teaching requirements at your school? Can you explain?
-
How well supported do you feel from administrators, other teachers, and the parents?
-
How much financial assistance does this school provide you with for professional growth opportunities? Can you explain?
Survey Findings
-
It's hard to get funding for materials especially in the lower socioeconomic school districts, or in Title 1 schools. The lower the property taxes the less funding the school gets.
-
Technology is most impactful, but due to low funding teachers cannot get additional training in the technology that keeps changing.
-
The teaching requirements in lower-income school districts are very demanding. They are short staffed, have high student to teacher ratio, are limited in resources and supplies for students and staff.
-
Teachers often have to buy their own supplies which takes time. It takes paperwork, documentation/data, and a lot of justification to get what they need.
-
While they feel they are supported mainly by other teachers, and half the time by the parents, they rarely feel supported by the administrative staff.
-
Teachers do not get compensated well enough.
Affinity Map
After we received first hand feedback from teachers, we took that research along with all the secondary research we did and created an Affinity Map. We sorted our information and put sticky notes together with each other. After the notes were sorted, we were able to give all the groups a name for their category. The category names after grouping the notes together were as follows: Budget and Income, Psychology of Teaching, Technology, Standardized Testing, Resources, and Behavioral/Connecting. Once all the information was sorted, and categorized we were then able to focus on what we could do to build a site to help teachers. We found mainly that the low socioeconomic school districts do not have enough of a budget and it is hard for them to get supplies and to keep up with demands of the ever changing technology. We also learned that it can be hard for them to get additional training to help or teach those kids that may need some extra attention or have a learning disability, and sometimes the teachers need help planning how to teach to those students. Those were the problems.
Personas
With all of our primary, and secondary research we were able to make three different personas of our users. We made one main persona, Adele who we used for our empathy map and our user journey. Then we made two additional personas to remind us not all our users are exactly the same, and we need to keep that in mind when building our product. We would always refer back to our personas when in the ideating and prototyping phase.
Empathy Map
We used our persona Adele, to create an empathy map. We wanted to get a better understanding of what Adele Says, Does, Thinks, and Feels. This would give us a better understanding of our user and allow us to emphasize with them to build the best product we can.
Define
Now we understood our users better. We now knew what we initially thought was wrong. teachers needed more. We began to dive deeper and look to see if there were any sites already giving teachers all the help they needed. Was there a site to help teachers get additional training, help them plan, and get them classroom supplies at little or no cost to them? We started with a competitive analysis, and had our Persona, Adele take a journey through one of the sites. We could note her pain points, frustrations, and also what went well. This would help us to build a better site for our users.
Competitive Analysis
Now having a better understanding of our users and being able to emphasize with them we could really define the problems. We wondered if there were any other websites to help teachers get additional training and/or classroom supplies for little or no cost to them. We found two sites who were going in that direction, Adopt a Classroom and FuelEd. Adopt a Classroom is a site where teachers and schools can register and then people can either donate money either in general or to a specific classroom or teacher. FuelEd is a site where they offer programs such as empathy training for teachers to be able to better connect with their students. Both of these sites had strengths and weaknesses.
Journey Map
Upon finding these sites, we took Adele on a user journey through FuelEd to see what her frustrations with the site were, and if she could can complete her task. Doing this would help us build a better product so we could either avoid her pain points and frustrations or make them better, such as giving more information about programs and pricing. It also would let us build on the things she found to be great and helpful of the site, such as getting teachers excited and wanting to be a returning user.
Task Flows
Once we had all of our information and research we decided we needed to focus on how a user such as Adele would navigate our site. What were the main tasks we wanted to focus on and how would she go about doing that. With all of our research and learning how hard it is for teachers to get supplies and have time to create creative lesson plans that could reach a variety of students we decided to put our focus there on helping them get classroom materials and lesson plans. We created task flows or aka happy paths for these two; how a user would get from the home page to a lesson plan, and how the user would get from the home page to the classroom materials. This lets us know what screens we would need to create when we went into the design phase.
User Flows
After creating our task flows, we created user flows to see the different ways our users could get around and accomplish the tasks. We focused on how a user would go about downloading a lesson plan, and how they would go about getting classroom supplies they needed. For either the user needs to have an account, and be signed in. For the lesson plans, they will be able to automatically download free lesson plans once they have an account. They can get there by searching, or clicking on the link, or going to the resource page. For the classroom supplies, a user can get there once signed in. Once they have an account if they want free supplies they will have to qualify first. If they have already qualified they can navigate through their account settings or their resource page. If they have not qualified they would need to fill out a form. However, if the account user does not want to qualify and just wants to shop they would have that option as well, by navigating the same way.
Ideating
Once our initial research was done, and we had our ux deliverables we could start wireframing. We needed to keep our users like Adele in mind with her goals, frustrations, what she thought, says, feels, and does, and her journey. We needed to keep our task flows and user flows in mind as well so that we knew what pages needed to be included and how the user would get through the site. We first started with our own individual sketching. After sketching, the three of us came together to create low fidelity wireframes in bringing in our own ideas and creations. After researching and creating together a bot we each individually would design our own high fidelity screens and prototypes.
Sketches
I first started creating with a pencil and paper. I sketched out for Homepage, Resources, and Qualifying for Supplies. These sketches let me take a quick moment to think about how things should be laid out and what should be included
Wireframing
After sketching some ideas, my team came back together to share our ideas, and created low fidelity wireframes in Figma. We took some from everyone to create pages that were clean, and have a good flow. After we created our wireframes we each did our own usability testing with them before creating high fidelity to see if our pages were usable and made sense to our users.
Usability Testing
With our wireframes completed, each team member conducted our own interviews for usability. We assumed our site was accessible, easy to navigate, and that users would be able to fill out all forms quickly and become repeat users. The testing helped us to identify the biggest pain points and frustrations our users would face while they navigate through our site. The testing also allowed us to gain constructive feedback on the main features they like and didn't like about the overall product. We interviewed four users, but because of the fast deadline only two of the four users were in low income school districts. We first asked them some general questions about being a teacher, and then had them first go through signing up and downloading a lesson plan. We then had them go through and try qualifying and the receiving classroom materials.
Usability Testing Findings
-
Users wanted an account page and see how they would navigate through the site through their account page.
-
Users wanted mockups of what the lesson plans would look like before downloading.
-
Users said they would like reviews and or comments about the lesson plans, and specifically from local teachers of how it worked, and if the lesson plan was successful.
-
Users suggested re-ordering the filters on the downloadable lessons plans.
-
Users struggle to find the continue shopping button. Users would like it to be in a more viable spot.
-
Users felt more comfortable providing their school address for the planner to be shipped to versus their home address.
-
Users felt that the forms were secure and trustworthy.
-
Users suggested adding a live chat option for questions about shipping or delivery questions.
-
Users liked the overall simplicity and clean look to the site.
-
Users said it was easy to navigate as a whole.
-
Users mentioned that the layout is very intuitive and feels familiar.
Adding to the Wireframes
With our users' feedback we went back and added an account page and a chat wireframe. We took notes on all the feedback and suggestions so that later we could implement the most important ones in our final designs.
Designing
Now with all of our research, and wireframes, and testing we could start to put together a moodboard and a style tile before we each individually did our own high fidelity designs and prototypes. We created a moodboard to create the overall feel. What emotions did we want users feel? We then created a style tile to keep everything cohesive and consistent.
Moodboard
We created a moodboard four ourselves. We wanted to have the feeling that our product was an inviting and trustworthy space. We wanted to show elegance, and simplicity with strong serif and san serif fonts and rich colors to further enhance our overall brand vision.
Style Tile
We created a style tile to always refer back to when creating. Another team member created the logo that would stand for our brand, My Class. With the typography we wanted to pair a strong and beautiful serif with a bold and and sophisticated sans serif font. The typeface should be easy and legible. The color palette creates a unique energy for the brand. Green, cream, and dark grey would be our primary colors. We then added accent colors of burnt orange, deep yellow, and pale sea foam. The colors are trusting and calming. They are sophisticated, and yet create an invitation to experiment. We included our main components. The elements are clean and classic. The buttons would remain with the green to keep on brand. We included different states when needed to be cohesive.
High Fidelity
After creating our wireframes, moodboard, and style tile together, each team member created their own high fidelity screen mockups and prototypes. I wanted to keep the site simple and minimalist, letting the user easily being able to navigate through the site as it was stated in our usability testing of something users appreciated. I kept the colors to a minimal as to not overload the user and kept the wording short and simple so that the user could read and find quickly what they need and not spend all their time reading.
Conclusion
I have learned a lot from this project. I first learned that you can not have pre biases. You need to do the research to figure out what the actual problem is, and what solution is needed. This was a project that was both individual and team work. In a team, it was important to put ego aside and make compromises. It was great to have a team to bounce ideas off of, and put our ideas together. I learned how to communicate and really work with others. Because our compromises and communicative skills we worked well in all phases, from research to the start of the design. Individually, I learned how color, typography, negative space, and the shape of elements in a design can create trust and be simple and elegant.
If there were more time for this project, we could have found more users who fit within our personas to create a design more for the user we were designing for. I would have also gone through and done more flows to create a whole site.