Design Exercise: Names and Faces
This task was given to me by Google to assess my skills while interviewing for interaction designer role. I was given three tasks to choose from. I chose this one because the problem was very open and interesting.
Problem Statement

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.

Understanding the problem

Having been a college student myself, I have personally seen professors face this problem. In a class of about 60 or more students, it’s difficult for professors to remember the name and face of each and every student. This gives rise to problems like false attendance (proxy) and makes the whole experience of teaching non-personal.

Initial approach and research

We know that one of the best ways to remember something is to do (or see) it over and over. I started by reading a few articles, trying to figure out potential ways (analog and digital) to form a habit or remember things.

I found that that it's easier to remember things if -

  1. You can attach visual cues to the subject (like color or images).
  2. You can break the group of subjects (here, students) into smaller groups.
  3. You can fix the position of the subject and try to remember the subject by it's position.
Who was I designing for?

I was designing for the scenario of a college in India. I limited my users to college students and professors.

Potential Solutions

I jotted down different potential solutions and listed the characteristics of interactions between the professors and students

Proposed Solutions

I decided to proceed in the direction of a digital application for taking attendance that makes the process more visual, aiding the memorization process.

Let's call it E-Attendance.

I chose to head in this direction for the following reasons:
  1. Taking attendance happens regularly (if not everyday). It’s repetitive.
  2. It Includes personal interaction between students and professors.
  3. Professors and students do not need to find time to do it. It fits in their routine.
  4. It consists matching of names with faces.
Understanding the user

The next task was to figure out who exactly I was designing for. I needed to create users and give them characteristics to better understand why and how they would be using the product. I created personas of 4 users, 1 professor and 3 students. This helped me decide path on which to take the product and make sure I’m solving the exact problems that they are facing.

How understanding the user altered my direction

Initially, I was thinking in the direction of creating an app for touchscreen devices. But after understanding the different kinds of users, I understood that not all professors will be comfortable with using a tablet everyday and I cannot ignore the students that do not have smartphones.

Also, students may not open to sharing their smartphones with other students. Thus I decided to create a web-app, students will have to use only once a semester.

Assumptions

I made the following assumptions —

  1. The solution will be implemented throughout the college by the college authorities. This will change the process of taking attendance.
  2. Attendance is taken regularly in the college.
  3. Professors may not be familiar or comfortable with touchscreen devices.
  4. There is a working computer in every classroom or professors can use their laptops.
  5. TThe college has good connectivity.
  6. All the users know how to use a computer.
Questions and constraints

To test if such a solution can actually be implemented in a college and to test how bullet-proof it is, I asked myself a bunch of questions while designing it, such as -

Brainstorming how it would work

Every student and professor will have an account on E-Attendance that they can log into by using their institute email ID.

Student Flow

At the beginning of every semester, the students will register themselves for the courses. They will do it by uploading their picture by only capturing it at that moment with a webcam (so that it’s the most recent picture).

Wireframes

I decided that simplicity is paramount for this project as it is going to be used by a wide variety of users. There should be little or no learning curve and everything must be obvious.

I took the low fidelity sketches to the wireframe stage —

Final Result

I then designed the UI mockups and prototyped them with framerjs. I kept the look rather simple and used only one color for all links and buttons.

Student view
Prototype version of student view

Here is the prototype video of the student’s view (private youtube video).

Professor view
Prototype version of professor view

I prototyped the experience to demonstrate the flow and minute interactions. I demonstrated how the professors will actually take attendance. The “present” and “absent” buttons are green and red respectively and give the user visual cues.

Also, when you click either of the buttons, their is prompt feedback (that waits for 2 seconds) with an option to undo your action.

Here is the prototype video for the professor’s view (private youtube video).

Conclusion

I designed an attendance web-app for colleges while taking into account the different types of users, constraints, assumptions and many “whys and hows”.

It makes use of visual matching of the photo and the name with the corresponding student. This process will happen regularly throughout the semester and will help the professor remember the faces and names of the students in much less time.

It was a great learning experience. There are a lot of things to consider when designing new experiences. I always question my approach and critique my own work so that I design something useful, easy to use and delightful.

Thank you for reading.