Lexem Vocabulary App design
PROJECT 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)
Tools: Optimal Workshop, Marvel, PowerPoint, Adobe XD
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.
User Research
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.
Primary Persona
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!
How might we help Angela learn specific terminology in another language so she can network and do research while abroad on assignments?
We believe that by creating a customizable vocabulary learning app with a progress tracker, options for selecting topics, and adding words for Angela, we will achieve her goal to learn quickly and feel confident to do her work assignment.
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.
Splash & Onboarding Flow
Initialization Flow
Sign In/Sign Up, Home & Profile Wireframes
Flow A: Choose a way to learn new vocabulary
Flow B: Add a new word to a set
Let’s Test…
Based on Lean UX methodology, early testing with a wireframe prototype would allow me to quickly validate what worked in the initial designs and reveal unexpected pain points. I conducted in-person usability testing with 4 participants on a mobile device. The app was received with genuine curiosity and after the sessions, participants asked when they can test the final product. Observing the participants’ mental models and uncovering errors early on (one of them severe) resulted in saving time and designing a product better focused on the user’s needs.
User Feedback
“Would be nice to be able 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
Revised wireframes
The usability test report outlined the most essential changes the prototype needed. One thing I found very exciting is figuring out how best to incorporate all the new perspectives and findings into the revised prototype. The changes were not always 1 to 1, in some cases I had to eliminate a frame and in others to modify the overall functionality of a button, for example, the “Add” from the tab menu would open a popup menu with a few options to remove confusion.
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.
