Vocab Recall

Primary Stakeholder
CareerFoundry UX Course

Tools Used
Figma, Marvel

Project Scale
3 Months

Role
UX/UI Designer

Problem & Goal

The Problem: How can professionals refresh their language skills and learn new vocabulary that applies to their everyday life without wasting time with all the things they still remember?

The Goal: To create a responsive web app for studying vocab flashcards that can be used for quick study sessions on the go

User Research

I conducted interviews with three people who each studied different languages on multiple different apps.

Takeaways:

  • Users of flashcard apps are not brand new to the language

  • Users prefer shorter study sessions available anywhere

  • Users do not like seeing words they already know

  • Users have language goals: learn slang, learn workplace terms, etc.

User Persona: Nicholas

About

    • 24 years old

    • Engineer

    • Lives in suburbs

    • Single, no kids

    • Bachelor's degree

    • "I studied French in high school and now that my co-workers speak French I'd like a refresher."

    • "I'd love to visit France with the language expertise I used to have."

Empathy

    • Needs pre-existing vocab sets to study because he doesn't have the time or motivation to type in all the vocab he needs

    • Needs everyday and career/topic specific vocabulary to help him brush up on what he knows, and gain new words that can help him at work

    • Needs ability to use app in any situation so that he can study without internet like on the subway or a flight

    • Needs customization to accommodate his existing knowledge so that he can edit and combine premade sets to perfectly match his individual skill level

    • As a professional, I want premade flashcard sets so that I can save time studying

    • As a previous language speaker, I want customization so that I can study from my current skill level

    • As a professional, I want career specific vocabulary so that I can communicate with my coworkers

    • As a commuter, I want offline functions so that I can study while on the subway

Product Development

  • Nicholas needs a way to learn specific vocabulary while refreshing the basics because he used to have higher fluency in his target language. We will know this to be true when we see Nicholas customize the vocabulary he is learning to match his personal goals and skill level

  • We believe that by providing many premade and customizable flashcard sets for Nicholas, we will achieve the most effective and targeted learning curriculum

Initial Prototype

  • Onboarding Screen

  • Home Screen

  • Set Selection Screen

  • Set Editing Screen

  • Study Review Screen

Usability Testing and Report

I used my prototype to conduct in-person, moderated usability tests with four participants. Each session lasted about 10 minutes and had four tasks.

  • Observation:

    • Load screen requires click to move on

    • Severity: 2

    • Recommendations: Make load screen timed

    Error:

    • Navigation bar not accessible from finish set screen

    • Severity: 3

    • Recommendations: Make navigation bar accessible from every screen

    Observation:

    • Create set and study now buttons not available from home screen

    • Severity: 1

    • Recommendations: Add buttons to home screen

  • Error:

    • Struggled to move from "editing existing set" screen

    • Severity: 2

    • Recommendations: Make button larger and add words

    Observation:

    • User tried to click entire set to edit

    • Severity: 2

    • Recommendations: Make entire set clickable to progress to "edit existing set" screen

  • Error:

    • User struggled with inability to tap flashcard to flip it over

    • Severity: 3

    • Recommendations: Tapping on flashcard allows you to see word definition

  • Error:

    • Slight difficulty identifying features in navigation bar

    • Severity: 4

    • Recommendations: Add words and more clear icons in navigation bar

Prototype Revision

  • Onboarding Screen

  • Home Screen

  • Set Selection Screen

  • Set Editing Screen

  • Study Review Screen

This case study was an interesting and informative introduction to UX design for me. I learned a lot about the research and testing required to make an effective app, as well as the importance of conducting multiple rounds of testing. This project was my first time using user centered design an I realized how important that focus is in every step of the process. If I were to continue working on Vocab Recall my next steps would be to increase prototype fidelity and then undergo another round of usability testing.

While I did not continue to work on this project I took all the lessons I learned to my following project, Metric Weather.