Project Overview

Vokab Lab is a mobile application that helps users learn and practice new words. The journey began with the observation that it can be challenging for students to keep track of all the jargon when studying a new discipline. Students need a way to categorize methodically, reference, and learn new vocabulary and concepts so they can move forward confidently in their field. Hence, questioning the problem, "How might we design a mobile app that empowers people to learn new vocabulary?"

The project aimed to design a low-fidelity prototype for a mobile application focused on learning new vocabulary. This application is meant to be used on-the-go for quick 5–10 minute study sessions. That could be on a bus or train, waiting between classes, on a lunch break, etc. The target audience was 18-35 year-olds who would be comfortable using mobile applications.

With the idea that a well-designed vocabulary app should have a user-friendly interface and provide engaging and effective ways for users to learn and review new words, I followed the Design Thinking Process steps to create a low-fidelity prototype of Vokab Lab, which I tested on potential users to see how the design could be improved.

To give an overview of the project, the five stages of the Design Thinking Process followed are:

Competitive Analysis

To start the project, I evaluated a few existing mobile applications for learning vocabulary. Researching competitors is a great way to discover solutions that worked and solutions that could use a bit of improvement. This gives a better idea of the field and what’s already out there. I identified three mobile applications that focus on vocabulary learning, downloaded them and used the applications on my phone, and outlined the positives and negatives of each.

VOCABULARY

The app has an inviting and motivating landing page, followed by a goal-oriented onboarding page. The app was easy to navigate and begin learning. The overall experience of the app is pleasant, although it does not allow the possibility of adding your own words. The color scheme throughout the app is consistent.

VOKABEL BOX

The app had a basic and dull experience. The navigation through the app is not easily accessible without a clarification and introduction page. The app lacks promoting learning features that would benefit users, visual prompts, and learning checks on understanding and recognition.

WOKABULARY

The app had a positive experience. The launch experience is inviting with introduction slides. Navigation through the app is easy and smooth. The buttons can be improved with the color scheme of the logo. The settings have many options and have the potential to be concise. Usability in terms of task completion was straightforward.

Main takeaway

The main takeaway from this exercise was that a clean and intuitive design, easy-to-understand word presentations, and engaging exercises to help the user practice and review new words is essential. A motivational and habit-building-oriented onboarding resonates more with the user. At the onboarding level, choosing the learning level, as in how much time the user aims to spend on daily learning, is a great idea to measure achievement and progress. A few things to avoid are pushing to set a widget even before the introduction to the words, constant reminders of the paid version, and not providing the option to add your own words.

User Research

To effectively employ user-centered design principles, it is helpful to talk directly to potential users to understand how a design can meet their needs and requirements. Out of the many user research methods, based on its qualitative output and requirement of low sample size, 'User Interviews' was opted for the requirements gathering evaluation stage.

Interview Questions
  1. When was the last time you had to learn new words? Why, what was it for? / When did you last need to study vocabulary for something?
  2. How do you prefer to learn new words?
  3. When it comes to memorizing and learning new words, what methods have you tried? How effective were they?
  4. How do you remember a new word?
  5. When learning new words, what tools do you use? Apps?
  6. What features do you think would be useful to you in a flashcard app?
  7. Is there anything else you want to say or something I didn’t ask that I should know?

Interview Analysis

After combining all the notes from the interviews, the notes were sorted based on what the interviewees were doing, thinking, and feeling. It is essential that one states the results from the user’s point of view. Therefore, the notes were identified and summarized accordingly using the “I” pronoun when possible.

Main takeaway

The main takeaway as an interviewer was that users find graphics and images much more grasping than plain text. As one says, a picture speaks a thousand words. Interestingly, there is a stark difference in learning style when learning a new language and improving an already well-known language. For example, an English speaker would enhance their vocabulary by learning English words, which are text-based, compared to Korean words, which one prefers to learn with pictures. One thing evident from the interviews was that the users learn better by repetition of words and sentences.

Understanding the Problem

After the research of competitor apps and observational data from the interviews, we have key insights regarding the project's direction. Next, we decided to make a Proto-persona. Proto-persona will help us understand the user's point of view even better. By bringing your customers’ perspectives to the forefront, we can give meaning to our research, which will, in turn, lead to more concrete ideas and strategies.
Proto-Persona
The ultimate goal of creating a proto-persona was to generate empathy for the potential users—those for whom we’re designing. It helps in visualizing the project from a user's view. Based on the potential users' needs, goals, and behavior, the following Proto-persona: Bobak, was created.

