Vocab App
UX Case Study
This project was completed as part of the CareerFoundry Intro to UX Design program
Project Overview
Objective
The goal of this project was to create an app that would “empower people to learn new vocabulary”
Role: UX Designer
Duration: 2 months
Tools: Pen & Paper, draw.io, Marvel & Zoom
Problem Statement
Users of this app need a way to be able to reference new words or phrases on the go, understand the practical application of the words they are learning and track progress in understanding new vocabulary because they want to feel accomplished and confident in their communications
Solution/Outcome
My solution was to create an app that allowed for easy tracking of past words/phrases learned, including fun, short tutorials to support in learning new vocabulary and an overall experience with limited clicks and easy instructions for a seamless user experience
Project Phases
PHASE 1: Discovery
Competitive Analysis
Competitve analysis was completed as a first step in this project to get a better understanding of current vocab learning apps in the market and uncover potential opportunities
Three apps were reviewed that were highly rated (5 stars) on the Apple App store: Word of the Day, Vocabulary and Atlas
Main takeaway: The Atlas app best met the goals of supporting and empowering users to learn new vocabulary
Word of the day App
-
Basic vocab learning experience with simple value proposition—users are sent a new word each day with the option of receiving push notifications.
-
Design aesthetic is very minimal and Icons used in navigation are unfamiliar & take time to click through to understand
-
Immediately try to upsell users during onboarding, but not entirely clear what comes with the paid version and ad experience can be distracting
Vocabulary App
-
Straightforward, but more inviting, vocab learning experience with the ability to set timing and cadence on word the day reminders as well as option to share and favorite words
-
Icons utilized in the design are familiar, which makes the app easy to use and design includes fun graphics and bright colors to engage users
-
Much of the access is behind a paywall and there aren’t any game options. Users have the option to scale learning and incorporate additional customization for a premium
Atlas App
-
Highly interactive experience that allows users to learn vocab and connect with other users in a variety of ways, however there aren’t any options for notification reminders
-
Design is simple, but includes fun pops of color and a navigation with clearly labeled icons and helpful tool tips
-
Extensive learning opportunities and ways to track learning available to users, with both free & paid options
User Interviews
User research was conducted remotely in the form of phone interviews with three participants to gain insight into their approach to learning new vocabulary
Main takeaway: People are looking for an engaging way to learn vocab, whether that is through videos or visuals, as well as practical application of new vocab to help it “stick” and feel confident when using it. People are also looking for an experience that they can fit into their schedule, at a time that works best for them.
Annie, Graduate Student
-
Likes practical application with visuals to provide more understanding
-
Wants to feel comfortable with a subject to be confident when having a conversation about it
-
Likes for apps to get straight to the action/main screen
Matt, Consultant
-
Feels it’s important to look up new works before utilizing in communication
-
Finds it can be helpful to track and reference words in a spreadsheet
-
Likes being at a desk or office space for learning
Ali, Visual Merchandiser
-
Thinks that watching a series can helpful for learning, along with repetition
-
Being able to listen to new vocab in a sentence can be helpful
-
Tries to fit in learning whenever there is extra time
PHASE 2: Concepting
User Personas
Due to the limited timeline and scope of this project, a Proto-persona was created based upon the insights gathered through generative research and interviews. From this proto-persona, user stories and hypotheses were created to guide next steps in the process.
User Flows
User flows were created using draw.io to outline the two key tasks for this vocab learning app: learning new vocab & adding to history and tracking progress of learning. These tasks were identified as critical steps in helping the user, and more specifically the proto persona, meet their goals.
Task 1: Learning new vocab & add to history
Entry Point: If new, welcome page; If existing, homepage
Success Criteria: Learning a new word or phrase and ability to upload your own sentence using it
Task 2: Track progress of learning
Entry Point: My Account
Success Criteria: Ability to see progress against learning goals
Wireframes
PHASE 3: Prototyping
Using pen & paper, lo fi wireframes were sketched out to map out the first iteration of the app design to quickly demonstrate key tasks and user flows.
Mid fidelity wireframes were then created in Marvel, iterating on the lo fi wireframes to include additional detail in the app experience.
An interactive prototype was then generated using these wireframes to demonstrate app functionality and enable an initial round of usability testing to be conducted.
PHASE 4: Evaluation
User Testing
Usability testing was conducted using the mid fidelity interactive prototype created in Marvel (Usability Test Plan). Three participants completed testing remotely over Zoom and the results were recorded. Participants were provided with an introduction and set of scenario tasks to complete (Usability Script). The goal of conducting usability testing was to get an initial read on the experience and understand any immediate user pain points or confusion.
After completing a usability test report and rating the severity of each observation, three major updates were identified, detailed below.
Issue #1: Preference button
Observation: Difficult to locate "edit preferences" button on Word of the Day screen
Recommended change: Highlight button with contrasting color; reassess placement on screen (top vs bottom)
Issue #2: Upload Comment button
Observation: Difficult to locate "upload new comment" button on Notebook Entry screen
Recommended change: Replace recent application section with this and highlight with action indicator
Issue #3: Update Goal Targets
Observation: Difficult to locate where to update targets on Goals screen
Recommended change: Highlight with button that has constrasting color
Closing Thoughts
Lessons Learned
What worked well:
-
Conducting user research to provide foundation for building out proto-persona and corresponding details
-
User testing provided valuable perspective and allow for quick iteration to enhance user experience
Future Opportunities:
-
Plan further in advance when participant input is needed to limit impact to project timelines
-
When drawing wireframes, it can be helpful to design each screen individually to be able to easily upload to digital version
-
Can be helpful to think about content earlier on in the design process
Next Steps
Updates:
-
Finalize app name and logo
-
Include example content & imagery to enhance designs and enable second round of usability testing on hifi prototype
Future Enhancements
Hypothesis
Adding in multi language capabilities and community experience to connect with other app users
Hypothesis Validation
Through usability testing I would be able to validate my hypothesis and make iterative changes accordingly. For any future user testing I would want to include participants who are new to the app as well as users who have previously tested so I would have both points of view.