SpeakEasy:

A Case Study in Mobile Application UX Research and Design.

A language learning platform that focuses on tonal languages starting with Vietnamese. With an emphasis on speaking skills, the app gamifies the learning experience aiming to create a fun and engaging user experience.

Overview

Roles & Responsibilities:

UX Designer —
User Research
Research Analysis
Product Strategy
Brand Development
Interaction Design
Low- and Mid-Fidelity Prototyping
User Testing

Tools: Figma, Google survey/analytics

Duration: 1 month

Team: Danielle Martin, Annie Szarmach

The Challenge

  • To develop a language learning app that boasts features to learn tonal languages

  • Primary functions include: access to pronunciation practice and exercises to improve listening comprehension

The Solution

A high fidelity clickable prototype that emphasizes pronunciation practice & enhances listening skills.

Audience

Adults, aged 18-34, who utilize language learning platforms to learn tonal languages

Project Development Process

1 Research

Market Research

Competitive Analysis

User Interview

Journey Map

User Persona

2 Define

MoSCoW Map

Product Goals

Target Audience

3 Design

Task Flow

User Flow

Wireframes

Branding Responsive UI

UI Kit

4 Prototype & Test

High-Fidelity Prototype

Usability Testing

Research

Research results

Adults, aged 18-34, who utilize language learning apps to learn Vietnamese.

Research insights

Based on the user surveys and the subjects who were interviewed, I discovered 3 personas:

Nora represents the casual learner archetype. Casual learners use language learning apps intermittently and at their own pace. They may not have a long term goal but to enjoy exploring new languages.

Emily represents the student archetype. Students use language learning platforms to supplement their formal language courses. They appreciate the additional practice, resources and convenience that these platforms offer.

Lia represents the traveler archetype. Travelers use language learning apps to acquire basic conversational skills for trips and vacations. They focus on practical, everyday phrases and vocabulary.

“As a student, I want to be able to practice my pronunciation while on the go since I have a busy schedule and I’d like to use some idle time studying.”

User stories

“As a casual language learner, I want access to the basics of a language, so that I can have a good foundation even though I don’t have a consistent learning schedule.”

“As a traveler, I would like to acquire as many usable phrases and vocabulary as I can for everyday use.”

After getting an understanding of our user base, and before conducting usability tests with relevant potential users of the SpeakEasy mobile application, I conducted a S.W.O.T analysis of the applications and similar products and services our user base stated they were already using. The S.W.O.T analysis allowed me to evaluate the main competitors and understand their strengths, weaknesses, opportunities, and threats. This gave me a deeper understanding of the market and helped us to make informed decisions about the direction of our project.

We looked at 4 different competitors:

Competitive analysis

Define

  • 80% of respondents were 18-34 years old

  • 57% of respondents want to learn Vietnamese

  • more than 30% want to improve their speaking skills

Who is our audience?

  • Access to pronunciation practice

  • Access to dictation practice to improve listening skills

  • Provide useful, everyday vocabulary

Business goals

  • Finding resources to improve pronunciation skills

  • Finding resources to learn less commonly taught languages

  • Adapting to different dialects or accents in the destination country

  • There are too many steps when first using an app

User pain points

MoSCoW is the acronym for a concept called Must Have/Should Have/Could Have/Would Have. I utilized this conceptual tool to analyze the ranking of language learning platform features and compared them to the insights collected from my user surveys and interviews to determine my product MVP.

MoSCoW map

Must

  • pronunciation

  • listening comprehension

Should

  • vocabulary

  • useful phrases

Could

  • reading skills

  • cultural insights

Would

  • grammar

  • community forum

  1. takes users from the landing page straight through to the main app

  2. established the necessary navigation layout for the app

  3. each page noted in these flows was created and tested in wireframes and mockups as detailed in the following sections

The main user flow

A simple application was designed for learning tonal languages starting with Vietnamese. It emphasizes practice on skills needed to have a conversation, like pronunciation practice to improve speaking and dictation exercises to enhance listening comprehensions in addition to having a phrasebook available.

The solution

Design

