Vocably
Overview
The Challenge
Design an app that empowers people to learn new words.
The Goal
The program was focused on 5-10 minute study sessions that could easily be accessed on a bus, train, or someone’s lunch break. The app must somehow categorize, reference, and study terms so users can honestly learn and feel confident in each phrase.
Design Thinking
The process used to create my designs was organized by IDEO and Stanford University. Design thinking is all about solving complex problems in a user-centered way. Keep in mind this process is not linear, meaning tasks often overlap and intertwine.
UX Design (Concept - Lo-Fi Mockup)
My Role
Scale
One Month (February 2022)
Adobe XD | Marvel | Slack | Canva
Tools Used
Understand
Let’s gain a better grasp on our situation in hopes of solving the problem. How about we begin by taking a closer look at our competition…
Competitive Analysis
Below you’ll find a deep dive into one of the top writing & educational programs on the market. This process helps us to consider user expectations, as well as any areas in need of improvement. There were several other programs reviewed during this step, you can find a link to that below.
Vocabulary App
Learn Words Daily!
36K Ratings | 4.8 | Ages 4 +
"Don't stop learning new words! Looking for tips for improving your vocabulary? Whether you are trying to strengthen and broaden your vocabulary for school or personal growth, the key is a commitment to regularly learning new words.
Why expand your knowledge and use of words? You'll be able to communicate (speak and write) more clearly and concisely, people will understand you more easily, and you will increase the perception (and reality) that you are an intelligent person. Besides, learning new words is a fun activity -- and one you can even do with the people around you. "
Positives
There is solid UI within this app. Vocabulary includes adaptable themes that encourage the user toward the product and embrace their education (some require an ad or paid subscription).
I certainly see this product as beneficial for English speakers that are hoping to expand their horizons.
Mostly caters to visual learning experiences, somewhat auditory.
Negatives
The 'Learn More' button links directly to a Google search page. This works, yet it could be organized better. Users might wonder why they're not just initially using that site. This might even be a good opportunity to connect with another app and collaborate on something mutually beneficial.
Characters shown during onboarding are all Caucasian males and females, a more inclusive design would lead to a wider and more supportive customer base.
This app’s auditory function only pronounces a given word, yet does not read definitions aloud. Considering the needs of users with visual impairment, it would be better to include audio definitions, phrasing, & pronunciation that are read aloud as well.
Vocabulary’s widget
Varied themes appeal to everyone in demographic
Key Insights
Overall, the analyzed app seems to satisfy its goal of teaching words to its users daily. During the onboarding process, users are encouraged to create a widget that sets up a word and definition on their phone (this includes a good variety of options).
01/
Users have a lot of freedom when setting personal reminders on the app, this could be good for students who are in school part-time, for example.
02/
I would say this is a quality product, I have honestly continued to use the app after downloading it for research.
03/
Observe
With a good idea of our marketplace in mind, now we can consider the needs & wants of the customer base. Human-centered design is an approach that helps us to create products that people actively enjoy and might even be excited to use!
Here I scheduled meetings with varied members of our target audience. I created a set of questions focused on the advancement of the project. Each Interviewee was asked the same set of questions during our meetings. I then organized a word cloud of stand-out quotes from this round of research.
Point of View
All of the gathered information was then organized into one Proto-Persona. This essentially provides a simplified version of our demographic or those who are most likely to be using the product.
Meet Joanna
Demographic
28-year-old | Female | Scottish-American | Resume Writer | Enjoys creating decorative pottery that she sells on Etsy.
Behavior
Kind | Bright | A kinesthetic learner who appreciates visual aids.
Needs & Goals
Joanna writes for others regularly, so there is little room for error. She spends a lot of time digging for the right words, which means the organization would be a priority within a program.
She works with an international company, meaning Joanna will often use impromptu translations to communicate with others at work. Supposedly she would love an opportunity to speak confidently with her peers & clients, yet is certain she does not always pronounce terms correctly.
Joanna finds she retains information best when it is fun, visually appealing, and she can study it regularly. Repetition and active implementation have worked best in the past. She also mentions that long-term reminders to stay engaged are often helpful, too.
“Stay away from anyone who tries to disparage your ambitions. Small minds will always do that, but great minds will give you a feeling that you can become great too. “
- Mark Twain
Problem
Joanna needs to find a way to quickly comprehend & communicate phrases from varied languages because she speaks & writes with other nationalities often.
Hypothesis
I believe that by building a universal gaming thesaurus, we will achieve a 34% increase in Joanna's customer satisfaction, leading to 15% more clients, and a 23% increase in her overall income.
Ideate
During this step, we'll begin to put all of our ideas together for users like Joanna. Below we contemplate any important program architecture and finally put pen to paper, creating a physical product!
Task flows & Site Mapping
During architecture, we consider the steps that users are most likely to take within the application, then begin outlining any necessary and worthwhile pages to include.
Next I begin to draw out the wireframes, these are similar to the blueprints for the program…
Hand-Drawn Frames
Low- Fidelity
After the plans for the site have been well-thought-out, we can jot down a few initial sketches for our pages. This rapid prototyping step is intentionally quick, saving room for more detail in the design process later on.
Test
All of the gathered information was then organized into one Proto-Persona. This essentially provides a simplified version of our demographic and those who might be using the product.
Usability Testing
The Test Plan
Scope
The application, Vocably adheres to the four predominant learning styles of visual, kinesthetic, read/write, and auditory. The main goal of this app is to teach users new words in either their language or another while accessing appealing, fun games and practice terms for further learning.
Equipment
Participants needed internet access, and Slack account.
Now that we have a substantial product for potential users to try out, how about we try another round of research to see how our demographic will respond to the product so far?
Schedule & Sessions
These interviews were held on March 19th and 20th, 2022. I met with each user through Slack video. (Remote 1-1 Interviews)
Metrics (Nielsen Norman Severity Ratings)
0 = I don't agree this is a usability problem at all
1 = Cosmetic only: unnecessary to fix unless there's extra time on the project
2 = Minor usability problem: fixing should be given a low priority
3 = Major usability problem: important to fix and should be given high priority
4 = Usability catastrophe: imperative to fix before the product can be released
Participants were asked to run through either direct or situational tasks, as we observe to understand the current state of usability and gather user ideas.
Search a word from the thesaurus
Play a game
Create an account
Find vocabulary in a second language
Direct &
If you were to find a definition on the site that you felt could be phrased better, how would make this correction?
If you decide you want to change the application color pallet to something more appealing. Where would you go to do that?
You have just saved a bunch of new phrases and would like to practice them before an upcoming meeting. How would you do that?
In a hurry to access the application, you feel you may have missed information on how everything works. How would you figure this out?
Scenario Tasks
Usability Test Report
Other notable thoughts arising from research that aren’t shown in this section of the report
One user was unfamiliar with the jargon or phrase ‘onboarding' .
It was also recommended to refine the word rating system a bit more.
Direct Task
A
Users completed this task through a few different routes without trouble. There were even positive notes regarding inclusive features.
Participants all seemed to quickly or easily achieve this goal. One noted the nav ‘gaming’ icon could be changed as it looked like an ‘on’ button.
B
C
Two participants figured out this task with ease, the other had initial trouble with the actual prototyping site (Marvel) yet soon understood how to complete the requested task.
D
One user found this to be particularly simple, the others did not have trouble accessing the feature.
Observation
Severity
0
1
1
Recommendation
Going forward, I'd like to organize the page more, yet I'm sure this will happen naturally as things progress.
I imagine that most people recognize this symbol as universal for gaming. Yet to lessen user confusion, I did a bit of research to find the best alternative.
Share onboarding tutorial prior to meeting & make sure that the account tab links to 'sign up' or 'login' with new users.
0
Don’t fix it, if it’s not broken.
Prototype
All worthwhile insights and findings from the research are now implemented into the latest version of our design shown below.
Digital Wireframes
Low- Fidelity
Here we get to see our hand-drawn sketches refined and brought online through Adobe XD. This organizes content & layout before working through details like color & typography.
Games
New ‘Play’ icon as requested from user research
Universal Thesaurus
Reorganized navigation bar for balance
Hamburger Menu
New 'Signup' and 'Orientation' options in dropdown
Accounts
All features organized in one place
Search Results
Pop-up description of emoji ratings
Retrospectives
About halfway through the project, I became concerned I had focused too heavily on the ideas of one participant opposed to several from research. While I suppose this could be beneficial in certain situations, I was worried I could have excluded a large part of the demographic and any worthwhile ideas.
Next Steps & Learnings
With Vocably, all learning styles have been created for. We considered how the human brain works, through engaging activities and repetition. The program includes several inclusive features, such as auditory definitions and pronunciation to stand apart from our competition and widen our customer base.
Users can regularly learn new terms as well as reference back their previous ones. You could play short word games during a commute or while taking a break during class. Every provided strategy is known to keep users interested, engaged, and actively coming back to the program, to obtain dopamine (fueling motivation or drive) and learn something new!
Going forward, I'd like to develop a mid-fidelity prototype, and create some visual UI design for the project. I might even enjoy setting up a survey or additional interviews, then applying my findings to the app. Regardless, it looks like we now see a bright path for Joanna to thrive in her career.