top of page

Vocab App

UX Case Study

Problem

The initial challenge of the vocab app was to address the users needs, wants, frustrations, and pain points by designing a mobile app in which encourages individuals to learn new vocabulary words

Overview

The innovative, “Vocab App”, is an independent mobile app that was created for auto-didactic learners who desires to enhance their vernacular va the use of effective learning tools. The overall objective is to incorporate the specific features and functions such as (a.) the ability to create an exam, (b.) create a study card, (c.) create a study plan, and (d.) the option to use the app as a guest or subscriber. During the duration period of 6 weeks, my role was a UX Designer, who had the opportunity to work with tools such as Figma, in order to complete the project for CareerFoundry’s Intro to UX Design Course

Process

A competitive analysis was conducted on three existing vocab apps on the market. Also, a user interview was conducted on three participants which ultimately led to the creation of user personas in which exhibited the needs, wants, and pain points of the user. Into the equation, the implementation of an information architecture was generated to illustrate the pathways pertaining to the functions of the app according to the feedback from the users. Afterwards, user flows, wireframes, and prototypes were developed. Lastly, a usability test was conducted with participants to identify and distinguish any user interface (UI) problems, usability issues, as well observe how participants engage in the overall user experience

Competitive Analysis

A competitive analysis was conducted on a total of 3 different apps in order to identify any positive or negative features that occurred within the app. During the process, I compared the features found in the app, how the app worked, as well as its ease of use. Throughout the process, I was able to determine the strengths and weaknesses of each app while identifying areas that needed to be improved to enhance the user experience

AnkiApp

Brainscape

Quizlet

AnkiApp

Positives:

  • AnkiApp offers a total of nine different disciplines

  • AnkiApp offers a feature to migrate the data to the cloud hence allowing the app to become cross-functional among various devices

Negative:

  • Limited features associated with the Basic plan

  • Content of the app offered only with a Premium account

Brainscape

Positive:

  • Simplistic design and login process

  • Concise and succinct onboarding process

Negative:

  • Hinderance of user experience caused by chronic ads suggesting "tips" to target marke

Brainscape[a].png
Brainscape[b].png
Brainscape[c].png

Quizlet

Positive:

  • Users have the ability to import PowerPoint slides, images, and custom notes

  • User interface aesthetically pleasing, intuitive, and user friendly

Negative:

  • User-experience detrimentally impacted due to chronic pop up ads to upgrade to Premium service

Quizlet[a].png
Quizlet[b].png
Quizlet[c].png

User Research

In order to determine the needs, wants, frustrations, and pain points of users, user interview were conducted among three different participants. Interviews addressed explored specific areas among participants such as (a.) the best method of learning new words, (b.) preference on apps and (c.) any specific challenges when engaging in the app. Typically, learning about the problems that participants encountered while using their app of choice, their preferred learning style, as well as features and/or functionalities that encourages motivation were my main focus.

Participants

Kevin Aaron
Age:  32
Location: Brooklyn, NY
Occupation: Program Manager

Ishna Patel
Ag
e:  38
Location:  Atlanta, GA
Occupation:  Human Resources Specialist

Sharon Ortel
Ag
e: 36
Location: Greenville, SC
Occupation: Multi Systemic Therapy Supervisor

Interview Questions

  • When adopting a new skill, subject, and/or trade, what is your process for learning and retaining vocabulary that you consider to be unfamiliar to you?
     

  • During the time when you were learning and retaining exclusive vocabulary, when was there a time that you experienced hardship or felt overwhelmed by the process?
     

  • Throughout the process of learning and retaining exclusive vocabulary, what do you consider to be difficult, simple, or achievable?
     

  • What type of resources have you relied on to assist you throughout the process of learning and retaining exclusive vocabulary?
     

  • Regardless of the device (ex: smartphone, tablet, laptop, and/or a desktop computer), what are you thoughts on using applications to serve as a learning aid for retaining exclusive vocabulary?
     

  • If you had the opportunity to modify any of the features in the app to simplify the process of learning and retaining exclusive vocabulary, what are some of the suggestions that you will make?
     

  • In hindsight, what are some of your favorite and least favorite applications you worked with when learning and retaining exclusive vocabulary?