Brand moodboard

Since this app is about learning Vietnamese, the moodboard consists of many images that I think represent Vietnam. The colors used in the app are pulled from these photos, and the goal was to create a simple app that is reminiscent of the scenery found all over Vietnam.

UI Kit

I chose the typeface based on the following criteria:

1. Readability: appears sharp and clear catering to users with different screen resolutions, which is great for small design elements

2. Versatility: comes in multiple weights and styles, which contributes to information hierarchy and distinguishes headings, body text, and other design elements

3. Accessibility:

  • offers clear distinctions between characters, which reduce the risk of confusion between visually similar letters or numbers

  • offers clear distinction with letters so it’s great for headings and bigger design elements

4. Aesthetic: has modern and clean aesthetics, which contribute to a simple, yet visually pleasing, contemporary design

I chose colors that represents the country of Vietnam in my eyes:

orange: represents my favorite Vietnamese food bánh xèo

  • confidence

  • enthusiasm

  • warmth

bright green: reminiscent of the hearty amount of sauce in a deep dish pizza

  • optimism

  • growth

red: inspired by the traditional áo dài

  • passionate

The app invokes positive feelings in order to motivate engage with the app and improve their pronunciation.

Prototype & Test

Sketching and wireframing played a crucial role in the development of the language app. It provided a visual representation of the app's layout and flow, allowing me to ensure its usability and accessibility for all users.

Sketches & Wireframes

By creating low-fidelity prototypes, I was able to gather early feedback and make any necessary changes before moving forward with the visual design. This helped to streamline the design process and save valuable time and resources.

Usability testing

Scenario:

You are a sales rep prepping for a trip to Vietnam. You have a month before your trip and have been looking for an app to help you with the language. A new app was just released by the local community college and you want to try it out. You want to start practicing right away to build up your speaking and basic conversational skills.

Tasks:

  1. access the app

  2. start pronunciation practice

  3. enter writing practice door

  4. find the phrasebook

The usability test of the low fidelity prototype showed that the wireframes needed more indicators of what the featured content is per page and verbal guidance. As shown below, there were many areas of the app that needed improvement.

an average of 70%

of the users had a difficult time navigating to the practice pages

What did the user say?

100%

of the users commented that they like that they were able to use the app right away without needing to input any info

100%

of the users commented that they would like there to be more guidance or labels to indicate the contents of a page

Improvements from the wireframes and low fidelity prototype:

  • added icons that can be seen through each doorway to represent the content within

  • added guiding text for each exercise

  • more details

  • created a mascot

High Fidelity Prototype

version 1

  • ​Improved app accessibility by adding elements that can be seen in the doorways to represent featured content

  • added an app mascot to enhance user engagement

version 2

version 1

  • ​Improved app accessibility by adding labels to the back buttons so the user always know what feature they are using

  • added additional visual elements to increase engagement

version 2

version 1

  • Improved dictation practice pages by including written guidance and indicators

version 2

The final prototype is linked below. This prototype is fully clickable and allows users to follow the main user flow of improving speaking skills, listening skills, as well as access useful vocabulary.

Final High Fidelity Prototype

Final Thoughts

    • The product successfully met the requirements for the MVP set out by the business requirements.

    • The prototype allows the user to travel through the main user flow.

    • Improvements made based on the usability testing improved the overall functionality and accessibility of the prototype to what it is now.

    • graphic design skill limitations made it difficult to create my initial vision

    • typing in Vietnamese was time consuming

    • all of these challenges were eventually overcome in order to create the final prototype

  • This project highlighted the importance of defining the MVP and overall scope of a project.

    Research:

    The importance of conducting thorough research to reveal where your product can fill the gaps of its competitors and understand the needs and mental maps of the target audience

    Design:

    Developing ways to gamify the learning experience was a fun challenge

    Usability Testing & Iteration:

    The need to conduct a usability test to gather feedback on the design and functionality of the app and make necessary refinements to improve user experience

  • As a topic I am passionate about, I will continue to develop the mockups and add new functionalities as I continue to learn and grow as a designer.