Flashcards World App, Quizlet and Duolingo
My Word
App
Vocabulary Training App for Language Learners
The Project Scope
This project was part of the CareerFoundry UX Design course. The goal was to design a mobile app to empower people to learn new vocabulary.
The result was My Word, a vocabulary training app designed to help language learners memorize new vocabulary by customizing the learning process to their particular needs.
Problem
The Context: Language learning apps like Duolingo and Babbel are well-known and used. They usually offer exercises with given words and context, presenting their own stories and characters, like the Owl.
The Problem: Language students training in specific vocabulary struggle to find an app that fits their learning goals because they need to practice particular terms according to the learning subject.
Solution
The Project Hypothesis: A vocabulary training app that offers the option to tailor the learning process will help users who need to train in specific words.
The Solution: Design a vocabulary training app that allows language learners to choose particular terms, upload and save the words, attribute personalized definitions, and make sense of the word's meaning in the context and for the purpose they are learning.
Tools
Miro
Figma
Team
One designer team
My Role
UX Researcher
UX Designer
Timeline
6 Months
The Design Process
Who are the users?
To narrow the research due to time constraints, we chose the primary user group, the language learners trying to memorize new vocabulary. This hypothesis would be then tested later on during the research process.
1. Empathize
The first step was establishing ground-based information to guide the app design by understanding our user's needs and identifying what problems they were trying to solve and why.
So, we used mixed-method research techniques, conducting user interviews and competitive analyses.
What are the user's needs and goals?
User Interview
We chose to start with the user interviews because it is an efficient tool to know the users in-depth, allowing us to understand their needs, listen to their experiences, and understand why some learning techniques and tools work well, and others don't.
We interviewed three language students aiming to understand their needs and goals when practicing new vocabulary, identify the problems they are trying to solve, and uncover their needs.
The interview goals were:
Understand in-depth vocabulary learning needs and goals
Understand what is important in the process of remembering vocabulary
Identify which vocabulary tools are used and known
Understand the tool's positive and negative points and why
Interview Script
The interviews were conducted first to understand the big picture (the context and user needs) in the learning process and then narrowed to their experience with learning tools.
Can you tell me what your learning routine is?
In the process of learning and remembering new vocabulary, what works well and doesn't work so well for you? Why?
Have you ever used vocabulary-learning apps? If yes, which ones and why? If not, why?
In your experience with vocabulary learning apps, what worked well and didn't work so well? Why?
Would you like to share more ideas about your vocabulary learning process and tools?
What did the users say?
Interview Findings
To make sense of all the collected data, we first organized the interview notes and quotes into groups according to what the users were doing, thinking, and feeling, identifying common subjects.
Interview Results
Then, we analyzed the data, summarizing the findings, transforming them into insights, and making recommendations for the next design phases.
User Interview Learnings and Challenges
The interview results presented two significant challenges to be solved in the ideation phase:
The users didn't like to learn with flashcards with the methodology presented by the existing apps
The challenge: How might we offer a pleasant learning experience and make it effective in training and remembering vocabulary?
Users need a way to bring their vocabulary discoveries to the app and practice in a stimulating and creative way.
The challenge: How might we provide the options to tailor the word training and simultaneously offer innovative practices to integrate the new vocabulary into the memorizing routine?
What can we learn from the competitors?
After discovering the user's needs in-depth, the next step was to understand the users through our competitors, identifying good practices and uncovering needs.
Competitive Analysis
Based on the interview feedback and the most used language apps on the market, we selected the Flashcards World App, Quizlet, and Duolingo to conduct the Competitive Analysis.
The goals were:
Identify strengths and weaknesses
Identify uncovered needs and opportunities
Analyze the main flows, features, and app layout
Identity friction points and usability issues
Competitive Analysis Learnings
The Competitive Analysis showed:
Users enjoy the learning process when it's fun and provides positive feedback
Uploading words and customizing the cards are great resources that make flashcards more meaningful and pleasant to play
It's useful to have onboarding and tips along the way to guide the users
It's a good practice to allow the users to play without login
The simpler the navigation, the better the user experience
What problems are the users trying to solve?
2. Define
Informed by the user interview findings and competitive analysis discoveries, we had enough data to define what problems the users were trying to solve. So, we established a problem statement to guide the following design phases.
For whom should we design?
With the problem defined, the next step was to define the user group, focusing the design process on their needs and goals.
Personas
Based on the previous research data, we represented the users by creating a persona, a portrait of the main user group, congregating their needs and goals.
The persona worked as a guide, allowing the designers to always consider the user's needs during the design process.
What the users are trying to do?
Job Stories
After nailing the persona, we created the job stories. This technique considers specific screens and features the users need to complete a task in a particular context, helping generate empathy for the users and focusing on the design solutions for real user's needs.
How can we help the users to solve their problems?
After discovering for whom we are designing and what problems they are trying, we started ideating the solutions to attend to their needs.
3. Ideate
Informed by the interviews and competitive analysis, we ideated simple functionalities and tools to customize the learning process and help the users train in specific vocabulary.
We materialized the user's needs, building the design foundation using task flows, user flows, and the sitemap tools.
User Flows
Based on the previous steps and informed by the research findings, we created the task flows and user flows, considering the steps, features, and pages needed to train new vocabulary.
We chose as the four main flows needed to train new vocabulary: We chose the four main flows needed to train new vocabulary:
Add a word from an external source (Website)
Upload a card or a card group
Play with the cards and label them by difficulty
Log in and sign in
Sitemap
The next step of the process was to define the app structure by developing the sitemap, considering the pages needed to complete the main flows.
How to translate the user's needs into actionable solutions?
After defining the flows, paths, steps, and sitemap, it was time to translate all this information into app screens.
4. Prototype
We gave form to the design by sketching mid-fidelity screens containing the main pages and features the users need to accomplish their goals, aiming to provide a concrete idea of how the app would look.
With the prototype technique, we connected the screens and simulated how the app interactions would work.
Click bellow on the protoype. Play and have fun!
How do we know if the design meets the user's needs?
Prove the design by testing it with real users.
5. Test
The next step was to test the app prototype by collecting user feedback to identify errors, friction points, and usability issues.
Usability Testing
We conducted a remote moderated usability test with the language learners from the user interview to test if the design solutions would meet their needs.
The usability test goals were:
Test the main flows: log in, play cards, label cards by difficulty, upload a word list, and add a word from mobile readings
Identify errors, friction points, usability issues, and uncovered needs
After congregating all the data, we organized it by issues identified in each task. Then, we classified them according to the NN Group's error severity metrics scale. We prioritized fixing the more severe ones due to time constraints.
What did the users say about the prototype?
Usability Test Issues and Solutions
Task 01
Issue 01 - The log in process was confusing and too long
The users didn't know where to find the login option and didn't understand the difference between sign-in and log-in.
The options "forgot user name" and "email" were missing.
The users needed to click five times to get to the login screen.
Solutions - By placing the login screen before onboarding and adding "take a tour" we shortened the login steps and made the onboarding an option.
Also, we added the "forgot user name" and "email" allowing the users to recover the forgotten password.
Task 02
Issue 03 - App navigation and structure was confusing
The users missed a button for play, a place to find the folders, difficult and favorite cards, and a way to edit, merge, and share the sets
The checkboxes caused confusion
Solutions - On the home, we added a call to action to play and redesigned the flows, adding specific screens to play and label the cards and finding, editing, sharing, and uploading folders.
Issue 04 - The card icons and description caused confusion
Next, back, skip, and the arrow meaning and commands were not clear.
The words “good”, ”again,” and "set” and word definition are confusing.
Solutions - We rearranged We rearranged next, back, skip, added a flip icon on the card, and removed the word definition.
We also improved the writing, replacing "set" with "folder", using only "hard” and ”easy” and placing an icon on the card to represent "again".
Task 03
Issue 04 - The Upload flow was confusing
The pop-up is confusing. The "upload" word in "save" caused an interpretation error.
The upload confirmation message is too fast to read, and the buttons are confusing.
The app didn't show where the new folder was saved.
Solutions - We improved the flow and changed the pop-up to make it easier to find the steps clear, specifying choose a word, add to a folder, save to a new one, and confirm the upload.
We also added more time to read the message and a mask to differentiate the message from the background.
Task 04
Issue 05 - The "add a word from web" flow was confusing
The users didn't know where to click on the saving message.
The users didn't know where they were saving the word.
The confirmation message was confusing and imprecise, with too many options.
Solutions 05 - We changed the pop-up logic. making it clear the word definition options to click. We also added a new detailed step where the user can add a new folder and save the word on it or choose to save the word in an existing folder. Finally, we added a simplified confirmation message and a mask to differentiate it from the background.
6. Refining the Design
We applied the user test feedback, refreshing the prototype to incorporate the user's suggestions and improve usability.
After the prototype refreshment, the app looked like that.
Interactive Prototype
Test the prototype and have fun!
Next steps
The final product was the mid-fidelity prototype refreshed after the usability tests.
The next step is to polish the design by developing a style guide and high-fidelity prototypes.
Then, conduct another usability test, focusing on accessibility to check if the last modifications and iterations meet the user's needs and contemplate all users.
However, these next steps will be only developed when needed.
Project Wrap-up
1. Challenges
There was limited time to do user research on the discovery phase
The interview findings indicate that students don't like to learn with flashcards and learn in very different ways
The competitive analysis showed that none of the used apps satisfied users' needs. We needed better inspiration for the design brainstorm
The prototype Marvel tool was very difficult to operate, leading to errors during the usability test.
There was only a short time to apply the usability test feedback
2. Solutions
Prioritize methods. We chose the interviews to gather more in-depth information
We looked for solutions allowing users to choose their learning sources and offered the option to add, upload, and give meaning to the words
We had to combine what worked for our users and research other apps with correlated functions and features like uploading files
Plan which tools to use to optimize the research process
Be flexible and prioritize the severe error correction first
3. Recommendations
Developed a more efficient research plan to apply surveys and user interviews, optimizing the research time
Plan extra time to study available tools and apps from the market and different areas with the same functions and include them in the competitive analysis, providing more inspiration sources for the design decisions
Use only Figma to prototype and continue to use Zoom to make the test and recordings
Create a high-fidelity prototype and test it again with the users looking for accessibility issues
Learnings
The project was an amazing opportunity to learn and develop my research skills.
The first challenge was understanding the context, identifying how the users learn, and what they need to accomplish their goals of training new vocabulary.
The user interviews and competitive analysis revealed many uncovered needs. That was a great opportunity to exercise the ability to identify problems and find solutions.
The second big challenge was the usability test when it was needed to gather a large amount of data, organizing it to make sense of what they meant.
The usability test found many issues and improvement needs, but it was only possible to fix a few due to time constraints. The big lesson was prioritizing and focusing on the most important user needs to provide the best user experience within our delimited resources.
This project was a fantastic experience that planted the seed to learn and improve UX Design and UX Research skills for the next challenges.