Study Mockup.png
Log In Mockup.png
Multiple Choice Mockup.png
Remini20211217102459494.jpg

Case Study

Vocabulary is essential. It's a fundamental asset in our lives that is often overlooked. We, as humans, are constantly learning, whether we realize it or not. Although there are many vocabulary apps in existence, most of the users I talked with couldn't name one they frequented often (aside from Google), even though they enjoy learning and seek knowledge often. For this reason, I thought Vocab Bubble, a Word of the Day app for people with limited time available to learn something new, could be very beneficial.

UX Researcher

Role

Tools Used

Pen & Paper

Adobe XD

Photoshop

Zoom

Draw.io

Navigation 1 Mockup.png
Flashcard Mockup.png
Home Mockup.png

Key Research Goals

  • Find out how users learn new information and what sources they're using to learn that new information.

  • Define the issues users are currently having when attempting to gain new knowledge.

  • Plan out which research methodologies to use for this project.

  • Conduct and complete all research methodologies agreed upon in previous goal.

  • Analyze all findings from the research.

  • Sketch out low-fidelity wireframes based on features that are important to the user.

  • Lead usability tests to establish what is working and what needs to be adjusted.

  • Continue testing and iterating until all confusion and pain points of the user have been deleted.

Competitive Analysis

During the Competitive Analysis, I took a look at 3 vocabulary apps...Vocabulary Builder, Lexilize Flashcards, and Flashcards. There were pros and cons to each, but I did realize that an app with the features of Vocab Bubble doesn't really exist, which is always an advantage when your competition is low.

Vocabulary Builder Logo_Transparent Background.png

Vocabulary Builder

Although it took a little time to become familiar with the app, the personalized study experience if preparing for a specific exam is very nice. The aesthetics of the app could have been a bit more appealing, but the simplicity doesn’t distract the user while studying.

Lexilize Flashcards Logo_Transparent Background.png

Lexilize Flashcards

This app doesn’t have a language translator option for phrases, but this is great for a beginner who’s looking to learn a new language. The graphics and colors used are eye-catching, while also being soft and warm.

Flashcards Logo-Transparent Background_e

Flashcards

While this app could be quite time-consuming for the user to add each flashcard they need, the reward is worth it.  It becomes a customized study tool that will help the user greatly. This app is a very basic design, with little-to-no bells and whistles. It could benefit from a little bit more color,  but it isn’t necessary.

Vocabulary Builder 1.jpg
Vocabulary Builder 3.jpg
Vocabulary Builder 2.jpg
Lexilize Flashcards 1.jpg
Lexilize Flashcards 2.jpg
Flashcards 1.jpg
Flashcards 2.jpg
Flashcards 3.jpg

Interviews

With the limited time I had to conduct the research, my main source for collecting user preferences was going to be through interviews. I interviewed 5 participants about their methods of learning new information. My goal was to understand how and why people use the references they do to educate themselves, figuring out the features and functions that would help the average user of this app.

Screen Shot 2021-12-14 at 4.30.34 PM.png
Screen Shot 2021-12-14 at 4.30.59 PM.png
Screen Shot 2021-12-14 at 4.31.14 PM.png

Participants

Peter_Picture.png

Peter

Age: 48

Location: Bothell, Washington

Occupation: Software Engineer

Adam_Picture.png

Adam

Age: 45

Location: Mill Creek, Washington

Occupation: Aerospace Structural Engineer

Barb_Picture.png

Barb

Age: 71

Location: Kirkland, Washington

Occupation: Retired

Heather_Picture.png

Heather

Age: 36

Location: Lake Stevens, Washington

Occupation: Technical Designer

Jennifer_Picture.png

Jennifer

Age: 41

Location: Seattle, Washington

Occupation: Environmental Scientist

Screen Shot 2021-12-14 at 5.38.25 PM.png
Screen Shot 2021-12-14 at 5.39.12 PM.png
Screen Shot 2021-12-14 at 5.39.44 PM.png
Screen Shot 2021-12-14 at 5.40.20 PM.png
Screen Shot 2021-12-14 at 5.41.19 PM.png

Interview Conclusion

After talking with the interview participants, I was able to concretely settle on the features that are most important when learning new vocabulary. The participants are interesting in a flashcard feature, a simple design with calming effects, and straightforward functions without unnecessary buttons and tabs.

User Persona

The average user of Vocab Bubble is someone who is eager to learn. Even if they have just a few minutes of down-time a day, that is enough to still gain that knowledge they're craving. That is how I came up with the persona, Anderson McHale.

Screen Shot 2021-12-09 at 1.25.46 PM.png
Screen Shot 2021-12-09 at 1.57.38 PM.png

Task Analysis & User Flows

Vocal Bubble is a simple to use app with a straightforward objective; however, within the scope of vocabulary, it has all the features and functions the user will need.

Task: Look up definition and save to User Account

 

