top of page
logo.png

App Design

UX Fundamentals

vocab_mainscreens-26.png

Tools

software.png

Overview/Role

Under the guidance of two professional UX Designers, I worked on designing a vocabulary learning app, "Vocab in a Flash" during CareerFoundry's UX Fundamentals Course. By performing user research, crafting user personas, and establishing information architecture, I was able to a build low-fidelity prototype for usability testing. This project allowed me to better understand the Design Thinking Process and how to make design decisions based on user needs and wants in order to prevent pain points and frustrations.

Objectives + Key Themes

Empower people to learn new vocabulary.

  • This application is meant to be used on-the-go for quick 5 to 10 minute study sessions.

​

  • It can be difficult to keep track of all the jargon when studying a new discipline. Students need a way to methodically categorize, reference, and study new vocabulary and concepts so they can move forward confidently in their field.

​

  • Design for a specific circumstance.

​

  • Make personalized definitions.

​

  • Make it visual: Whenever possible, think about how to bring concepts and vocabulary to life using visuals. This can help those more visually inclined access the vocabulary in an alternative way.

App Requirements

  • A splash screen, including a logo, tagline, or any current information about the software version or browser requirements.

​

  • A splash screen, including a logo, tagline, or any current information about the software version or browser requirements.

​

  • 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

Overview

Competitor Analysis

01

Word
of the
Day

Untitled-2-11.png
Untitled-2-11.png

PROS​

  1. Splash Screen

  2. Name of app appears on the top right of each page, so you know what app you’re using at all times

  3. Clean layout and overall design. Minimal colors, clearly defined  shapes with simple, contrasting elements

  4. Ability to set and schedule daily notifications

  5. Ability to look up words in the in-app dictionary

  6. Bottom navigation menu is made up of icons that are easy to decipher and allows the user to easily move through the app at any time

  7. User is able to move to the next “page” (screen) with a swipe of the finger, an enjoyable interactive feature

  8. Provides the user with a unique words, definitions, pronunciations, and examples of usage on a daily basis as well as the option to look up additional information on Google

Untitled-2-11.png

CONS

  1. No real guidance or instruction

  2. Contains occasional ads, which are an annoying interruption

  3. You only receive one new word a day

  4. You can swipe backwards to learn additional words, but not forwards, unless you set the calendar to a previous date 

  5. Very few customizable features, other than setting a notification time, that would make this app unique to each user 

Untitled-2-09.png

02

Ultimate
Vocabulary
Buider

Untitled-2-09.png

  1. Sign-in page with customizable options depending on what you are using the app for 

  2. Instructional “assistant” who shows you how the app functions 

  3. An interactive game challenges the user by having them choose the correct definition of  30 words. If they choose incorrectly, 

  4. the word is moved to a list that the user then needs to learn. For each word learned, the user earns “money”. 

  5. Each word includes an image, definition, usage example, synonyms, pronunciation, and origin

  6. The app offers real world help including test prep and college admissions counseling

  7. Large display features and occasional moving elements

PROS​

Untitled-2-09.png
Untitled-2-09.png

CONS

  1. Splash page disappears almost instantly

  2. The Interface design is decent, but not stimulating. Feels a little less than professional. I kept wanting to swipe to the next screen, but would only get the settings page when doing so

  3. Banners ads on the home screen are slightly distracting

  4. The game never changes. Although you reach new levels and new words, it’s the same game over and over

  5. No challengers to play against

  6. I understand the idea behind unlocking new sets of words, but the money aspect doesn’t necessarily seem relevant

  7. The banners and “Your Future” feature (i.e. real world testing/guidance options) make the app seem somewhat sell-y and geared towards a particular audience

03

Flashcard
Hero

