Competitor Research | User Interviews | Proto-Persona | User Flows | Wireframes | Usability Test | Conclusion
Client: Student Project at CareerFoundry
My Role: Entire UX design process from research to conception, prototyping and testing
Project Time: 19 days
Main Design Tools Used: Pen & Paper, Marvel
"How might we design a mobile app that empowers people to learn new vocabulary?"
That was my first problem statement in all of UX Design. To solve this issue, I designed "Vocab Gamer".
Vocab Gamer is an app that allows the user to learn new vocabulary playfully. It serves as a secondary learning option especially for expats who want to learn the language of the country they're live in.
This was my first project learning the In's and Out's of UX Design with the Study program of Career Foundry. Already on day one in the course, I was thrown in at the deep end with this project. It was challenging, but very quickly it made me fall in love with User Experience.
Altough I was working full time as a recruiter beside this project, I was able to present my tested prototype after just 19 days.
Here's my journey:
DAY 1
Exploring Vocabulary Learning Apps
As my first step in the UX World, I looked at other apps for vocabulary to figure out the positive and negative attributes from competitor apps and how they try to solve the issue.
Two apps I looked at were the vocabulary feature of Babbel and an app called Vocabulary Trainer
Babbel:
It was actually hard to find negative points in Babbel's User Experience. I especially liked the positive reinforcement the app provides and that the pictures and illustrations give you a local touch of the language you are learning.
Vocabulary Builder:
This app aimed at students who are learning for vocabulary test, didn't convince me as much as Babbel.
One major downpoint for me was that the home screen looks rather busy. It lacks whitespace and the color scheme is a bit strenous.
I didn't know about whitespace on Day 1, but now the "older and wiser" UX Designer in me can clearly say that the missing whitespace is the major issue :)
Key Takeaways:
Add enough whitespace
Provide a cultural touch
Implement positive reinforcement
DAY 2
Identify the actual needs of the potential user
As my second step on this project, I needed to figure out the users thoughts, desires and needs. To do that, I scheduled User interviews. Luckily, I had friends who were learning a new language at the moment and agreed to participate in interviews.
USER INTERVIEWS
Interview Questions:
Tell me a little bit about yourself? What is your profession, what do you do in your free time?
How would you describe your experience learning a new language?
How was your routine like in learning a new language?
What tools did you use to learn languages in the past? Which one was the most helpful for you?
What is the most challenging part about learning a new language for you?
What was the most joyful part about learning a new language?
What was frustrating in learning a language? (and using an app)
How do you think can an app help best in learning a new language, where do you think an app is less useful in learning a language?
How would you describe your experience learning a new language?
How was your routine like in learning a new language?
What tools did you use to learn languages in the past? Which one was the most helpful for you?
What is the most challenging part about learning a new language for you?
What was the most joyful part about learning a new language?
What was frustrating in learning a language? (and using an app)
How do you think can an app help best in learning a new language, where do you think an app is less useful in learning a language?
Interview Participants
3 In-Person interviews, M32, M30, F21; Duration: ~20 min
Quotes
Key Takeaways:
Build an easy to use and flexible solution
Make it fun
Big struggle is pronunciation
It cannot replace a proper in-person language course
DAY 5
Understand the user's point of view
The interviews gave me very valuable insights to understand the users needs. Now I needed a way to highlight their goals and behaviours. I used a proto-persona, to craft meaningful user stories, problem statements, and hypotheses that will come in handy during the ideation phase.
PROTO-PERSONA
User Stories:
As Isabella, I want to learn vocabulary in little games, so that I stay motivated.
As an expat, I want to have my vocabulary presented in day-to-day dialogues , so that I can communicate in everyday life.
As Isabella, I want to have the option to listen to words, so that I improve my pronunciation
As a person who uses a lot of public transport, I want an app that allows me to start and stop learning whenever I want, so that I can use travelling time in an efficient way.
As an expat, I want to have my vocabulary presented in day-to-day dialogues , so that I can communicate in everyday life.
As Isabella, I want to have the option to listen to words, so that I improve my pronunciation
As a person who uses a lot of public transport, I want an app that allows me to start and stop learning whenever I want, so that I can use travelling time in an efficient way.
Problem Statement:
Isabella needs a way to stay motivated to countinously learn because she can get along in her work and private life by just using English, we will know this to be true when we see that Isabella is learning vocabulary on a daily basis.
Hypothesis Statement:
We believe that by gamifying the experience, presenting vocabulary in little games and adding achievements and milestones for Isabella, we will achieve that she becomes a daily active user.
DAY 7
How to organize content and present information to the user
With a clear picture of my user in mind, I needed to think about how I organize and present the content for the user. For that I looked into how users go through the information architecture to complete the main tasks neccessary to address my problem statement. Two ideas of mine to create a fun experience were a hidden-objects game for the user to play and a diary where the user can record words.
USER FLOWS
User Goal: Play Hidden-Objects Game
User Goal: Upload Vocabulary to Diary
DAY 10
Bringing my initial research and ideas to life
At this point, I’ve explored the problem space, conducted generative interviews, created proto-personas, and outlined the tasks and flows necessary to design a positive vocabulary learning experience. Now it was time for one of the most exciting tasks for me and probably most designers. Creating Wireframes and a Prototype.
WIREFRAMES
Onboarding
Home Screen & User Profile
Hidden-Objects Game
Vocab Diary
DAY 12
Evaluate the prototype before making changes based on observations
Finally I had a prototype of my vocabulary app. Now I needed to see how real people interact with my product. It was time to reach out to my network again to recruit test participants and conduct a usability test.
The test object was my low-fidelity prototype of the vocabulary learning app and I tested the hidden objects game feature, vocab diary as well as managing the user‘s profile.
USABILITY TEST
Scenario Tasks
You want to do some additional practice of vocabulary to your German class and a classmate recommended the app to you.
Task 1
You downloaded the app to do some additional German practice and you want to create your username for the start
Task 2
You want to save your profile data in case you lose your phone.
Task 3
You are on the subway, and you want to play the hidden objects game.
Task 4
You went to a concert and learned some new words reading some signs in the venue. Now you want to add these new words to your vocab diary
Task 5
You want to change your username and upload a profile photo to make your app more personal
Test Participants
IMPROVEMENTS AFTER TESTING
Problem: Where to click in the onboarding process to continue?
Improvement: Add "Next" Button
Problem: Where to save profile data and where to change the user name?
Improvement: Move “save profile function” to „profile overview“ and add icon for change username
Problem: How to play the Game
Improvement: Add an instruction screen before starting the game and and a „help“ button to the game
DAY 19
Presenting my design decisions
Now I was at the end of my Design Thinking process and I presented my design decisions, the process I went through and my updated prototype. This gave me the opportunity to share the exciting things I went through during this process
My project found an end for the time being.
PRESENT DAY
Looking back and looking forward
Going through the whole design thinking process in a very short time with this app as my first project was very valuable for me. While it took some overcoming to conduct user interviews on my second day of my study program, it helped me a lot to become a knowlegeable UX Designer in a short time. The aspect that suprised me the most was, how important user research and testing are. Other eyes can see things very different than yourself As this was my very first project I can see that I have gained a lot more skills since then. Be sure to check out my other projects on this portfolio.
However, I do not view this project as fully concluded. In the next step, I want to map out the missing features of the app and increase the fidelity of my wireframes. So keep your eyes open on my portfolio and stay tuned for part two!
