Project Overview
The Project
As a student in CareerFoundry’s Intro to UX Design class, I was tasked with creating an app that empowers users to learn new vocabulary.
The duration of the project was 1 month.
My Role
I was the sole designer on this project, responsible for end-to-end completion of processes and design. I served as the UX researcher, IA designer, UX designer, and UI designer.
Tools
Draw.io
Marvel
Pen and paper
Zoom
Deliverables
Competitive Research and Analysis
User Interviews
User Persona
Task Analysis
Information Architecture
Wireframes and Prototypes
Usability Testing Report
User Interface Design
Competitive Analysis
Three language learning apps were evaluated: AnkiApp Flashcards, Memrise, and Vocabulary Builder by Magoosh. Analyzing pros/cons and identifying points of improvement helped with ideas of what to include in the design.
User Interviews
The main goal of user interviews was to understand how users approach learning language and vocabulary, and what were their main motivations and challenges. Remote user interviews were conducted with three participants over Zoom.
User Interview Questions
Are you a student, professional, or both? Describe what a typical day looks like in terms of routines and responsibilities.
Tell me about the last time you had to learn a large amount of new vocabulary. What was your motivation? What methods did you use to learn new words?
If you’ve used a language or vocabulary learning app before, what features did you find the most helpful and what features did you find the most frustrating?
How important is it to you to measure your progress? Describe how you set your learning goals and tracked your progress.
What did you find challenging about learning vocabulary?
User Persona
Problem and Hypothesis
Problem Statement
Samantha needs a way to learn a new language because she is a frequent international traveler. We will know this to be true when we see that she is able to have a conversation in the chosen language and navigate new surroundings on her own.
Hypothesis
We believe that by creating a mobile app that teaches foreign language vocabulary utilizing numerous methods (e.g., audio, video, and written) and repetitive assessment for Samantha, we will achieve her goal of increasing her proficiency in a language.
Task Analysis
A task analysis was created in Draw.io for each of the design’s key features to ensure that each step of the process could be included as part of the design. An example is below:
Mobile Prototype
After modeling flows and creating a low fidelity pen and paper wireframe for each of intindi’s key features, a mid-fidelity prototype was created in Marvel. Below are the features included in the prototype design:
Sign in or create an account
Onboarding
Home screen for new and returning users
Select a language, difficulty, and learning module
Learn vocabulary
Take test and view results
View learning progress
Save vocabulary words
Access account admin area
Usability Testing
Usability tests with three participants were conducted remotely through Zoom. Each participant took approximately 10 to 15 minutes to complete a total of six tasks.
Usability Test Script
You are planning a vacation to France and want to become familiar with the language before you go. You decide to download intindi and create a new account.
Direct task: Create an intindi account.After completing onboarding, you jump right in and decide to complete the first module in beginner level French.
Direct task: Start and complete a learning module.It’s time to put your knowledge to the test by completing the learning assessment at the end of the module.
Direct task: Take the test at the end of the module.All the questions have been answered, and it’s now time to review your answers, what you might have gotten wrong, and why.
Direct task: Review the results of the test.Now that you’ve completed the first module, you’d like to see a summary of how you’re doing so far.
Direct task: Review learning progress.During the learning process, you saved some words and phrases to remember. You’d like to review the list of what you saved by viewing “My Vocabulary.”
Direct task: View saved library.
Making Improvements
Expanded Onboarding
The original onboarding design was a simple two-screen carousel providing a high-level overview of the intindi app. Though testers completed the tasks they were given, their experience could have been better if they were given more upfront and specific instruction.
Visibility of “My Vocabulary”
The original design showed “My Vocabulary” only in the administrative portion of the app, so testers struggled to find where their words were saved. Visibility of this function was expanded so that users can view their saved vocabulary from the home, module selection, progress, and account screens.
intindi Mobile Prototype
Final Thoughts
Working on intindi was a helpful introduction to UX design. It gave me a glimpse of what I might expect when working on a larger project.
Lessons Learned
Refer to the persona and project brief often. This helps prevent scope creep and ensures that I’m designing with the user in mind.
Soliciting and considering feedback is essential. Observations and insights can greatly improve a design.
Make buttons and labels as descriptive as possible. Even though something is intuitive to me, it might not be to someone else.
Use placeholders sparingly on screens that explain key features. When conducting usability tests on a prototype, key features should be clearly explained rather than relying on guesswork and placeholders.
Future Plans: Improving the App
Conduct a usability test on the updated prototype and improve the design.
Incorporate more elements of UI design and refine the content and copy.
Create a high-fidelity prototype and test again.