Needs and Goals

User Stories
As a person working two jobs, I want to be able to take the course at my convenience, and I want my activities outside of work not to be stressful. As a bartender and social person, I want to be able to communicate with actual people through the app so that I can make friends, speak with them, and progress. As a research assistant in Germany, having a good knowledge of German can open doors to many opportunities. As a Tiktok enthusiast, I want to learn the language to make videos in the German language to connect to more viewers.

Problem Statement - What does Bobak need?
Bobak needs a way to learn German on his mobile device because he works multiple jobs without a routine and has limited time to invest in his personal development goals. We will know this to be true when we see that Bobak can consistently study German.

Hypothesis Statement - What can we do?
We believe that by developing a German language learning App with specialized study topics for Bobak, we will achieve having Babak be able to apply German in his workplace, daily tasks, and online video content creation.

Information Architecture

To identify the main tasks the persona will need to accomplish their goals, we visualized how we expect our persona to move through the “information space” of our application. Two task analyses and user flow were defined based on how users flow through that space to complete the main tasks necessary to address the problem statement. Task analysis is key to making sure all of the possible information and navigational issues surrounding the completion of a particular task are considered.

Bobak's two most important tasks are to add a new word smoothly and review his vocabulary words successfully.

Wireframing & Prototyping

After identifying a persona, problem, and the primary tasks necessary to reach a potential solution, it was time to create effective prototypes and wireframes that supported user goals. Following the steps as a guide, sketches of the screens were created to bring the user flow to reality. A sketch acknowledges the incomplete nature of ideas and leaves room for visual exploration and ideation. According to the project's requirement, the wireframe's fidelity was decided as low. For Vokab Lab, a clickable prototype using the online tool Marvel was created based on the collated wireframes. The goal in creating prototypes was to learn as much as possible about how users interact with the product or service designed before developing the complete project.

Interactive Low Fidelity Prototype

Screens

Usability Testing

After rapidly building wireframes and prototypes for Vokab Lab, it was time to enter the “test” phase of the design thinking process. For that, Usability Testing is excellent for measuring the usefulness of a prototype before making changes based on feedback and observation.

As per Don Nielson, elaborate usability tests are a waste of resources. The best results come from testing no more than five users and running as many small tests as you can afford. Therefore, moderated Usability Test of the low-fidelity prototype of the Vokab Lab app was conducted with three participants. The three tests were conducted in person and online via Zoom and Facetime over a span of two days. The usability test had four direct tasks to be performed by the participants. The goal of the Usability Test was to see how easily the participants navigated the prototype and find out what problems they had in completing the given task.

3 Participants
4 Tasks
Age: 18 to 35

Participants were asked to perform the following tasks:

Test report
After the Usability Test, the participants’ comments and feedback were summarised into observations in a usability test report. Each observation was given a severity rating based on Jacob Nielsen’s error of severity rating scale. Based on the severity/priority of the necessary revision, recommendations were made to solve the issues.

Prototype Improvements

Finally, revisions and improvements were made based on the usability test participants' feedback. The goal of the usability test was to point out the issues and rectify them. Specifically, the following changes were made:

- Added BACK button
- Added SKIP button
- Relabelled Audio to Mic
- Relabelled Back to Home
- Relabelled Folder to Word Set
- Changed the Home icon
- Added Confirmation Screen

Graphics Source: Vivek - Glaze.com

CONCLUDING THOUGHTS

In conclusion, the Vokab Lab - UX case study highlighted the importance of a user-friendly interface and engaging learning activities in creating a successful vocabulary app. By providing clear and concise presentations of words and definitions, along with fun and effective exercises and games, a vocabulary app can help users like Bobak make significant progress in their vocabulary studies.

On a personal note, as a language learner myself, I could easily empathize with the users and the problems that occur while using a vocabulary app. Having the idea and capability to improve the experience of the user made me happy. As a UX Designer and lifelong learner, I understood that while researching, one may encounter new ideas and concepts. However, it is essential to refresh the idea that the user's needs and requirements are central. Most importantly, one does not need to start perfectly; things will improve as one goes further.