OVERVIEW
Summary
Learning new vocabulary or terminology can be tough and time consuming when done in the "old-fashioned" way of paper flashcards. Through user research, creation of user personas, wireframing along with user testing, we can create an app that can be used by many different types of people with a variety of studying needs.
Challenge
People learn in different ways and have different needs for learning vocabulary, so a flashcard app has to be able to accommodate many different lifestyles, needs, and learning styles.
Solution
This app should allow users to create and study their own customized flashcards. It's important for people to be able to track their progress, possibly in a gamified type setting, all while being part of an intuitive and clean UI.
How did PATHCARD start?
We were given a simple problem statement: "How might we design a mobile app that empowers people to learn new vocabulary?"
I personally worked through every major step in the design process from user research to information architecture, interaction design to a final design presentation. Through user interviews and the creation of a primary user persona, I was able to create a user flow structure that I then developed into a functional low-fidelity prototype that I could perform usability testing with.
Throughout my design process I like to ask myself important questions to keep the motivation and goals for the project in the forefront of my mind.
I personally worked through every major step in the design process from user research to information architecture, interaction design to a final design presentation. Through user interviews and the creation of a primary user persona, I was able to create a user flow structure that I then developed into a functional low-fidelity prototype that I could perform usability testing with.
Throughout my design process I like to ask myself important questions to keep the motivation and goals for the project in the forefront of my mind.
What do real users want from their flashcard apps?
Interviews
During the discovery phase of this project, I conducted user interviews in order to get a better understanding of how potential PATHCARD users currently study. These being the first user interviews I conducted, I decided to start with three users for some initial insights.
Interview Questions
• What were some of the biggest challenges of starting a new class/job? Why?
• When did you last need to learn new vocabulary? How did you go about doing so?
• Why do you think learning new vocabulary can be so difficult?
• What is your preferred method for learning new vocabulary/jargon? Why?
• Is there something you could have used to make learning new vocabulary easier or less frustrating?
• When did you last need to learn new vocabulary? How did you go about doing so?
• Why do you think learning new vocabulary can be so difficult?
• What is your preferred method for learning new vocabulary/jargon? Why?
• Is there something you could have used to make learning new vocabulary easier or less frustrating?
Insights gained
I decided to separate the findings and insights into three categories in an empathy map style
How could I use these insights to inform my project goals?
Primary Persona
Based on my user interviews, I created one primary persona, Kevin. I referred to him throughout the entire product design process, creating user stories based on his behaviors and needs. This primary persona kept the goals I had as a designer in focus.
User Stories:
"As a visual learner, I want to be able to customize my flashcards like I would be able to with a physical card"
"Since I learn best by example, I want to be able to make notes so that I can contextualize the use of new terminology As a busy student, I want to categorize my flashcards so that I can separate them by subject or priority"
"As someone who doesn’t always like flashcards, I would like to have the option to do quizzes or mini-games so that I can visualize the use of the new vocabulary"
"As someone who benefits from context clues, I want to see examples of the terms being used in sentences from outside sources"
I decided that creating a problem statement and hypothesis would be the best way for me to formulate a goal and later test out my assumptions
Problem Statement:
Kevin needs a way to make personalized flashcards because he usually makes physical cards with different formats for different categories or importances. We will know this is true when Kevin can create flashcards that are visually pleasing to him and he can signify which ones to prioritize.
Looking back at my user persona throughout the rest of the product design was crucial for me to keep the goals I had as a designer in focus. Keeping Kevin in mind, meant I was keeping the users at the center of PATHCARD.
Looking back at my user persona throughout the rest of the product design was crucial for me to keep the goals I had as a designer in focus. Keeping Kevin in mind, meant I was keeping the users at the center of PATHCARD.
Hypothesis Statement:
We believe that by allowing Kevin to customize the format of his flashcards, rate them on a scale of importance, and choose the method of study, Kevin will be more incentivized to use our vocabulary learning app over his traditional paper flashcard method.
How will my persona navigate PATHCARD from start to finish?
User Flows
In order to create the easiest path a user could take while using PATHCARD, I made user flows of two core features; creating and formatting personalized flashcards, and categorizing/prioritizing those flashcards
This is a process I had lots of experience with already throughout my engineering career. These process flows helped me visualize how our users would expect PATHCARD to function. This is also a great tool to look back on further down the road to see where user frustrations might stem from.
This is a process I had lots of experience with already throughout my engineering career. These process flows helped me visualize how our users would expect PATHCARD to function. This is also a great tool to look back on further down the road to see where user frustrations might stem from.
What will this app look like? How will it function?
Wireframing/Prototyping
By sketching out my initial idea of what PATHCARD would look like, I could turn my vision into a functional prototype to start testing my hypothesis.
I hand drew multiple low fidelity iterations of these wireframes with the plan to use them for initial usability testing on the two main user flows I outlined earlier. In order to transfer these hand drawn wireframes into a usable prototype I used Marvel.
I hand drew multiple low fidelity iterations of these wireframes with the plan to use them for initial usability testing on the two main user flows I outlined earlier. In order to transfer these hand drawn wireframes into a usable prototype I used Marvel.
Does my wireframe make sense to the users?
User Testing
After converting my hand drawn wireframes into a partially functional prototype I decided to conduct a usability test with four potential users of PATHCARD. All testing was done remotely, with a scripted set of tasks I wanted to observe the users doing.
After testing of this low fidelity prototype was completed, I organized all observations I made and identified the problems with each task. and ranked them on a scale of 0-4. 0 meaning it is not a usability issue, and 4 meaning it is a usability catastrophe. Having the issues ranked this way allowed me to prioritize which problems needed to be fixed first for my next iteration of prototype improvements.
After testing of this low fidelity prototype was completed, I organized all observations I made and identified the problems with each task. and ranked them on a scale of 0-4. 0 meaning it is not a usability issue, and 4 meaning it is a usability catastrophe. Having the issues ranked this way allowed me to prioritize which problems needed to be fixed first for my next iteration of prototype improvements.
Conclusions
• People want a quick easy way to automate their flashcard process on their phones
• Being able to start studying from a few pages would be a big quality of life improvement
•The needs and goals I made for my primary persona were validated through usability testing
• I can use Figma to create a higher fidelity prototype for my next round of user testing
• Being able to start studying from a few pages would be a big quality of life improvement
•The needs and goals I made for my primary persona were validated through usability testing
• I can use Figma to create a higher fidelity prototype for my next round of user testing
Final overall thoughts
I got my feet wet with hands-on UX research and design processes throughout this project. Working through how other people would use this flashcard learning app, as well as how a UX designer would flow through a project has been a keystone moment in my early UX design career. Going forward, I think if I had more experience with Figma I could create mid to high fidelity wireframes and prototypes. I am eager to learn more about the visual design principles that will propel my designs that much further.
