Voca Loca – UX design case study

Project Brief

This project was about developing a mobile app that would enable people to learn new vocabulary. A case study from CareerFoundry.

Basic App Feature Requirements

• An onboarding page (a screen or screens that show the user the basics of getting started)
• A way to sign up and log in that allows users to input and save their personal information
• An admin area where users can access their information
• A menu that allows users to navigate the application
• A way to upload new vocabulary words and definitions that allows users to input their own definitions, written or otherwise
• A means of reviewing vocabulary that allows users to study efficiently and effectively

My Role

As a UX / UI designer, I developed the idea, conducted user research, User personas, information architecture, wireframes and prototyping, user testing, and project communication.

Tools

• Adobe XD
• Marvel
• Pen and Paper

Time

• Concept: 2 Weeks
• Presentation: 2 Days

The Design Thinking Process

In this project I used the Design Thinking Process to organize and plan the individual phases of my design. This provided a path to follow and allowed me to iterate based on new findings and feedback. Next, each of the steps in the process is explained in more detail.

01 understand

For Voca Loca I needed to understand what the problem on the market was. Which apps were already available in this sector? The first thing I needed to figure out was the problem. To do that I began with competitive analysis. Through secondary research I came to understand the goals and thus started to write user stories.

Please feel free to check the Competitive Analysis here.

02 Observe

To make informed decisions on how the app would solve certain problems, I conducted user interviews with 3 participants, in order to gather information and develop a broader understanding of the needs of potential users of Voca Loca. To get useful feedback, some open-ended questions were created to confirm or refute the design strategy. The goal is to uncover the basic needs and pain points of learning some vocabulary.

User research Questions

  1. Why do you learn a new language or why do you think it’s good to learn a new language?
  2. How much time you are able to invest per day/week?
  3. When you are learning a new language, in which way you are doing it? And why?
  4. Tell me about a time you’ve been frustrated with jargon and new vocabulary. Why was it frustrating? Is there something that could have made it easier for you?
  5. When did you last try to learn new words? What did you use to do so?
  6. Do you think you could combine learning languages with one of your hobbies? What hobby are you thinking of and why do you think it works or doesn’t it?

After receiving the subjects’ responses, I evaluated them in 3 categories, “Doing,” “Thinking,” and “Feeling.”
Some common themes emerged, for example that the participants had at least once thought about learning a language with the help of an app. Or they think they don’t have time to learn a new language.

Please feel free to check the Interviews in detail here.

03 Point of View

This step was about collecting the data and creating a conceptual guideline for Voca Loca that I can use during planning and development.

User Personas

Using the data from my research, I have created a User Persona for Voca Loca, which represents the target group. That enabled me to structure the profile of potential users and focus my design decisions on actual needs, goals, and motivations. Based on the answers of the user interviews, a proto-persona was formulated in cross-section. The persona is created to keep in mind during development exactly for whom the product is being developed. This is done with user stories, a problem statement, and a hypothesis. When creating a user persona, special attention is paid to the functional requirements in the project brief.

Robert Schmidt

„I like to travel and make new contacts with people. And I want to pursue an international career.“

• As a backpacker, Robert often goes on low-budget trips and uses the Couchsurfing App.
• He is interested in music, festivals, people, and dogs.
• In a group of people, he is mostly the person who creates harmony.
• He lives together with his best Friend in an Apartment.
• He is spontaneous and dreamy which goes hand in hand with a bit of unstructuredness.

Challenges Faced by Persona

„As a backpacker and couch surfer, I want to be able to talk the basic vocabulary of the country, so that I can connect faster with people and become friends and insiders of the place I am.“

„As an extroverted person, I want to learn in a group, so that I can stay motivated.“

„As a spontaneous and dreamy person, I want an app that reminds me of learning andmotivates me, so that I can study regularly.“

Problem Brief: Needs and Solution

What Robert need:

•  Learning the language through conversations.
• Visualization of the vocabulary.
• Memories and fellow students to stay motivated.
• An option to photograph texts which are then translated.
• Native Speakers for training and cultural exchange.
• An option to practice pronunciation correctly.

We believe that by creating a way for Robert to connect with other users, we will achieve that he can prepare himself well for his travels.

Problem Statement

Robert needs a way to talk with people with little vocabulary because he likes to connect with people and have special trips with insider tips from locals. We will know this to be true when we see he routinely uses the app and train his vocabulary and shares his first successes with other users.

User Flows

Based on the user persona, I created user flows to structure the most important interactions and to define the tasks and processes that a potential user should go through in order to meet his needs.

Please feel free to check the User Flows in more detail here.

04 Ideate

The brainstorming phase is an important transition step from getting to know the users and their problems to developing solutions. Now it was a matter of understanding which steps the user personas would take within the app.

Low-Fidelity Wireframes

In order to plan the information hierarchy, the allocation of space, and the functions that should be available on each page, I sketched the first wireframes. This left room for visual exploration while focusing on structure and functionality without worrying too much about styling at this point.

05 Prototype

Prototypes are used for the testing phase of a design process: to determine how users behave with the prototype, to identify new solutions to problems and to find out whether the implemented solutions were successful or not. I created an interactive prototype with Marvel.

Please feel free to check the Prototypes here.

06 Test

I looked for people to do this testing and conducted some interviews. I carried out the usability test with 3 participants to make sure that they resemble the user personas of Voca Loca. The aim was to evaluate the learnability, efficiency and satisfaction of new users who interact with the app.

Usability Test Plan

Sign in: Create a new Account.

Go to Lesson: Click the Right Pair with the  vocabulary „Boy“. 

Go back to Homepage.

 Make a Post.

Please feel free to check the Usability Test in more detail here.

 

Usability Test Report

What failed:

Sign in: Create a new Account.

•  The Users Understand how to Sign in to the App. Only one person was to fast and tried to Log in and then he couldn‘t go back to the previews version.

• There has to be the option in the Prototype to go back to the Sign in.

Go back to Homepage.

• Go Back to the Homepage was a bit more difficult because the users didn‘t realize that they have to close the lesson with X to go back.

• There has to be a Menu.

Next Steps

A built-in calendar with daily exercises and notificationsto remind the user and motivate them to stay tuned.
A ranking with Classmates.
A Users-Profile with Level and co.

Learnings

Overall, in this case study I found out in which direction the app needs to evolve, and for each additional feature within the app the design thinking process is applied. Points 1-3 can still be optimized, whereas points 4-6 are the natural workflow to develop further features within the app, as it was done for the two userflows “Sign in” and “Make a Post”. Through user testing, you find out which of the flows still need to be optimized to create a good user experience.

For me as a designer it was exciting to accompany the process completely from the beginning and to work out every step in detail. It saves a lot of time afterwards, because all steps are considered in advance.

Pros:

+ It‘s important to keep the app simple
so that you can keep track of things.

+ The user personas make it much easier to design
the app’s functions.

CONS:

– To find some usability Tester is not that easy
 and costs time.

– Create a user flow is more difficult than I thought.