Untitled-2-10-10.png
Untitled-2-10-10.png

  1. The user fills out the digital flashcards and can use the vocabulary words of his/her choosing

  2. Each flashcard allows the user to input as little or as much information as is needed, including imagery

  3. The user is able to sort flashcards by topic

  4. There are two functions for using the flashcards, either “memorize” or “multiple choice”

  5. The user can categorize each card as “easy”, “unsure” or “hard”

  6. The user can schedule when he/she needs to learn certain words/flashcards

  7. Stats help show the user which cards they need to focus on

PROS​

competitor-2-12.png

CONS

  1. No splash page or log-in

  2. Not visually appealing. Nothing about the design contributes to the useful of the app 

  3. Difficult to navigate or understand user flow. There are too many navigational features that keep the user guessing

  4. Does not provide any actual vocabulary to the user

  5. “Tutorial” is just a list of Answers/Questions

  6. Cannot see all capabilities at a glance

  7. Limited free trial. Unsure of what additional features the paid version actually provides

  8. Difficult to initially figure out how to add a flashcard (“Edit”)

  9. Stats/Scheduling info is difficult to find - user must pull down for that information to show 

3 Selected Users

User Interviews

Caroline, 69

Retired Opthalmologist

Untitled-2-05.png

​

I am a visual learner but it also helps to hear something in order to remember it.

Susan, 35

General Manager

Untitled-2-05.png

​

New vocabulary would help me in daily life to make my understanding of current events better.

Ervin, 37

Service Recovery Specialist

Untitled-2-05.png

  If I can see it and do it myself, it imprints on me or my mind and I can replicate the task and improve upon it. 

User Research Summary

General overview of important thoughts/quotes from users' interactions with the app.

  • I try to get the best understanding of what my customers need

  • I use my phone for work and entertainment

  • I learn by repetition 

  • I don’t often feel the need to broaden my vocabulary

  • I am a visual learner

  • I Google terms I’m not familiar with

  • I am a multitasker

  • I rely on my phone for various tasks/needs throughout the day

  • I am a problem solver

  • I use apps to stay “in the know”

Doing

  • I feel like I would only need to broaden my vocabulary out of necessity - i.e. for a job

  • I like apps that are constantly providing new info

  • I feel like I learned everything I need to know in school 

  • I feel like visual aids and sounds are more stimulating than just reading information 

  • I feel like I spend most of my day on my phone

  • I feel like a vocabulary app could be helpful, but doesn’t excite me

Feeling

  • I don’t believe that learning new vocabulary is important

  • I believe that apps should should be current and provide up-to-date useful, information

  • I think learning new things can always be helpful in furthering one’s career

  • I think it’s more important to “do” than “see”

  • I believe interacting with other people is helpful in learning

  • I think I might use a vocabulary app if it was entertaining

Thinking

Primary Persona

userpersona.jpg

User Stories

user_stories-06.png

Problem Statement

Eric (pharmaceutical sales rep) needs an engaging way to learn vocabulary because his job is based on communicating with educated individuals.

Hypothesis Statement

I believe that by creating a visually stimulating and sensory based interface for Eric, we will achieve having increased Eric's vocabulary in the midst of a hectic lifestyle.

Task Analysis 1: Log-in

Goal:

A log-in option for a more personalized learning experience

​

Success Criteria:

A personalized account that tailors information and certain interface options based on user input

​

Tasks:

  • Open the app

  • Create account or enter log-in credentials

  • Enter user details: username, name, age, location, phone for in-app social engagement

  • Choose profession category

  • Set alert preferences

  • Select color scheme

  • Sync Calendars to automatically schedule key alert times

  • Confirm account

  • Onboarding

​

 

​

Artboard 7@2x-8.png
Artboard 8@2x-8.png

Goal:

Single user and challenge functionality to help engage user and create a more interactive and social interface 

​

Success Criteria:

An app that gives the user a choice of learning modes - alone through flashcards, or by challenging a friend or random opponent to a quiz

​

Tasks:

  • Choose Learning Mode 

  • Create Decks

  • Add Flashcards

  • Review Flashcards

  • Search Dictionary

  • Hear/See/Read definition

  • Challenge Opponents

  • Answer Quiz Questions

  • Display Challenge Rank

 

