A quirky product design project to solve the problem of all educators every semester
Year
2020
Overview
As a fresh talent in the product design world, I bumped into the Google Weekly Design Exercise by Artiom Dashinsky. The very first exercise was:
"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."
The exercise looked "cute" and weird at the beginning, but as I contemplated more on it, I started to think that this could be a fun challenge to me. The concept was new: I had never been in the situation where I had to get a lot of names, and I couldn't think of any similar product in the market - which means I might have to develop everything from scratch. So I started working on the project with great aspiration for growth as a product designer.
The Process
Is this problem worth solving?
I still had many doubts about this whole topic around memorizing names:
Why doesn't anyone around me use this kind of product? Is there a real market need?
Do educators really have trouble with memorizing names? Or, do they just think it as "a matter of time" and don't care about it, as there are many other things that are more important?
To validate this, I configured an online survey form and handed it over to 35 middle school teachers in my network. The objective of survey was to validate the issue and to discover teacher's behavior and pain points so that I have a firm ground before building anything on it.
I found out that most of the teachers consider memorizing names as the first thing to be done but don't really put as much effort as needed. The two graphs below reveal a gap between perceived importance and actual amount of effort put into it.
I concluded that the gap was generated from the absent of effective method for learning names. Even though some respondents said they are using effective methods, what they were actually doing was mostly limited to putting a list of student names on their desks. No one was applying popular mnemonic methods out there that are proven to be effective for memorizing random strings like names.
Learning how our memory works
My next mission was to study effective ways to memorize names that all teachers can easily utilize through my product. Here are some useful findings that I used in my solution:
Snapshot > Full catalogue: Rather than full details, our brain stores only remarkable things. One strong feature about a student is not only enough but also stronger.
Make it semantic & visual: To put something random into long-term memory, we need to make purposeful attachment to semantic and visual cues.
Recognise > Recall: It’s way easier to recognise than recall. If teachers could recognise students on the first day, names will be registered in their memory more strongly.
Writing design requirements
After collecting bits and pieces of information, I used the famous method of affinity diagram using LucidChart: I wrote down one finding or thought per one note, and locate each of them close to relative notes. With this virtual post-it wall, I could list up the potential features my product would involve, and came up with the design target including users behavior, context and pain points.
Setting up the basic structure
With my product, users will create a stack of student name cards. The name cards consist of both semantic and visual cues, but no student photo is required since it would be difficult and tedious especially for older teachers to upload the photos and match them one by one. My solution is mainly about giving users a friendly guide to associate each name with mnemonic cues.
Navigation
After brushing off user flows for each learning sessions, I painted a whole structure. My goal here was to keep the navigation simple for users to focus on the learning sessions.
UI style
I used purple color to convey the light-minded and friendly nature of my product. From the same background, I used Product Sans as a main font since it gives casual look-and-feel but also highly legible, which makes it suitable for educational product.
I gave my product an imaginary name KeepCalm with this famous line in mind: "Keep calm and know your students." Also, since the main object of KeepCalm is name cards, I used a lot of card-like design components throughout the screens.
I took a major inspiration from Duolingo - which I believed is used by wide range of users including seniors - to keep it simple, fun and game-like.
The Solution
View Prototype
Welcome & About page
KeepCalm is a learning service for educators who want to memorize a number of student names easily and effectively.
Welcome page directs new users to About page, which showcases the goals and benefits of KeepCalm.
Registration
To make this mandatory yet tedious step smooth as possible, I focused on asking minimum information during the registration, asking one thing at a time, and provided relevant reasons why I’m asking some information.
Home
Home is the portal for all classes a teacher manages, as they often have multiple classes at the same time. A warm welcome message is presented with progress of how far a user has come to memorise all the names, grouped by classes. If there is an upcoming first day of a class, a notification will remind users of it in timely manner.
Your Class
Your Class is where users actually work on names. The page displays a list of students along with your memorisation progress, and it also nudges users to complete each session on a scheduled day by presenting a progress bar telling users whether they are on-track or not.
On clicking a student name, card editor appears on the left side.
Progress
Users can check the recommended daily plan on Progress. This page not only informs users whether they are on-track or not, but also if behind the schedule, it also guides you on what them should do to be on-track again.
6 Learning Modules
To easily guide users into creating mnemonic cues on name cards, I came up with 4 linear sessions with a simple flow:
Each session includes:
Onboarding: There should be no friction for teachers of all age when working on each sessions, so I made it simple thoroughly explained.
Consistent button structure: To progress onwards, users click the button on bottom-right side. To skip or edit a card, bottom-left side.
Result: After each sessions, users will see how many cards they worked on, how much increments they made on the overall progress, and whether or not they completed their daily goal.
Session 1: Ring a bell?
This warm-up session makes users think about similar names they are already familiar with. Users can think of their friends, family members or famous people on media that has similar names to the students'. Users can skip as much as they want, and their input will be displayed as a Character on a name card.
Retro-spective
From a fun quirky challenge on the internet, I ended up designing the entire product, including user registration and minor user support flows like editing cards. I couldn’t be more ambitious at this time as a fresh UX person.
It brings me back joyful memories when I look back, but at the same time, it’s so hard to look at my old designs (just like all other designers!) as it’s overly ambitious and not following the legibility rules etc - but I guess this is a proof that I’m growing as a professional UX/UI/Product Designer.
That's it! Thanks.
© 2023 Made by Yaesul