58 Followers
·
Follow

UI/UX Case Study: NameLink App Design Concept

Designing an experience to help teachers memorize their students’ names — as part of the Google interview process.

🖊 My very first attempt on Weekly Product Design Exercise #1 by Artiom Dashinsky.

Since this is my first time challenging myself on a design concept, I start by reading other designer’s design concepts, understanding user personas, how a proper UI/UX design process should be and the reasons behind these detailed processes.

The Brief:
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.

I opted to design a mobile app for these reasons:

  • Memorize on-the-go, wherever and whenever
  • App Push Notifications act as a reminder and motivates users to launch the app

Challenges & Constraints

Time Limit: 8 hours (Actual time spent: 2 days. Omg.)

User Personas: Dan, a University lecturer, wants to remember his new students’ names within the shortest time period so that he could build stronger student-teacher relationships.

Time for Dan to learn all names: 4 weeks

Assumptions:

  • Teachers are proactive at learning all students’ names at the beginning of each semester
  • The school staff will not help with data entry work
  • Data entry will be done by students or teachers, with the help of third-party web-based software like Google Sheets, Google Forms
  • Names to learn per semester: 150 (5 class x 30 students)

Design Process

Research > Ideation Sketching > Wireframing > Design Prototyping

Since I only have 8 hours, the entire project ends at the prototyping stage.

Research

Why are remembering names important?
Based on this research, students feel that teachers who remember their names would positively impact their learning process. They feel more comfortable participating in class.

Name Tents
One of the popular methods being used to remember student names. Students are asked to write down their names on a folded paper (like a tent) and draw something memorable on it. Name Tents will remain on the students’ table for a few months until the teachers remember their names. I feel that this method takes too long.

VARK is a myth
I’ve also learned that experts said that the VARK (Visual, Auditory, Reading, and Kinesthetic) learning style is a myth, which means there is no need to categorize users based on VARK to help them learn better.

The mind’s limit — 7
I’ve learned that, according to Miller’s law, at any given time, the average human can only hold about 7 items in their short-term memory. The good news is, this can be improved with a simple trick: “Chunk” the information into familiar units, and remember them as individual items.

Memories Are Built Through Repetition
As a proud Duolingo user myself, I’ve learned several languages in a short period of time, and those memories stick for a long, long time! Duolingo’s learning technique is called Spaced Repetition System (SRS), paired with Gamification (which works a lot like goal-setting).

Image for post
Image for post
Credits to CoSchedule

Summary on how to memorize faster and effectively:

  • Repetition: revise specific words, and gradually increase the intervals between each revision session
  • Learn daily especially in the morning for better retention and recall rates
  • Taking in bite-sized information at a time before moving on to new information (avoid brain overload)
  • Dominic O’Brien’s Mnemonics Theory: Association (linking the memory to something else), Location (mental images placed in specific locations), Imagination (exaggerated, unusual links or images)

Issues when learning names and faces: (credits to Will Hsu’s post)

  • Some names are gender-neutral (unisex)
  • International students’ names may be hard to pronounce/spell
  • Students with same names in the same class
  • Students look different in person compared to their photo
  • Students prefer to be called other names

Ideation Sketching

Image for post
Image for post

The Algorithm

  1. Each class is split into easily digestible decks, with 5 students (or less) per deck. 1 deck = 1 game.
  2. Once all students within the same deck have filled up 100% of their profile, the teacher gets to start memorizing that deck. (So that teachers do not need to wait for all students to fill up their profile)
  3. Throughout the game, there are 4 methods of memorization (random): by face, by name, by pairing names and faces, by spelling name based on the face (optional).
  4. Each deck has 3 cards per student (by name or face), shuffled randomly. Hence, 1 deck has ≤ 15 cards.
  5. Each deck has a strength meter. When the strength meter is low, it means you need to revisit the deck. Answering all cards correctly gives a green color, whereas weak meters give an orange color.

User Flow

Image for post
Image for post
Initial rough sketches
Image for post
Image for post
Improved User Flow

Data Entry

I opt to integrate the app with Google Forms for its ease of use. Students will be given a simple assignment on self-introduction.

Design & Prototyping

Lo-Fi Wireframes
Low fidelity wireframes allow me to focus on the user’s needs/goals and UX before visual design. In this process, some functionalities were improved. I referred to the university timetables here for subject names so the app could be applied in reality.

Image for post
Image for post
Lo-Fi Wireframe made using Adobe XD

Hi-Fi Wireframes
Once I’m happy with the lo-fi wireframes, I move on to the high-fidelity ones. I got the avatars & names from UIFaces. The dashboard is designed to be straightforward to minimize distraction. When teachers log in, they immediately see their progress and can start the game right away. Upon clicking on the students’ profile picture, the profile will pop up for easy reference. Students with a little red dot on the corner of profile picture indicate that they have not submitted their assignment.

Final Design

Image for post
Image for post
NameLink_Final_Final_Final_Finallllll.xd

Prototyping

Image for post
Image for post
My first time using Adobe XD’s Auto Animate feature
My mockups will be better next time. I Promise.

Conclusion

I hope this demonstrates an idea of how I think, and how I tackle projects. The final design is not perfect, so these are the aspects that I feel I need to improve on:

  • Time management (I’ve exceeded the 8 hour limit on this project)
  • Overall UI/UX design
  • Prototyping with Adobe XD

Thank you for taking the time to read this!

Behance | Instagram

Written by

I design, code and build stuff. Currently: Product Designer (UI/UX) at Fave 🇲🇾 Sometimes I tell people to visit rachelhow.com 👈

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store