John Gonzalez

Project Overview

A language learning app that provides multiple ways to learn a language. The app also allows you to scan objects and provides the word in targeted language. Example sentences are given based on word and add words to diction library for users to refer to later.

‍

Problem

Many language learning apps provide a single way to learn a language, albeit simple and easy, users can find these apps constricting as each user may learn better using different methods.

‍

Solution

Provide an app that allows users to learn their target language using the method they decide while also providing machine learning technology like image-recognition to help users learn languages faster.

Role:

UX/UI Designer

‍

Timeline:

March 22 - April 16

‍

Tools:

Figma, Google Forms, Maze

‍

RESEARCH

Interviewee #1

"It would be great if the native speaker also spoke your current language"

"I don't use [mobile apps] enough because I lose motivation. It would be great to have something that keeps you interested and motivated to use the app."
Interviewee #2

"I want to be able to understand what my grandparents are saying"

"I want to be able to converse without stopping and not have to think about what else to say"

User Surveys

To understand the users better, I obtained quantitative data through survey that was completed by 21 individuals who knew multiple languages or learned another language.

User Interviews

After learning more about how users learn a new language and their pain points, I wanted to explore the motivations behind learning a language and the methods that users need the most when learning a language. I interviewed two individuals that took my survey and asked them questions to probe deeper to understand their motivations and specific pain points that can hinder them from learning a language. These are quotes from these interviews:

Competitive Analysis

To understand solutions already in the market and find gaps, I conducted a competitive analysis based on popular language learning mobile apps already in the market- Duolingo and Lingodeer.

User Personas

Based on my survey and interviews, I created two personas that mirrored my interviewees and their motivations to learning a language while also reflecting their frustrations.

User Stories & User Flows

To tackle my users' pain points and needs, I wrote user stories that created a foundation to begin designing. Based on these user stories, I created a user flow that jump-started my design thinking to create a solution.

Sitemap

Based on my user flow, I created a sitemap to structure the information better and to create a blueprint to base my design off when I went into sketching out my ideas

‍

PROCESS

Sketching

With my site map and user flow as my starting point, I started to brainstorm solutions to the problem. Once I hashed out the ideas in my head, I started to sketch out actual pages for the mobile app in Goodnotes5 on my iPad.

Low-fidelity Wireframes

I uploaded my sketches into a Figma file to begin digitally wire-framing. Based on my surveys, users have different ways of learning and because I wanted to give my users the options to explore what methods work for them. I give them several ways to learn a new language, including chatting with a native speaker, incorporating their target language into their everyday, and audio and video lessons.

Branding

Before taking my low-fidelity wire-frames into high-fidelity, I explored color psychology and how color impacts learning. Orange builds confidence and is a mood lifter. Blue improves productivity, high levels of thought and build trust.

Based on these colors, I looked for images that created those same feelings and created a moodboard.

From there, I played with different shades and color combinations that I could use in the actual high-fidelity mockup of the mobile app. I took several screens and took them to high-fidelity to test out the colors prior to taking all my screens to high-fidelity. I also decided on Open Sans as my font to make the content readable and clean.

‍

When creating the logo/mobile icon, I was inspired by the speaking in tongues story in scripture and how those not alike were able to understand each other. I find beauty in being able to understand someone in their native language. Because we can express ourselves better in our native language, we can also empathize better with each other when we can understand each other.

High-fidelity Mockups

Based on my style tile, I brought my low-fidelity wire-frames to high-fidelity. I focused on a pastel or lighter shade UI with brighter orange to indicate buttons and actions to take to bring focus to features of the app such as the lessons and daily tasks. I took note of the color psychology I researched and made the chat bubbles when speaking to a native speaker blue to build trust between the user and the native speaker. I also made orange the primary color through the wire-frames to build confidence and motivate the users.

Prototyping and Testing

After taking my wire-frames to high-fidelity, I conducted usability tests through Maze to gather a larger sample size to expose any glaring issues I might have missed when designing.

Here are some feedback quotes from those who took my usability test:

"For starting a video call, you may want to replace the phone icon with a video one. Other than that I enjoyed learning. Love it!"
"Going to gallery through the camera is more intuitive than going to the profile tab to get to the the gallery."
"When I added the picture to my library and that was not the task asked, it broke. The UI is beautiful, but seems a bit cluttered on a small screen."
"Looks great! Slightly confused about where the [image] gallery was and got locked out of it (last question)."

Revisions

As expected, there were a few details I missed that created confusion with the users. Based on the feedback I received from my usability test, I went to make revisions on my screens to address the issues my users were able to find. I revised based on the feedback to make it easier to complete certain tasks.

‍

Revisions (Left = Original; Right = Revision)

  • Image Gallery navigation button in the "Take a Photo" page
  • The "Call" button in the "Chat" page to a video icon as opposed to a phone icon

When I revisited my sitemap, I realized that my screens were straying away from my original sitemap. This happened because the original flow I planned out did not work entirely how I imagined, so I decided to revise my sitemap as well to better reflect my high-fidelity mockup.

REFLECTION

Next Steps

I wanted to design an minimal viable product (MVP) to prevent myself from scope creeping, so I designed fewer screens. Albeit, I still designed screens that I never even tested because I felt like I needed to add more screens to my prototype. Looking back, I should have focused on the main features of the app that would fill the gaps based on my competitive analysis.

‍

Next steps would be to design the rest of the screens that would be included, such as grammar and reading lessons and any settings or notifications that would help users cater the app to their needs.

Lessons learned

There were definitely some assumptions I made while designing which caused confusion for the users. I would like to run some A/B testing which I didn't conduct during this project to prevent my assumptions from creating confusion in the future.

‍

Since I wanted to gather a larger sample size for usability test, I turned to Maze to run my usability tests. Using a new tool like Maze created some confusion for the users that one-on-one usability testing would have alleviated. Because I wasn't able to clarify certain tasks for users, the results of the usability tests from Maze were skewed. In the future, I would probably run more one-on-one usability tests in conjunction with Maze to get a better understanding of any pain points the users faced when using the app. Combining the feedback from Maze and one-on-one usability tests would be the best course of action for future projects.