UX Designer
square_nametag.png

Nametag

Nametag

Web app designed to help college teaching assistants learn names more quickly.

1 week, February 2017, personal project

Welcome (1).png
 
Names and Faces
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, with the goal of shortening the time needed to reach complete un-aided accuracy. Provide a high-fidelity mock for at least one step of this experience.

When teachers learn student names, it creates a better educator-student relationship and dramatically improves students’ learning experience. How can students achieve this relationship in classes with over a hundred students? Teaching assistants (TAs), who work with memorizable numbers of students but who often have little educational training or experience, offer a sweet spot for the use of tools that can leverage that improved learning experience into being.

 

My Design Process

 
nametag_process.jpg
 

 

Research

I released a survey, using Google Forms, to eleven different educators. The first question on my survey asked what roles the respondent has had as an educator (college professor, teaching assistant, etc). To analyze survey responses, I conducted an affinity analysis by writing down all data points on post-its and organizing them.

I conducted three forms of research: secondary research (to learn about memorization devices and the neuroscience behind memory), primary research (surveys and informal interviews to learn if and how educators currently learn names and the challenges of it), and competitive analysis (to see what already exists for this purpose). Some of the interesting and relevant articles I found are here and here and here and here.

 
 
 

 

Purpose of learning names: to provide a better learning experience for students through a better relationship with the professor.

 


Challenges educators face in learning names:

  • It's hard to remember unfamiliar names
  • Many students don't go by the name listed for the teacher
  • "Face blindness"
  • Having too many students makes it pointless to try to remember
  • People forget names even after learning them
  • Some students don't show up to class, making it much more difficult to remember their name
  • Photos of students provided to professors are most often outdated
  • Some students look alike
  • Some students have similar names
  • It's much easier to remember when students sit in the same place every day, but this almost never happens unless there are arranged seating assignments

Deciding the Target Group

  • High school teachers learn students names fairly quickly through classic memorization methods
    • Many of them already memorize students names so quickly (~2 weeks) that it may not be the best use of my design opportunity to reduce it even more
  • Most college professors have too many students to learn all of their names, and learning names with complete un-aided accuracy would take excessive and unnecessary amounts of time.
    • If college professors cannot be expected to learn names, how can college students still achieve a meaningful relationship with their educators? Teaching assistants.
 
 

Persona: Amanda the TA

I sketched out relevant demographic and behavioral characteristics of an imaginary user, a TA, based on real information from my research. These characteristics helped me make decisions and identify needs.

 
 
Quick persona communicating needs and characteristics of a TA, based on research

Quick persona communicating needs and characteristics of a TA, based on research

 

Ideation

 

I brainstormed possible concepts on a whiteboard by sketching and writing to explore different directions before moving forward with one idea.

 
Several ideas drawn and written about on a whiteboard, elaborated upon below

Several ideas drawn and written about on a whiteboard, elaborated upon below

 

Idea: Games

How can we take fun childhood games and apply them to name-learning?

  • Memory: Game where you flip two cards and try to remember the locations of matching pieces
    • One card could be a name, while the other would be a face
    • Problem: You can win by random chance
  • Guess Who: Other player describes the appearance of a person, while you find the person through process of elimination
    • Problem: Time consuming

 

Idea: The "Chunker"

  • Information is easier to remember if you group it
    • Example: A phone number is easier to remember displayed as 650 739 5567 than 6507395567
  • One TA respondent said their section is divided into four project groups each with four group members, which helps because they can remember the four members of a group and their project in relation to each other easily

One design would be to split students in a class into groups of 3-5 and focus on learning those groups one at a time. The groups would display names, photo, and a section to add notes (about meaningful interactions, interesting characteristics, etc). Those groups could also potentially be based on features that are hard to differentiate, such as similar names or faces. 

 

 
 

Idea: Alternative Classroom

  • Current classroom setups do not afford name-learning
  • The focus is on the professor, rather than on the material and how other students relate to it
    • Most college classrooms currently have rows of seats, all facing the front where the professors stands in front of a screen and/or whiteboard