Entry Point: Open the app

Success Criteria: Click Heart Button

 

  • Open the app

  • Splash screen

  • Create an Account, Log In, or Continue as Guest

  • If Creating an Account, choose to go through onboarding or not

  • If Logging In, enter Username and Password

  • Forgot Username or Password?

  • Home Screen

  • Type word into Search Bar

  • Hit Enter

  • Definition lookup complete

  • Click Heart Button to save

  • No Heart Button available for Guest

  • Return to Home Screen

Screen Shot 2021-12-09 at 3.09.09 PM.png

Task: How to view an existing user's saved words

 

Entry Point:  Open the app

Success Criteria: View definition of saved word

 

  • Open the app

  • Splash screen

  • Create an Account, Log In, or Continue as Guest

  • If Creating an Account, go through Onboarding

  • If Logging In, enter Username and Password

  • Forgot Username or Password?

  • Home Screen

  • Click on Hamburger

  • Click “Saved”

  • Click on word

  • “Saved” list is blank after Creating an Account

  • Return to Home Screen

  • Guest cannot perform task

Screen Shot 2021-12-10 at 3.15.03 PM.png

Low-Fidelity Wireframes

With the features set, I crafted low-fidelity wireframes to begin constructing visuals for the concept. I then took them from paper to computer for the usability tests.

Mockup Devices_Low-Fidelity.png
Mid-Fidelity Wireframes.jpg

Usability Testing

After creating the low-fidelity wireframes, I put together a clickable prototype of a few tasks and conducted the first round of usability test to gauge whether the design and layout was working for the user. I came away with some invaluable feedback and applied it to the subsequent wireframes.

View Prototype here

Screen Shot 2021-12-15 at 9.33.21 AM.png
Screen Shot 2021-12-15 at 9.33.38 AM.png
Screen Shot 2021-12-15 at 9.33.51 AM.png
Screen Shot 2021-12-15 at 9.34.08 AM.png
Screen Shot 2021-12-15 at 9.34.34 AM.png
Screen Shot 2021-12-15 at 9.34.48 AM.png

Findings

iu-10.png

Visually pleasing Flashcard pages, but it would be nice to have another way to study. I created a Multiple Choice option for those that prefer that method of studying.

The Heart button (Save) was hard to find. Recommendation from users was to rearrange the Word of the Day screen to make the heart more noticeable.

Having two Heart buttons on the same page was confusing. Users suggested creating a menu at the top of the page for navigation.

Heart
iu-9.png

Structure of the Study page was confusing. Taking into account what the participants said, I rearranged the page, with the question up top and the two choices below, with a CTA button to continue on.

iu-7.png

Icons were easy to find and understand, but the layout needs work. To address this issue, I played around with the layout for optimal simplicity.

Key Research Goals, Revisited

  • Find out how users learn new information and what sources they're using to learn that new information. The consensus of all users I spoke with was that Google was their go-to resource for learning new information, with a couple adding Wikipedia. Nobody had a vocabulary app that they frequented often.

  • Define the issues users are currently having when attempting to gain new knowledge. Being short on time and busy, as well as finding the apps and sites that are easy to use on-the-go, were the issues most individuals had when attempting to learn something new.

  • Plan out which research methodologies to use for this project. The two research methods I used were user interviews and usability testing. Due to some time constraints, I wasn't able to conduct any other methods.

  • Conduct and complete all research methodologies agreed upon in previous goal. I conducted 5 user interviews and 1 round of 3 usability tests.

  • Analyze all findings from the research. After conducting the user interviews, I was able to create wireframes based on user's wants and needs.

  • Sketch out low-fidelity wireframes based on features that are important to the user. An important feature that I made sure to add in the design was a fast and simple app that will give daily information that someone can learn on-the-go.

  • Lead usability tests to establish what is working and what needs to be adjusted. I was reminded that not everyone learns the same way. With that suggestion, I added a Multiple Choice option as well as the Flashcard feature.

  • Continue testing and iterating until all confusion and pain points of the user have been deleted. Next steps would be continuing on with additional usability tests until all pain points and navigation issues/confusions are addressed. After which, high-fidelity wireframes would be designed and A/B testing would be conducted.

Lessons

At the beginning of the Vocab Bubble research, I was not quite sure what kind of vocabulary app I was going to create. A couple options came to mind, which included a Language Translator app, Learn a New Language app, or a Word of the Day app. After speaking with people who regularly enjoy learning new things, the consensus was this: a Language Translator isn't necessary because Google is so easy to use for this feature. The Learn a New Language app would have taken too long to learn, therefore wouldn't be a quick option to gain knowledge. But the Word of the Day app was intriguing. It's something that Google doesn't necessarily do, and the potential users weren't familiar with any other apps that were WOTD, so the market wasn't as competitive. Gaining insight from participants in all stages of the research process was crucial to learning what type of app would be most utilized.