CLASSmind- Focus on Student Relationships from Day One

Challenge

"At the beginning of each new semester or school year, teachers are faced with the challenge of remembering names for a large number of new students.

Design an experience to help an educator match faces to names, to shorten the time needed to reach complete un-aided accuracy."- Weekly Product Design Exercise #1

Constraints

I spent three weeks from concept to finished product.

Audience and Persona

For this application, our target audience is teachers, aged 22-60, both male and female, who use smartphones and apps to aid in their teaching and daily lives.

Our persona is Kate. She is a young teacher, straight out of college at her first position. Her English class roster contains 105 students, and she is wanting to make a good impression on both the administration and the students. She doesn't want to have to worry about matching all her students' faces with their names for the first several weeks of school. She would much rather spend her time developing relationships from day one.

Style Tile

I was looking for a fun, modern vibe for this app with bright colors, realistic portraits that would be replaced in the real app with school portraits, neumorphic buttons with glassmorphic highlights. I chose Quicksand for the display font and Avenir Next for the text font. I like Quicksand because I feel it has a soft yet youthful feel. Avenir Next is often my go-to as a modern font for general text. Icons were also soft and rounded. The icons in the blue gradient circles were intended to be used to differentiate between classes but were never used. Perhaps in future iterations, they can be incorporated somehow.

Wireframes

I developed fifteen wireframe designs that included login/create account screens, settings, add class/students, practice, and quiz. I'm including the main screens here. The idea was that a teacher would be able to log in using their school account information, the application would import roster information from the learning management system (maintaining student confidentiality, of course), and the teacher would be able to practice and quiz herself on the go before the school year begins.

An option was being developed where teachers could manually input student information, but I decided not to pursue that option simply because it would be too cumbersome to add names and pictures of individual students. A teacher simply does not have the time to do so and it would defeat the purpose of the application. Data must be able to be imported for it to be effective.

These wireframes show a natural progression through the application: login, practice from the roster, and quiz. There is also be a settings screen, and later on, I would add practice option. Screens are accessible through a hamburger menu in the top left corner.

Mid-Fidelity Designs

With the first round of designs, I liked how everything fit together, except for the background. The background did not fit with the overall theme and feel of the application. It was too soft for the fun and vibrant theme I was going for, but I was afraid a bright background would be too much and overpower the application.

This round of designs also included the swipe practice set, however, when I went to prototype the swipe function refused to work. To fix it, I dropped in arrows to click forward and back through the set of student "flashcards". I also wanted to incorporate a bit of microinteraction and attempted to auto-animate the balloons drifting upward to celebrate a correct guess on the quiz. The initial design was tricky and didn't want to animate properly, however, I refused to give up and was able to get it to flow on the second round of designs.

High-Fidelity Designs

These are the final set of designs that I developed for the application. After playing with colors and designs for the background, I settled for a liquid color splash behind the glassmorphic card for the top not-quite-half of the card, and a solid bottom. This enabled me to blur the top for some eye-catching interest, yet not obscure the text towards the bottom of the card. In this way, we can retain accessibility.

I also designed the splash screen, log-in (I decided to choose Clever as an easy log-in portal as it typically already connects to the teacher roster), and onboarding screens. Beyond developing the "correct" state for the quiz (with working celebratory balloon interaction), I also developed an "incorrect" state. I feel it all came together quite nicely.

https://video.wixstatic.com/video/19e4c6_40e1230c33cf4045bd042f85eafc0ce9/720p/mp4/file.mp4

Project Takeaways

This was a really fun project to work on, mostly because it is something I would have used as a teacher. Connecting with my students early was always a priority. Many teachers, including myself, rely on black and white or low-resolution color printouts to connect the names of our students with their faces. An application such as this would be fun to use, and therefore motivational. Also, with the ability to directly connect to the learning management system the school or district uses, or through Clever, it eliminates the pain point of having to manually enter student names and pictures, which not only would be a hurdle most teachers would not want to overcome, it also becomes a privacy issue.

This project also has other applications as well. I really see it being adapted as a general flashcard template for students to use for any class. Teachers can create content they want their students to practice, or students can create their own.