Overview
VocabFoundry (VF) is my first UX design project I created as a part of the UX Design course with CareerFoundry. I followed the Design Thinking Process steps in order to understand users, ideate and craft a low-fidelity prototype of VF, test it with potential users, and improve the initial design. Through this project, I gained valuable insights in implementing a user-centric design approach.
Context & Objective
It can be challenging for us to keep track of all the jargon when working or studying in a foreign-language speaking setting. This project aims to design a mobile application focused on empowering people to learn new vocabulary. It is meant to be used on-the-go for quick 5 to 10-minute study sessions to best fit in people’s busy schedules. They could learn new words on a bus or train, while waiting between classes, or during a lunch break, etc.
My Role Timeline Tools
UX designer Overall: 3 weeks Pen & Paper
UX researcher Discovery & Research: 1 weeks Miro
Design & testing: 2 weeks Figma
Optimal Workshop
The Process
I followed the Design Thinking Process steps in order to craft a low-fidelity prototype of VF, test it with potential users, and improve the initial design.
Source: CareerFoundry
Competitor Analysis
To kick off, I explored four vocab learning apps to analyze what is currently available and in-demand on the market.
Left to right: snips from Quizlet, AnkiApp, Word of the Day, WordUp apps
Quizlet
I liked the variety of learning approaches available, including Flashcards, Learn, Test, and Match, which can be tailored to suit users' preferences. However, there are some navigation and functionality issues that could be improved. For instance, creating a vocabulary set from the library requires going back and forth to the search screen. It would be beneficial and encouraging to have a progress screen to track achievements.
AnkiApp
My overall experience was not very pleasant because it is not intuitive. In addition, the images used were often irrelevant and difficult to remember. However, one feature I Liked about AnkiApp is the 7-step rating system for words, ranging from easy to fail. This system is useful for later reviews and helps in retaining words that need further attention.
Word of the Day
I think the onboarding placement test to gauge the user language proficiency for personalized learning is a great feature. I like the app's appealing UI design. The use of images for synonyms could be improved, as it doesn't always effectively connect with the meanings, making it challenging to remember them.
WordUp
This app is so intuitive and compelling that I forgot I was working on my UX project; in other words, I felt deeply engaged and interested in practicing. The images and gifs reflect the meanings in a memorable and fun way. They've put in a lot of effort to collect examples, quotes, and videos that have a great impact on incorporating new vocabs. The AI chat feature is another great approach to practice.
User research
To better understand user needs, paint points, and behaviors, I conducted user interviews with a couple of people in the age range of 25-45 from different ethnicity, education background and occupations. I asked some open-ended questions and jotted down their statements. Later, I converted those notes into three categories, i.e. ‘Doing’, ‘Thinking’ and ‘Feeling’ statements.
Interview Questions
1. What is your profession?
2. What is your typical day like?
3. When was the last time you used a vocabulary app? How often do you use it? What do you mostly use it for?
4. How has it helped you achieve your goal?
5. What do you like about using this app? Why?
6. Tell me about a time you have been frustrated with learning new vocabs? Why was it frustrating? What do you think could make it easier for you?
7. Why do you think learning new vocabulary is difficult?
Proto-Persona
I combined insights from competitor analysis and user interviews data to create a simple prototype of a persona representing the target audience’s needs, goals, and behaviors.
Alex has some user stories and job stories of I created from user research data and some assumptions. Then I formed the problem and hypotheses statements.
Problem Statement
Alex needs a way to find time to improve his English language skills because he has a busy schedule and would like to keep a balanced work-life style.
We will know this to be true when we see he is able to retain new vocabs and enhance his communication in a professional settings.
Hypothesis Statement
We believe that by creating an interactive personalized vocabulary learning app that includes personalized learning methods, such as audio lessons, flashcards, and real-life scenarios for Alex, we will achieve having Alex more motivated to learn while seeing significant improvement in his vocabulary skills over time with regular use of our app.
Information Architecture
I sketched in the structure of VocabFoundry app based on insights from the previous stages, then conducted a closed card sort to determine the features sitemap via Optimal Workshop platform and distributed them among participants. I synthesized this data with user stories in order to create task flows that Alex would like to complete using VF app.
Wireframes & Prototype
Based on the user flows and their required features, I started sketching screens and later turned them into wireframes using Figma.
Keeping in mind Alex’s pain points and behaviors while sketching, I:
- Designed Navigation bar to have necessary keys to access pages user visits more frequently.
- Implemented universal icons and features for a more user-friendly, memorable interface.
- Embedded the translation to multiple languages including the user native language feature in the learn page.
- Includes different approaches for saving vocabs in order to practice them later, either randomly, via search engine or creating own flashcards.
Usability Test
I conducted usability testing with a couple of participants and I observed them while completing the tasks in order to identify user pain points, issues or errors.
Improvements
I revised the prototype based on the major issue, and errors with high severity the test participants faced. This includes modifying 'Learn' and 'Quiz' icon to represent them in a more comprehensive way.
Next Steps
The next steps in the project involve several key aspects. First, the prototype will undergo refinement and polishing to reach a high-fidelity design level, ensuring a polished and detailed user interface.
Additionally, usability testing will continue in iterative cycles to uncover and address any remaining pain points or issues, further optimizing the product.
To foster user engagement and community interaction, a challenge page will be integrated, allowing users to share their experiences with others. Lastly, interface customization will be enhanced with the introduction of both dark and light themes, providing users with the flexibility to choose their preferred visual setting for improved accessibility and personalization.
Learnings
During this journey, I've acquired valuable insights that have shaped my approach as a UX designer. I've learned to think with a UX mindset, emphasizing the importance of designing user flows over individual pages.
Additionally, I've consistently kept the persona's pain points at the forefront of my design process, ensuring that the user needs and challenges remain central. These learnings have not only refined my approach but also enriched my understanding of user-centered design principles.