​

Task Analysis 2: Learning Mode

Wireframes & Prototypes

With my user, Eric, in mind, I created basic wireframes, sketching out the necessary elements that would allow him to complete tasks outlined in the user flows. Once I had an idea of how I wanted my screens to look, I created a low-fidelity prototype on which I would conduct usability testing to ensure my product was easy to navigate.

wireframes1-16.jpg
Artboard 17@3x-8.png

Basic Wireframes

Low-Fidelity
Prototype

  • Onboarding

  • Login

  • Dictionary

  • Social

  • Settings/Account

  • Flashcards

  • Flashcard Review

  • Challenge

Features

Prototype

Usability Testing

Users

​

After determining the tasks I wanted to test, I enlisted three users who were similar in age and experience as my primary persona and could test my design remotely. 

Artboard 15@2x-8.png

Bill, 33

Realtor

Charleston, SC

​

Artboard 15@2x-8.png

Amy, 34

Sales

Charleston, SC

​

Artboard 15@2x-8.png

Krista, 30

Pre-Press Support & Designer

Albany, GA​

Direct Tasks:​

1. Customize account

2. Look-up a word in the Dictionary

3. Create a new flashcard 

4. Contact another user

5. Complete Challenge

6. Complete flashcard review 

​

 

​

Scenarios:

  1. You like for your apps to cater to your needs. Setup a customized account to keep track of your personal information and achievements.

  2. Occasionally you come across words, during your work day, that you may not know. Quickly look them up in the in-app dictionary and consider adding them to your flashcards. 

  3. You've got a major presentation at work in a few days and you want to better understand the terms you are using. Add a flashcard, containing one of these terms,  to one of your decks.

  4. You found someone during a challenge that's in the same field as you are. Strike up a conversation with them. 

  5. You've studied for days and want to see how much you've learned. Challenge another user to find out who knows more! 

  6. You've created flashcards for an upcoming interview. Review the deck to make sure you're ready! 

​

 

​

Testing Results​

testreport.jpg

METRICS:

0 = I don't agree that this is a usability problem at all; 1 = Cosmetic problem only: need not be fixed unless extra time is available on project; 

2 = Minor usability problem: fixing this should be given low priority; 3 = Major usability problem: important to fix, so should be given high priority; 

4 = Usability catastrophe: imperative to fix this before product can be released

​

 

​

Test

Design edits

After performing usability testing, I was able to create a new iteration of the "Vocab in a Flash" app. Knowing what users found easy and difficult to accomplish allowed me to re-think how they interact with the app and establish a more concrete, user-friendly design solution. 

Artboard 20@2x-8.png

Customize Account

Look up a word in the Dictionary

Artboard 21@2x-8.png

Create a new Flashcard

Artboard 22@2x-8.png

Contact another user

Artboard 23@2x-8.png

Complete challenge

Artboard 24@2x-8.png
Artboard 25@2x-8.png

Complete a flashcard review

Final Solution

Built during CareerFoundry's UX Fundamentals course, the project covered the basics of UX Design, resulting in a user tested, low-fidelity prototype. 

Artboard 18@3x-8.png

Process

View Prototype

Don't want to watch the video?

Continued Exploration

After completing courses in both UX and UI, I decided to revisit this project, with a bit more knowledge and improved skillset, to refine the overall design of the "Vocab in a Flash" app and create a more polished mockup.

vocab_signin.png

View High Fidelity Prototype

Revised User Flows & UI Design

vocab_misc [Recovered]-27.png

Customize Account

vocab_misc [Recovered]-28.png

Look up word in Dictionary

vocab_misc [Recovered]-29.png

Create a new Flashcard

vocab_misc [Recovered]-30.png

Contact another user

vocab_misc [Recovered]-31.png

Complete challenge

vocab_misc [Recovered]-32-32.png

Complete a flashcard review

bottom of page