Lexem Vocabulary App design
Overview: With the recent changes in the world, people have more time on their hands to engage in self-improvement activities. Even before the pandemic, people were learning a new language for travel, for business, for enjoyment, or for keeping their brains fit. I designed a flashcard-based mobile app empowering people to learn new vocabulary. This app is meant to be used on the go for quick 5–10 minute study sessions.
Project Duration: 1 month
My Role: UX Research, Persona, Task Analysis, Information Architecture, Wireframing, Usability Testing, Prototype (Solo Project)
Competitive Analysis
To orient me in the vast sea of vocabulary apps, I downloaded and analyzed a few direct competitors, such as Chegg, Quizlet, and Cram. The following are a few areas of opportunities to better meet user’s needs:
Search results (of available study sets) need to be informative;
User’s ability to customize their flashcards by adding photos/diagrams, explanations in other languages, audio clips;
Connecting people with almost native speakers to practice (chat or video) to engage in real-life conversations.
In addition to the 3 apps above, I also studied DuoLingo to understand what they’ve done right because it had such a robust following and high reviews. The majority of people in my User Research have used it and liked learning with it. Key findings from DuoLingo to keep in mind when developing the strategy for Lexem:
Varied methods of learning kept people engaged and coming back;
Frequent reminders paired with gamification kept people on track;
Included mastering all areas of learning: Speaking, Listening, Writing, and Reading.
Lastly, I used secondary research already available on the web: How to Create Your Own Language App and Vocabulary Building Apps and Tips to learn more about the subject.
Research Fndings
To find out how people use similar products and what those apps did well and what was missing, I conducted 4 interviews with people of varying backgrounds and countries and then summarized their needs and pain points. Key findings from the user interviews:
People wanted to select topics of interest, for work or advanced degree;
Some people reference another language to learn a related word and will benefit from personalizing their flashcards;
Grammar learning is difficult with an app;
People use words better if they are used in context;
Variety of ways to study make it more fun and engaging;
Some people want to speak the word back to the app to ensure they’re pronouncing it correctly;
People wanted to learn through a conversation or a study buddy.
Reviewing the interview transcripts, I identified a need for a vocabulary app geared towards professionals, who need to study new work-related terminology or a new discipline in a foreign language. Meet Angela, whose needs we’ll keep in mind while designing this app!
Information Architecture
With our persona’s needs and goals in mind, I set out to develop a few common task flows for the job stories. This step brought me closer to defining the app’s information structure and major interaction. An open card sort helped me understand potential users’ mental models and how to best group topics together. Based on our persona’s needs, the main navigation would include a home/dashboard, learning modes, adding words or sets, a search function, and a profile area.
Initial Wireframes
I referred to the task analyses for sketching the wireframes to ensure my designs were meeting the persona’s objectives. This process proved anything but intuitive and I found myself sketching wireframes over and over. Key learning for the future is to outline the site map before delving deeper into a new project.
Userg Feedback
"Would be nice to switch sets directly from the flashcards."
Plamen
“I want other options for how long to study, like “I don’t know” and let me figure it out as I go.”
Ioana
“I’d normally go to Flashcards & want to change it from there or press the back button and be taken back to all sets and select another set there within the Flash Cards.”
Ioana
“Is it the plus button? Can I add a new set from within the Flashcards?”
Hasna
Hi-fidelity Prototype
Equipped with the usability test findings, I got down to explore more refined looks and get Lexem closer to completion. After all, my usability testing participants asked to see and try a more refined prototype — how could I say no to them?
Splash Screen and Onboarding Flow
Sign Up/Sign In, Dashboard & Profile Area
Initialization Screens
Project takeaways and next steps
What I learned:
How to incorporate User Research in the design process;
How to create and use Task Flows as benchmarks;
How important early prototype testing is to align the design with the project goals.
What I could have done better:
Create a site map before starting sketching;
Ask more questions at the end of each usability session to dig deeper;
Create more design explorations before narrowing down the direction.
Next steps:
Test the hi-fidelity wireframe and measure user satisfaction and task completion rates;
Conduct heatmap testing to determine if users are seeing the important elements or getting distracted;
Incorporate the findings and revise the design.