interaction design + illustration
Screen Shot 2017-07-16 at 5.36.51 PM.png


Designing for Identities


The project is designed to solve a problem that I've struggled since I moved to the U.S. at three-years-old: having my Korean name butchered endlessly. While this seems minute, having my identity misspoken affected my school life, as multiple substitute teachers pronounced "Jung-Jin" in ways I couldn't have imagined. At 6, my school library card read "Jingjin". At 16, a substitute teacher asked for "Mr. Lee", after reading everyone's first name and last name on the list. I had no idea what was worse: trying and failing, or not at all.


However, it could've been worse. Multiple sources such as PBS, Independent, Huffington Post, and Academia all report unsettling research that state the correlation between name pronunciation and academic progress. And here is the problem that Angel Gonzalez(Sales), Erika Scotti-Martinez (Sales), Jitae Joseph Kim (UX), Derrick Nguyen (Front-end), and I were solving:



In addition to reading academic articles, we put up an anonymous survey on the app Blind to see how this can be taken to a recruiter context: Even though the majority answered "no", the fact that 30% of participants wouldn't work for a company where co-workers mess up the pronunciation of their name is a big deal.



Our end-goal would reach public school systems. But how would we get there? We began with an area that everyone on our team is familiar with: colleges. Upon brainstorming, we realized this correlation between schools and diversity.


Although we were starting at a higher institution, our product would be integrated into other platforms later into recruitment and then to lower education. Therefore, from a user experience standpoint, the design needed to be a "one-size-fits-all". But by the end, these are the audiences we are designing for:

  • Professionals, networkers, recruiters, job candidates
  • University academic advisors, counselors, anyone who have personal connections with students
  • Public school students, their parents, and the faculty

Here's how we mapped our user flow:


And here is a wireframe made by Joseph:


We wanted a delightful experience of inputting pronunciations––here, the user would type their name, which would be broken down into syllables based on an engineered algorithm. The user would be able to select how to pronounce each syllable (inputting new ones if needed), which would guide the listeners through each part of the name. When finished, they would hear a read recording, and they would be able to move onto the middle, and then last name. 


High fidelity mockups

Below, I took Joseph's wireframes and added visual detail and color before handing it off to an engineer.


The user would arrive here from a registration portal––either from a university, public school, or a recruitment platform. Here, the user was linked from NYU's student portal.

They would input just their first name––one part at a time.

Upon entering, the first name is divided into syllables and the user inputs the pronunciation one part at a time. By the end, they can replay an automated recording to make sure their input is how the user envisions it. (Having a uniform voice levels the playing field for all name pronunciations, and learning how each syllable can sound educates the user on reading other uncommon American names)

With the first name complete, the user has the option of completing their middle names, and then their last names.

Last name! In the second frame, the user is inputting a new way to pronounce a syllable. This is the same process that occurs in the first name.

At the end, the user inputs their email to receive a pin number, which embeds the pronunciation into any service that uses We decided a code is a safer option over an email address. In addition, for a use case where an email is used for more than two names (say, a parent registering their children for preschool), multiple accounts can be made. The pin can be re-inputed into the landing page to give option to edit the pronunciation.



How we map our story is crucial. Although was originally thought of back in May 2016, the interactions and designs weren't implemented until July 2017 for a corporate hackathon. Creating our presentation, we realized the importance of framing our story and pitch to be emotionally sound, something that audiences empathize with. 

Our biggest fallback was not only our narrative, but also the business plan––how would make money as a standalone product? This is why we chose to target institutions, where funds are spent on bettering student life. However, the way we framed our story, the core value of pronunciation affecting children at such a young change wasn't apparent.