An app to help educators remember names and faces of new students

(Reminder: Loading demo videos might take a few seconds)

wifi

Learn new faces with three memory aids

Research proves that memory aids like note, sketch, and voice recording will significantly help people form long-term memory. That is why I incorporated note, sketch, and voice recording features as my app's memory aids!

wifi

Name match

As an option of testing your memory of students, educators can choose to test themselves by matching a name with a pair of profile photos of student.

wifi

Face match

If educators are more comfortable with matching a face with names, Face match enables educators to match photos with a pair or a group of names.

Learn more design story about this app

Initial Thought

I was inspired by two vocabulary apps and two brain training apps I used before. Remembering names and faces is essentially building clear connections between them. By helping educators map names to correct faces (or faces to names) and review their "learning" result would be similar to word learning. This is my starting point.

What I did

wifi

UX Design

Wireframe
High-fidelity Prototype
Animation

wifi

UX Research

User Interview
Persona
Storyboard

Task Analysis

wifi

User Interview

In order to know my targeting users' needs, I interviewed three interviewees: a primary school teacher, a middle school teacher, and a high school teacher.

wifi

Interviewee A is an elementary teacher. She teaches a 27-student class. She finds knowing what new students looked like before class would help her form clearer impression on students, which would make her remember faces after in-person-contact more efficiently.

wifi

Interviewee B is a middle school teacher. She teaches a 22-student class. She mentioned that she often used sticky notes and voice recording to help her remember information. However, it can be taxing to manage when new information adds up

wifi

Interviewee C is a high school teacher. She teaches a 20-student class. She thought her biggest difficulty of remembering new students was she sometimes forgot names and faces even though she did remember them before.

Persona

Based on my interview note, I synthesized my interviewees' pain points, needs, and goals into one persona. The name of my persona's heroine is fictional.

wifi

User Journey Map

wifi

Storyboard

wifi

Gilly is a teacher and she meets many new students in her class for every semester!

wifi

She often only has a list of student names before class, which is hard to remember and form some kind of "impression" of students

wifi

Even though she managed to remember some of them, during the first week of semester, she still forgot names and faces frequently

wifi

With my app, she can learn student names and photos at the same time. If that is still hard, she can use text note to her remember.

wifi

Moreover, it would be super easy to test how much she remembered with the Name Match feature and Face Match feature.

wifi

Now remembering new names and faces becomes much easier and manageable in a short period of time

Current Solutions

In order to know how similar apps for word learning, brain training work, I used them for a week and listed their differences

wifi
Quizlet
wifi
Elevate
wifi
Lumosity
Name / face match wifi wifi wifi
Customized learning note wifi wifi wifi
Self-assessment of learning/training result wifi wifi wifi

Conclusion

wifi

Link to student information system

Seeing what students look like before class will help teachers have "pre-class" impression to form implicit memory.

wifi

Memory Aids

My interviewees agreed that memory aids like sticky notes, simple sketch of a person are very helpful for memorizing

wifi

Review and Test

According to user interviews, a review or a test of memorized names also helps teachers form long-term memory

Ideation

wifi

Flashcard with student name and photo

In the learning mode, a student's name, photo and memory aids will be integrated into a flashcard.
In this way, all information is well organized and the flashcard design will be friendly for reading and navigating between cards.

Matching name with face

In order to make the self-assessment more fun, I applied some gamification elements in the "Name match" interface.
The user just needs to drag / tap a photo at the bottom to match the name

wifi
wifi

Matching face with name

As another option of self-assessment, the user can also enjoy the little game of "Face match", where he / she just drags a name from the candidate names at the bottom to match the photo

Low-fi Prototype

Student List

wifi
wifi
wifi
wifi

Learn

wifi
wifi
wifi
wifi

Name match

wifi
wifi
wifi
wifi

Face match

wifi
wifi
wifi
wifi

Color Scheme

According to psychology research, warm colors like red and orange are significantly more helpful to form memory than cold colors. Therefore, I chose warm red to be the primary color for user interface.

The primary colors of this app are a set of warm red colors.
The secondary colors are deep purple and light green to increase contrast

Primary Red #1

#F77062

Primary Red #2

#FEA08F

Primary Red #3

#BF3F38

Typography

Flashcard Title 24px

Page Title 20px

Subheading #1 16px (Regular)

Subheading #2 16px (Medium)

Content text 14px

High-fi Prototype

Student List

wifi
wifi
wifi
wifi

Learn

wifi
wifi
wifi
wifi

Name Match

wifi
wifi
wifi
wifi

Face Match

wifi
wifi
wifi
wifi

User Testing

In order to know how my app works for real users, I invited two interviewees to perform some user tasks with my app's prototype. One of them completed the tasks without my app, and the other did it with my app.

wifi
wifi

Takeaway

According to the user testing, the participant who used my app to remember a short list of student information did significantly better (correct rate 8/10) than the one who remembered the information purely by heart (correct rate 4/10).

Design Iterations

wifi
wifi
wifi
wifi

User flow with final design

Homepage navigation

wifi

Interaction Animation

Learn page

wifi

Interaction Animation

Name match page

wifi

Interaction Animation

Face match page

wifi

Interaction Animation