Kevin Aaron

Ishna Patel

Sharon Ortel

User Persona

Based on the collected data that was gathered from user interviews, I developed a user persona in which displayed the needs, wants, frustrations, and pain points of users

Based on collected data gathered from user research, interviews, as well as the user persona, I was able to develop an information architecture and a sitemap that will exemplify the overall navigation of the app. In order to determine how the app will operate as well as the overall structure, developing the navigation sitemap will provide an array of benefits

Task Analysis #1: Generate Flashcards For Guests

User
Flows #1:

Generate Flashcards For Guests

Task Analysis #2: Recurrent Users Generate Study Time

User
Flows #2:

Study Time For Recurrent Users

Task Analysis #3: Generate Flashcards For Studying

User
Flows #3:

General Pathway Thru The Vocab App To Generate A Set Of Flashcards To Study

Wireframes

After recognizing how the app will navigate, I began sketching wireframes so that the process will reveal the pages and screens associated to resolving specific tasks

Sketches

Onboarding

Onboarding.[Low.Fidelity].png

Task 1: Create Study Plan

Task 2: Create Audio

Task 3: Create Exam

Task 4: Create Games

Study.Plan.Audio.Exam.Games.[Low.Fidelity].png

Prototyping

Once the sketches of the wireframes were completed, I developed clickable low fidelity prototypes

Onboarding

Sign In

Task #1: Create a Study Cards

Task #2: Create Audio

Task #3: Create Exam

Task #4: Create Learning Games

Task #5: Create Study Plan

Feel free to preview the entire low-fidelity prototype

Usability Testing

After creating the low fidelity prototype, I started the usability testing for the purpose of not only obtaining real user feedback on the Vocab App but also validate the specific design decisions that were created

Metrics

Scenario Tasks

1.) You’re placed in a new position in your job and noticed that you are not grasping to the jargon when communicating with your colleagues. You are unaware of the acronyms as well as the terminology. You decide to download and install the Vocab App to assist you in strengthening your vernacular. However, before devoting yourself as a permanent user, you want to explore the features that the app has to provide for guest users. Your ultimate goal is to determine if the features are a good fit to satisfy your needs and wants

2.) After exploring the features and functions of the Vocab App, you decide to join as a permanent user by signing up via email and/or username. Also, you decide to change your password in the profile section

3.) You are taking courses and you need to learn new vocabulary words. Demonstrate the ability to generate an exclusive study card in the Vocab App

4.) You are taking courses and want to prepare for an upcoming test. Demonstrate the ability to generate an exclusive exam in the Vocab App

Usability Test Report

After conducting the usability tests, the participants were able to detect specific usability issues that required minor revision and made recommendations in which allowed me to the necessary improvements to enhance the overall user experience

Modifications to Login Screen

One of the specific changes that I made was to the login page. Modified the word “Guests” to “Guest” and included “No Account” Above “Sign Up”

Vocab.[HomeScreen].png
Vocab.[HomeScreen].png
Vocab.[HomeScreen].png

Modifications to Register Screen

Another specific change was substituting “Input Info” for “Enter Details”

Register.png
Vocab.App.[Register].png
Vocab.App.[Register].png

Modifications to Study Card

Specific changes included substituting the word “Generate” for “New”, including a back button for navigation purposes as well as revising the labeling underneath the “Home” and “Profile” Icon

New Study Card [Low Fidelity].png
Vocab.App.[Study.Cards]..png
Vocab.App.[Study.Cards].png

Modifications to Exam Screen

Specific changes consists of substituting the word “Generate” for “Create” and included a back button for navigation purposes

Exam.[Low.Fidelity].png
Exam.[Low.Fidelity].png
Exam.[Low.Fidelity].png

