UX Case Study — Learnlingo, Vocabulary Learning & Translation App
I have been a UI/UX designer since the beginning of my design career. There was not much user research-backed design work when I started working as a web designer. The field of design has gradually progressed, and there is a mass requirement of user research in the field of design in tech.
I knew this much; UX designers rely on data, how people are currently using a product, website, or application. But, I felt a strong need to know the complete UX Design process, user research excites me, and at the same time, it was intimidating. So, I decided to fix that and learn as much as I can about the career I wanted to excel in.
I joined a UX Fundamentals course at CareerFoundry.
I undertook a course project to increase the practical knowledge & techniques to design like a UXer.
As a User Experience design student, my role was to perform a task given to me after concluding each lecture. There were tutors and mentors for guidance if required. Some assignments involved basic research, e.g., competitive analysis, and others involved support from some participants, e.g., User Research.
To build a Mobile App which empowers people to learn new vocabulary.
I built an iOs app called “Learnlingo”. Below is the UX Design Process I followed:
I compared the following three mobile apps — Memrise, Babbel & Duolingo. After noting down the pros & cons of each app, I concluded that among the three excellent language learning apps, user experience-wise, Duolingo & Babbel both were great apps. The only difference between the two was that Duoling seemed to be more fun because of their use of kiddish graphics & Babbel was more solemn due to their usage of conventional colors & usage of actual voice recordings. Both seemed to have a great combination of UI & UX — intuitive and clutter-free to use.
Creating User Persona
I took three user interviews with a goal is to gain insights into the needs and wants of users so that you may better design your app. All three of my participants had experience using similar language learning apps to learn a new language or revise/learn vocabulary.
- I made a list of direct quotes and general thoughts of my participants while conducting the interview, summarising what users were doing, thinking & feeling.
- After the discussions, I summarised what my participants were doing, thinking, and feeling.
I realized how valuable this data was before I start building my product. The user interviews gave me insight into each of my user stories, allowing me to understand what the user persona could be like & what it wants to accomplish.
Based on the interviews, I created a proto-persona & 3 user stories. I also composed problem & hypothesis statements to precisely define goals and constraints, moving forward to build my app.
User Persona — Meet Karan
Karan’s Goals & Challenges
“I have a hectic schedule with work & family life. I hardly get any time for learning new skills or follow my hobbies. I try to push myself to learn the German language, as I understand its importance in my daily life.”
- As a resident, I want to communicate with the locals well to feel a part of the community.
- As a busy professional, I want to learn in the quickest time possible during my commute to maximize that time.
- As a tech-savvy person, I want to use an app that is good-looking & straightforward to use, so I have a good user experience.
- When I get a chance, I want to communicate well with the locals & my colleagues to have better opportunities professionally and socially.
- When I am commuting, I want to make full use of the available time to learn a new skill/language.
- When I use an app, I want to see a good-looking, engaging, and easy-to-use app.
Karan needs to learn German, as he feels that it is essential for him to do so & learning will make a massive difference in his daily life. Due to his busy schedule and struggling to complete his tasks, he cannot integrate learning into his schedule.
It is creating a learning experience that is easy, intuitive & helps him solve his daily life problems — an application with good user experience & fun to use in less time. Thus, creating an app that has features required by users like Karan.
Task Analyses & User Flow
I followed the information architecture as the next subsequent step, thus defining the structure of my mobile app. According to my user stories, I decided on the two most essential tasks for my primary persona. I created user flows for the primary and secondary tasks, focusing on the “happy path” (i.e., the quickest and most effective way to get from the entry point to success).
User flow map of Learnlingo app
Wireframing & Prototyping
I created some preliminary sketches based on the user flow, keeping in mind the feature requirements outlined in the project brief, followed by a clickable prototype.
Here are some initial sketches of Learnlingo app:
I used the clickable prototype with some users for testing my app. I planned some tasks for them to perform within the session. After the session, I created a usability test report, mentioning the severity of each task going from 4 to 1, with 4 being catastrophe & 0 means no usability problem.
Tasks for the users
- Open the Learnlingo App, set it up, and see what it delivers on the whole.
- Some important bank documents came in at your place with the country’s native language, not your language yet. Try translating those docs using Learlingo.
- You are about to go for a backpacking trip to Italy & you want to get a raw feel conversing with the locals and try creating a vocabulary list of the essential words used in Italy.
- You work & live in Germany, your colleague was having a conversation with you & used some German words which you didn’t understand the meanings of, try and translate them using Learnlingo.
- Task 1 had a severity level of 1: All the users find onboarding useful & quick.
- Task 2 had a severity level of 3: Users could figure out the task & do it, though they found some things missing.
- Task 3 had a severity level of 0: All users could do this task with ease.
- Task 4 had a severity level of 4: Most of the users were confused in this ask. Some users found the text confusing & others were confused with features.
According to the user interviews, I made the following iterations on the sketches:
- I improved the conversation flow, added the missing screens like changing languages, giving the user an idea of how can he/she use this feature.
- I added the features like translating images, documents, etc.
- I also tweaked the home screen by extending white space. I made it more intuitive by introducing some missing screens, like adding a new language & proper onboarding.
After the iterated screens were put together, this is how the prototype looked:
Here is a list of steps that I would like to follow to improve my iOs language learning app — Learnlingo:
- As I improved my app sketches, I would like to move on to Wireframing stage & start with the Visual Design Process.
- I would test my high-fidelity wireframes prototype with my users. After the user testing and knowing more about my user’s needs & my product’s value, I would create a brand identity for my app’s design.
- After the designs are ready, I will test them again for validation before going into development.
- Learning the importance of the User Experience design process
- Planning & Execution according to the Design Thinking Process & constraints
- Importance & types of User Testing
- All about User Interviews, why & how to conduct them?
- Storytelling is crucial while presenting any UX project