Matching Names and Faces — Google Design Exercise
Here is my original approach to the Design Challenge I have got during interviewing with Google. It turned out Google did not change it for years, I have found at least 15 different variations of solving the same problem :-) Nonetheless it makes it even more fun to re-invent it for the 16th time. It’s a long read and too few pictures, so good luck (Let me know if you made it)!
Prompt
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.
Human’s Brain is fascinating! We’ve been exploring it for thousands of years and yet not even close to understanding how exactly it functions. I personally struggle with remembering people’s names, sometimes it feels I don’t even hear them — I can’t remember what people say 30 seconds after. It must be a brain trick that filters “useless” information immediately. It would be great to find a way to hack this brain habit.
Design Approach
It’s great to start with a plan, I try to follow these steps, sometimes jumping back and forth between them to make sure I stay on the right path.
- Research: understand the people’s problem, who is the potential user, their current solutions
- Theory: investigate remembering methods and best practices
- Existing Products: find and try products that help to solve similar problems
- Ideation: list the ideas and set the strategy
- Map out basic user journeys
- Define the scope, technical and legal limitations
- Draft product architecture
- Wireframe core views
- Design visual style
- Design basic UI and interactions
- Create a prototype for most common or special user flow
1. Research
Charles Kettering, the famed inventor and head of research for GM, said
A Problem Well-stated is Half-solved
Probably the best way to understand the problem is to run a couple of dozens of interviews with people who face it regularly and have found their ways to solve it, or even better put yourself into the teacher’s shoes and try to remember a few tens of faces while doing regular teacher’s duties. But my time is limited and I don’t have immediate access to Universities or Schools professors (3–4 people I can ask would barely make a trustworthy picture). Eventually, I started with browsing the web — searching in Google :-). There are tons of materials on this topic, it might be not the most authentic results, but they are definitely enough to get a clear understanding of potential users and their needs.
Here are some quotes I have selected:
This insights showed that the problem really exists and there are a few common methods to solve it — the best practices that most of the teachers follow. They are using the seating chart, regularly using students names on classes and in conversations, finding memorable features and associating their personalities with something funny, repeating their names after classes (flashcards)
2. Remembering methods
Then I have read a few articles about the memory principles and general practices about how to memorize such information.
These techniques are from a respected author Dominic O’Brien — 8-time winner of the World Memory Championships.
Three principles of memory:
- Association — memory and creativity are based on associations
- Location — there is something about placing mental images in a specific location that makes them easier to recall
- Imagination — the mind remembers things that are exaggerated, so mnemonic images should be vivid and exaggerated
3. Existing Products
I have found a couple of existing apps for teachers, similar products in different fields — for example learning words from a foreign language is a fairly similar problem. Also I could not miss a few hypothetical solutions from other fellow designers interviewed by Google.
The number of apps use the same patterns — lists and grids with photos and names, flashcards, grouping feature, custom notes with associations and gamified quizzes.
TeacherKit app grabbed my attention. It is a classroom management tool, but have a nice side effect to make teachers remembering kids’ names simply because they have to navigate through their cards all the time.
Some solutions I find quite limiting. For example, I don’t imagine a professor using a smartphone during a class callout — it is not his primary professional tool and it would not look respectable. Gamification and quizzes can be a nice addition, but probably many teachers would hardly have time or motivation for them regularly, especially if they have really many students to remember. Moreover, I believe placing a person into a certain context (such as a lecture hall, his classmates) is a great helper and it is often lacking in quizzes.
4. Ideation. Ideas and the strategy
Equipped with such insights I could start with extracting those methods that could be used in creating my solution.
- Organize students list with Faces and Names in alphabetical order (constant, so it helps teachers to use it as a helper)
- Repeat the names in different, but relevant contexts
- Use seating charts
- Create custom groups by different characteristics
- Callout names on classes
- Use mnemonic devices and funny associations
- Use quizzes or flashcards
- Record and listen to the correct pronunciation
- Add more context, learn unique facts about students
To make the product really effective it should be used as often as possible so teachers would regularly see and repeat the student's names or use it as a cheat sheet when they need it. But memorizing the names is only one of many tasks in daily teacher’s routine, and most probably not the most priority one. If it requires effort and does not bring immediate rewards, so it can be easily dismissed. To avoid this I am trying to squeeze the memorizing tasks in between other teacher’s activities so he would accomplish them automatically without any extra effort or change of context.
Having many micro-apps for microtasks is annoying.
That’s why the massive all-in-one platforms with many integrations are popular. Every modern school and the university has a system with lists of students, their performance data, schedules; teachers probably use something to store their lesson materials and personal schedules; many schools have social networks and forums where student and professors have their profiles and can talk. The problem is that all those systems always function independently one from another. Combining them together into one system could have great benefits and, in our case, would provide a lot of quality content and context to make the “Names and Faces” tool useful in the right time and place.
There are 2 possible scenarios:
- This massive multi-task platform for students and teachers already exist and remembering Names and Faces can be a feature in it.
- We can build the platform and with multiple integrations of currently used tools and data-points. “Names and Faces” can be naturally inserted into students and teachers routines.
Since the first option is unlikely for me to work on because there is not enough context and data, I can ideate the second one.
Solution ideation
- Create a product that can be continuously used during the regular teacher’s routine with names-and-faces memorization effect
- It should be easy to get started with the minimum amount of data, have flexible data-collection functionality: the automatic collection of dynamic data (integrations through API’s), static data import (spreadsheets) or manual data input.
- The product should have a teacher and a student side. Having a student app would facilitate the collection of data (student can fill in their profiles in the case of Names and Faces-related functionality)
- Provide a seamless cross-device experience. Professors would use more likely a laptop or tablet during their classes (especially it would have integration with lesson materials). Nonetheless, it should still be available on phone for a quick access.
Here are some of the other ideas that I had during the ideation:
- Messaging functionality would increase engagement for students and professors. It can be used as a contact book and linked to the major messaging platforms such as Facebook Messenger, WhatsApp, email
- Adding a seating chart can be 1. challenging to automate, 2. it can change from lesson to lesson, so it should be updated/re-created every time, 3. if professors use different halls, there should be a specific chart layout for every hall
- Letting students to check in themselves can be useful. There might be a way to collect not only information regarding the personal presence but also his location on the seating chart.
- Connecting social networks to students profiles can help to collect more data and make the product more engaging for professors. But it can also violate privacy since not every student would want to link personal and students profiles
- Have a recognition level of every student (like in language apps)
- Integration or build in the calendar can be useful to guide professor from class to class and help to prepare for the coming ones
4. Basic user journeys
At this point I feel like I have some sort of vision, I would like to have a multi-task tool that will have the Names and Faces functionality naturally inserted in the teacher’s and student’s daily routine. But what is exactly this daily routine like? Time to get back to the research and map out our potential users' journeys.
Teacher or university professor:
- Signing up
- Starting a new course
- Regular day
- Revising the past and preparing for the coming classes
Student:
- Signing up
- Starting a new course
- Regular day
- Revising the past and preparing for the coming classes
Teacher’s regular day
I would like to focus on the “Regular day” scenario because I see the most potential to insert “Names and Faces” tasks into it.
I assume teachers would have up to 5 classes a day. They might want to prepare before a class and at the beginning of the day (or in the evening before) and revise and leave some notes after a class or at the end of the day. During the class they might want to start with a callout or a questionnaire, then continue with the lesson materials, meanwhile, he might interact with particular students.
Here is this simplified version of the teacher’s daily routine:
I can see many places where the “Names and Faces” tool can be used.
Some parts seem quite tricky. For example, the professor would not like students to know that he was browsing through their profiles in the middle of the night and requested to fill in “the hobby” field. Such things should be done anonymously unless the teacher opts out.
Seating map chars
From my research insights, I can see that using Seating Charts is the most popular and powerful tool to help remember the students. But I can also see that there can be some challenges with it:
- Lecture halls can change for different classes, so the hall layout would change as well
- Student are free to choose their seat, so it would vary every time
- Manually making seating chart requires much effort from a teacher
- Automatic creation of seating chart is not obvious
I have spent some time thinking about a solution to this problem: how to create charts with minimum effort for professor and students. Even if every student would have an app installed on their phone with location access, it can’t be exact enough to associate each device with a certain seat without additional (expensive) equipment. So some effort should be required. We can combine the assignment of a seat to a student with checking in for classes, so the list of attendance would be automatically created without having the teacher making callout every time (that can be time-consuming for big groups). So a student can check in for class with indicating hist seat number. It’s not the worst and can be easily done, but it’s also easy for a student to cheat.
My solution is to create a static QR code for every seat that student can scan to check in. This requires minimum effort and cost and minimize cheating. Meanwhile, teachers can access the dynamic seating chart (can be useful before the start of the class), a teacher can check in and allocate people manually if they are unable to scan the QR code.
Define the scope, technical and legal limitations
The scope grows bigger and bigger. This is the time when I (and the team) should decide what is possible and what is not, having too much functionality is not always good, it’s expensive to build and there is no evidence that the market actually needs it. There might be some legal limitations too, for example tracking student devices, connecting to their personal social networks or grouping people by certain criteria can be restricted or unethical. Fortunately for me, I do not have any limitations or restrictions because my solution is not going to be build, so I will just keep going.
Product architecture
My favorite part — getting all ideas under one roof and drafting the product scaffolds. I try to start with the big picture that includes the core product environments and major user flows, after I would zoom in to a specific parts, gradually adding more details, testing and iterating.
My future product consists of big 2 parts: Professor app and Student app. Professor app should be available on the desktop (webapp, so it can be reused on tablets too), Mobile app is less of a priority but also required in the future releases. The Student app though should be on phone (so student can scan QR codes). Desktop and tablet versions have less priority.
Because I want to focus on covering teachers’ and students’ daily routine, I see calendar as the core part of the app. Knowing teachers schedule we can navigate him directly to the relevant class without making him finding it manually every time. We can also prioritize which faces professor should see depending on when their class is.
Same for the students. Knowing their calendar app can help them to prepare for the right class and… learn the professor’s name.
Teacher’s app
Here is my first, very simplified version of the teacher’s app architecture
Student’s app
The student app is very simple too, calendar and list of classes can be reused from the teacher’s app.
Teacher’s app wireframes
I have started with sketching out some of the Teacher’s App core views
- Class overview: Seating chart
- Class overview: Class roster
- Class updates, sort of the timeline with students profile updates and useful notes
- Student profile card
- Quiz view
- Custom groups
- navigation bar and dropdowns
Quick mockups
1. Seating chart view
Once some of the wireframes were ready, I have tried to have them digital and apply some of the visual style to it. I got inspired by recent Google UI updates to save time.
The page is spited into 2 parts:
- on the left — Professor day schedule, it can be hidden when not needed or smaller screens
- on the right — the Seating chart itself and full list of students’ Names and Faces, Students that are already in are shown on the chart. Professor can manually drag and drop a student to the chart. In the header there is class time, class name and lesson name, view selector (switch between seating chart, class roster and custom groups), notification and extended menu icon
2. Class roster view
The roster view is a table with information about the student, it can be his performance, attendance, custom groups (or notes) CTA’s
Teacher’s user flow
Getting back to the teacher user flow and trying to use my wireframes in it, I find missing details and adjust the wireframes or user flow.
Envisioning a more detailed user journey, which exactly view would have the most priority at the certain moment of a time and how the system can anticipate it, I made a few slightly different starting screens depending on when the professor opens the app.
- Calendar view: when outside of working hours and there is no class that has just finished or coming in the nearest future
- Regular class overview: If there is a class that is going to start soon but check in has not started yet or has just finished (in case if the app was not used during the class)
- Real-time seating chart: when the checking has started
I have chosen to focus on the seating chart view. As I placed it into the different imaginary scenarios.
The top navigation seemed not obvious so I moved it to a side, this way a user can quickly find the relevant environment. There are 5 menu items:
1. Current Live environment — the one that is chosen by the system depending on the time of the day
2. Calendar
3. List of courses
and on the bottom
4. Notifications
5. Teacher’s profile
I have thought of such missing details as a quick way to check in the student, place him onto the chart, add a note, photo or a video to a student or the whole class or lesson. I also thought that seating map does not necessary have to change all the time. Even when have the possibility to choose many people would take the same seats all the time. Or an option of having a fixed seating chart is still possible. So I have added a “Set as default” button. Default chart can be used as a placeholder when not all students have checked in and if he is not there yet there would be still a photo of him.
Since I pitched a bigger topic and tried to re-invent the whole school system, it would require more research on what exactly the daily tasks and need are and what products and tools teachers and students use. It would be great to verify if there is any market demand for such ambitious vision. Overall it was an interesting dive into brain capability and back to school routine to get to the root of the problem.
References
Articles:
Similar products
Languages learning