If a classroom was instead set up so that students sat at circular tables, facing each other, and the professor stood in the center of the classroom, students would be able to discuss and learn better through each other. By grouping students, this set up also aids in "chunking" to help memorize and learn names.

 

Alternative classroom idea sketch

Alternative classroom idea sketch

 

 

 

Language-based methods sketch

Language-based methods sketch

Idea: Language-Based System

  • Knowing a name isn't enough; it must be pronounced correctly
  • Students respect educators who learn and pronounce their name correctly
  • When a student's name is constantly mispronounced, it decreases the relationship quality the student has with their educator

What if we applied the best of language-learning methods to name-learning? We can relate learning a name to learning a word in a new language, where a name is the foreign word and the face is the meaning. This system focuses on the learning both the name and the pronunciation.

I've experienced this disconnect my whole life. My name is unfamiliar and isn't pronounced the way it usually looks to other people. When I meet someone, I have to stress that my name isn't "Karen," it's "Karin," like "car-in"surance.

Students with unfamiliar names shouldn't be disadvantaged just because their name is hard to learn and pronounce. Proper pronunciation is just as important to learn as the name and face.

 
 
 

 

User Flows and Initial Screen Design

I decided to move forward with a design that combines and language methods and some chunking. Four pieces of information important to learning a name based on research: the name itself, a face, a memorable characteristic or interaction, and correct pronunciation. From this and the rest of my research, I designed six tasks that a TA could potentially accomplish using the application:

  1. Learn and practice student names
  2. View different classes
  3. Learn and practice pronunciation
  4. Identify which names need to be practiced more
  5. View and reorganize groups of students
 
 
Whole whiteboard of sketches as I moved from concept to screens

Whole whiteboard of sketches as I moved from concept to screens

 

 

Annotated Wireframes, Wall Critique

Once I had sketched out my screens on a whiteboard, I quickly created paper wireframes and annotated them with sticky notes. I taped the wireframes on the wall and listened to critique from another designer.

Paper wireframes are useful because they are extremely low fidelity and invite feedback on interactions and functions rather than visuals.

Annotated wireframes taped to the wall for critique

Annotated wireframes taped to the wall for critique

 
 

After the wireframe critique, I decided to make the following changes to implement in my high-fidelity mockup:

  • Allow users to view and add notes about students from the section view screen, rather than just during the practice lesson
  • Visually represent which student names need to be practiced on the section view screen
  • Remove wrench/settings from section view screen; not necessary
  • Add a practice button on the main courses screen to allow for all-course practicing
  • Add strength bars to both section view screen and and main course view screen
  • Represent what difficulty level each question is during the quiz
 

Annotated Screens

 

Walkthrough: Learning Names

A walkthrough of how a user would begin and finish a practice lesson. Not shown: more practice questions

A walkthrough of how a user would begin and finish a practice lesson. Not shown: more practice questions


Final Thoughts

 

If I could have done more during this design exercise, I would have loved to see how my learning method works. How quickly could a TA learn names using this system? Does it work long-term? Is it enjoyable? It would have been fun to test different methods of memorization and see which works best. I would also show different methods of practicing names, such as matching multiple names and faces and having to listening to a name without seeing it, then choosing a face.

Beyond the methods used, I would have also liked to do a usability test to see how well the interface works. If I could have done more, I would have created a paper prototype before my high-fidelity mockup and tested it. I decided not to test a paper prototype in this exercise in order to focus my time on ideation and design rather than research. However, usability and user testing is incredibly important and would have been nice to fit into the schedule.

I would have liked to show what the experience would look like on a mobile device in case an educator wanted to use it while in transit, but I focused on the desktop experience because it's appropriate to use both in class and outside of class, such as before or after grading. I also would have liked to create a storyboard to communicate how the design works in the context of a TA's life. It would have shown where, when, and why a TA uses Nametag.

If I were to have sent this to a developer to build it, I would also send them this name pronunciation API and the Canvas API. Canvas is the system my university uses for class assignments and grading. Using these two APIs, the developer can pull class enrollment lists, then run the names through the pronunciation API, which would return an audio recording of the name and phonetic pronunciation.

Karin.png