Modifications to Exam Screen

Revisions consisted of organizing subcategories in an alphabetical order as well as including a back button for navigation purposes

Create Exam [Low Fidelity].png
Create Exam.Mid.Fidelity.png
Create Exam.High.Fidelity.png

Revisions

In retrospect, I determined that the main purpose of the project was to comprehend the common techniques, methods, and practices associated with the user experience. In addition, I learned that importance of remaining attentive to the needs, wants, and pain points of the users. The main reason is because the users are your target market. Being that designers are not creating the project for their own specific interest, designing should always focus on addressing the needs of the users for the sole purpose of enhancing the overall user experience. Most importantly, I learned that in order to remain focused on the users, the usability test is a powerful tool to implement to comprehend demands of your target market.

Above all, though there is still a lot to be done to convert the app into a complete project, it is important to note that the main purpose behind the development of the project was never reaching a completed product. The overall goal was to learn and adopt the most common techniques and practices of user experience design. 

Sign.In.png

Sign In

Audio.[a].png

Search Categories

Audio.[e].png

Upload Audio File

Audio.[b].png

Select "Audio"

Audio.[e].png

Save  Data

Audio.[c].png

"Audio" 
Confirmed

Audio.[f].png

Audio File 
Saved

Sign.In.png

Sign In

Study.Cards.[e].png

Create 
"Study Card"

Study.Cards.[b].png

Search Categories

Study.Cards.[f].png

Input Data

Study.Cards.[c].png

Select "Words"

Study.Cards.[g].png

Save Data

Study.Cards.[d].png

"Words" 
Confirmed

Study.Cards.[h].png

"Study Card" Saved

Splashscreen.png

Splashscreen

SignUp.png

Sign Up

Register.png

Input Info

Sign In.png

Sign In

Splashscreen

Onboarding.[e].png

Onboarding (e)

Onboarding.[a].png

Onboarding 
(a)

Onboarding.[f].png

Onboarding (f)

Onboarding.[b].png

Onboarding (b)

SignUp.png

Sign Up

Onboarding.[c].png

Onboarding (c)

Register.png

Input Info

Onboarding.[d].png

Onboarding (d)

Sign In.png

Sign In

Sign.In.png

Sign In

Exam.[d].png

Create 
New "Exam"

Exam.[a].png

Search Categories

Exam.[e].png

"Exam" Offers Words To Study

Exam.[b].png

Select "Exam"

Exam.[f].png

"Exam" Offers Meaning To Words

Exam.[c].png

"Exam" 
Confirmed

Exam.[g].png

"Exam" Saved

Sign.In.png

Sign In

Study.Plan.[a].png

Search Categories

Study.Plan.[b].png

Select
"Study Plan"

Study.Plan.[c].png

"Study Plan" 
Confirmed

Study.Plan.[d].png

Create 
"Study Plan"

Study.Plan.[g].png

Input Data
(a.)

Study.Plan.[f].png

Input Data 
(b.)

Study.Plan.[j].png

"Study Plan" Offers Words To Study

Study.Plan.[k].png

"Exam" Offers Meaning to Words

Study.Plan.[g].png

Input Data 
(c.)

Study.Plan.[l].png

Save Data

Study.Plan.[h].png

Search Categories

Study.Plan.[i].png

Select
"Preview Study Cards"

Study.Plan.[m].png

Admin / Profile

Study.Plan.[n].png

"Study Plan" 
Saved

Sign.In.png

Sign In

Learning.Games.[d].png

Create 
"Learning Games"

Learning.Games.[a].png

Search Categories

Learning.Games.[e].png

Select  "Learning Games"

Learning.Games.[b].png

Select "Learning Games"

Learning.Games.[f].png

Input Data

Learning.Games.[c].png

"Learning Games" 
Confirmed

Learning.Games.[g].png

"Learning Games" Saved

Information Architecture

Feel free to preview the entire mid-fidelity wireframes

Feel free to preview the prototype

bottom of page