Connect 2 Classrooms
I was tasked to create a UX Design a solution for donating to a classroom. There are a few immediate ways that I came up with that this can happen. Donating monetary funds, donating supplies and donating time.
My group and I researched existing products that are available for the classroom. Many that I had found focus on collecting funds for a big-ticket item. Some were for field trips, technology for the classroom or supplies not provided by the school. “Back to School Shopping Lists” differ by teacher. Each retailer has their own suggested list that they make available when you walk into the store. I could see where this could use some improvement. What if the list was digital and live, always up to date? What if it was sharable and accessible by the community? I thought focusing on these lists was the best first step to take. I began to find many teachers who created an Amazon Wishlist but didn’t have common place to share it. We need a directory!
As we came back together with our research, we found many of the same websites that exist that teachers use to collect donations. As we discussed our findings, we began talking about volunteering. We wanted to make a digital sign up sheet. Parents would be able to see and fill requests the teacher has to help in the classroom. We also thought it would be nice to include a calendar. That would show what commitments you have made and the available opportunities. That snowballed into getting reminders and messages about what you have signed up for. The “what if” train was running rampant.
What we Found
We shared a survey that asked users if they were a K-6 teacher, parent, both or neither. Roughly 47% were parents, 23% were educators and 11% fit both categories. Overall, we received feedback from 53 individuals. I was really happy with that level of participation. We designed our questionnaire to ask questions that fit within their demographic.
We asked teachers if they preferred a donation of supplies or funds. Their answers told us that they would prefer the supplies donated. Oddly, half of them don’t even make a request for donations every year. Half of the teachers who answered our survey admitted that they send between $100–500 of their own funds to run their classrooms. Four answered with $500–1,000 and one spent over $1,000 in one school year. Parents are most often prompted to donate when they receive an email or letter. They also tend to donate (either supplies or money) at least annually, if not quarterly.
We realized that a website like this would have two user bases, a parent side and a teacher/administrator side. We knew that we wouldn’t have time to make both. We couldn’t decide which user we wanted to focus on at this point in development. As we went forward, it was clear many features would have very minor differences between the two. Until we made up our minds, we went ahead and created 2 personas, a teacher and a parent.
We tried wireframes in a few ways, we each did a sketch of the same page and talked merged our favorite aspects. Our program was held when COVID restrictions required distance learning. Working remotely made it difficult to collaborate in some ways. We had to upload photos of our drawings and we felt like it took a long time. After trying that, I used my webcam as a document camera so that my group could see what I was working on. I put the webcam in my mouth and tilted it so that they could see what I was drawing. It didn’t work so well. I couldn’t talk or anything. The next day, I took a different approach. I connected my iPad to my computer and shared that screen with them. We were able to look at our notes and see my what I was drawing at the same time. It was a decent way to make our sketches.
Getting into Sketch
We were ready to wireframe in sketch. I shared a toolbar that we outlined so that we could design around it. We decided on a teacher facing portal and split up the screens to design.
I found it was a challenge to design a balance between upgrading a drawing yet not including color or copy in my wireframes. As the process moved forward, it was nice not having to think about so many details. Making notes of the detail I wanted to add in later in the process helped.
When I did user testing, I asked them to explain what they saw and what they expected from that page. Some were appreciative of what we included. Others had expressed how they wanted the page to perform. Some were specific feature suggestions, others were general feedback. One teacher was willing to show me their account of an existing program. I found it helpful to look at their account and see what features they included. It was quite insightful and helped give some direction moving forward.
When I started with my high-fidelity designs, I resolved to find a way to focus on the donation side of the app. I felt like we strayed from the original task given. I focussed on creating the database of classrooms that were in need of donations.
The first thing I wanted to design was menu that would appear on many of the pages. This would create a base to design around. My first attempt was to mimic file folders vertically on the side of the pages. Users during testing commented that they wouldn’t have known the meaning of some of the icons without a label. I knew they needed labels, though I didn’t like vertical text. I decided to back-burner the menu for now. I started implementing the suggestions I received during interviews on the accounts profile page. I also started getting my hands dirty on the pages the other two in my group designed. It began come together, creating my own uniform look in a more detailed wireframe. Before I got too deep, I decided that I needed to find a color palate. I wanted to be able define space with color.
When I think of classroom, a green chalkboard comes to mind. I shuffled through colors, finding a green I liked. I then found one color at a time, adding complimentary colors. With my colors locked in, I was able to see the site come together and have some personality. It took some time to apply a style across all pages. I definitely didn’t understand the importance of using symbols and text styling in Sketch. If I had put a little effort into setting it up, it would have been well worth my time. When I transitioned from a charcoal black to pure black for text, it took some time to fix everything. Applying styles would have made it easier to update. Even then, I didn’t learn from my mistake.
I had so many thoughts about my project and even dreamed about it. I felt so committed that when my ideas were critiqued, my immediate response was to defend them. I am still struggling to be more open to suggestions. One thing that was the hardest for me was my contacts page. It was designed so that the information was compact and remained confidential. I didn’t think it was good for students to see this information if the teacher was looking at this page. As I had testers look at it, the confidentiality was more important to me than other users. It took some time to accept that input. I eventually added the information and spread it out and now know that my product is better for it.
Some features included in the wireframe received minimal interest that had more detail. Others that had less detail in the wireframe left testers wanting more. An example of this is I decided to simplify the Forms page and renamed it Surveys for clarification.
Users also wanted more functionality in the calendar. Testers wanted to see more than volunteer opportunities on the schedule. Many commented it would be nice to see school and classroom activities. I was able to add a color code so that events could be identified at a glance.
When I started making the working template, I saw an opportunity to make some in page animations to show real use functionality. I like being able to see how the buttons work when they don’t take you to another page.
The End of the Day
There is a lot that I learned doing this project. Learning how to use Sketch and use it in an efficient way. Many other things I have done in the past, I have either been a leader or being lead. Having an equal voice had some challenges. Collaboration can take time to get in a groove together. When I have designed print media and digital bulletin boards in the past, it has been a pretty smooth flow for me. This was a great opportunity to think differently and to solve a problem. I am used to designing to be informational and aesthetically pleasing.
I also enjoyed working on this project for the practical side. I could empathize with educators and the struggles that they deal with. In 2020, they have to be so much more creative and inventive just to get by. Giving them a reliable tool to ease some of their burdens would be amazing!