Role
UX Design
Duration
2 months
Skills
Research; Data analysis; User stories; User personas; Wireframing; Prototyping; Usability testing
Tools Used
Lucid Chart; Gliffy; Marvel, Microsoft Office
Project Vision
Problem Statement
Users need a way to understand and retain large volumes of new vocabulary that will appear on the GRE exam, because learning parrot fashion alone will not help them demonstrate comprehension in the test. We will know users will have achieved this when they are able to recognize and apply the vocabulary in both spoken and written formats on the app.
Hypothesis Statement
I believe that a visually intuitive vocabulary app that covers listening, speaking, writing and reading with relatable context, can provide a multi-faceted approach to learning that will help users master the vocabulary. This will help user confidence when tackling the various GRE question formats.
Competitive Analysis
Pros, cons & SWOT profile
With a clear problem statement in mind, I began a competitive analysis with two vocabulary learning apps: Pleco, Galvanize and Magoosh. I looked at pros, pain points and notable features of all three. Below, I focus on Magoosh, another learning platform geared towards GRE revision.
Competitive Analysis Summary: Based on Pleco, Galvanize & Magoosh
Must Haves:
• Welcoming onboard page
• Simple layout, intuitive format and flow (limit options!)
• Uncomplicated side bar menu
• Clear way to return to main menu at all times
• Progress visually represented to user
• Example sentences /context given in vocab definitions
• Learning structure (visually clear ahead of time): show what’s coming but not inundating)
• Flexibility (allow some moving on without losing structure)
• Test user on word meanings before revealing answers
Nice to Have:
• Ability to alter prompts on flashcards (e.g. pronunciation, size of font etc)
• User ability to add their own vocab to their flashcard repertoire
• Motivation techniques (e.g. progress bar / points awarded)
• Allow user to test themselves on various aspects of new vocab E.g. handwriting input, pronunciation (phonetic notation & voice recognition practice), spelling, definitions, synonyms, in context of sentence etc
• Setting options allowing computer use; left hand users; disabilities (easy read version)
• Consider user finding vocabulary via synonyms / key word search function
• Definition details (pronunciations, pictures, example sentences, synonyms, antonyms, etymology)
Points to Avoid:
• Pop-up ads
• Long instructions / interpretable icons
• Too many options, features or icons on one page
• Installations, add-ons, lots of permissions, sign up pages asking too many details
• Asking user to identify if they knew the word after giving them the meaning
• Pronunciation only given after test on flashcard
Research: Interviews
I carried out six interviews with prospective users, all of whom currently use and are familiar with a variety of language learning apps. I transcribed interviews, before writing up a 'Doing - Thinking - Feeling' profile for each person.
This way, it became clear what user's needs, attitudes, frustrations and behaviours were. Cross over themes emerged, which mutually enforced findings and led to further reflections.
Point of View
User Persona
Based on the interviews, I identified a user persona that represented user needs for a vocabulary learning app. From this point, my thinking pivoted around the circumstances, mindset and tasks this person will be carrying out when using the app. Every step is designed with her needs and perspective in mind.
Goals
• To score 160+ on GRE test and to get onto MBA course at Wharton Business School
• To find a learning method that helps understand and retain new vocabulary long term
• To revise a bit every day alongside busy work schedule
• To recognize correct pronunciation for new vocabulary and apply it at work and in interviews
Behaviours
• Commutes via underground 3 days a week
• Reads business journals every week, to keep up to date
• Becomes demotivated and uses apps intermittently if she feels there is ages to go
• Procrastinates when overwhelmed by too much information at once
Needs
• Clear and uncomplicated interface
• To access offline mode when commuting
• To include own vocabulary to revise
• A means to visually review progress
• Personalized reports RE strong / weak areas
• Play back option to hear pronunciation
• Visual aids & relatable example sentences for context
• Mix of learning approaches (speaking, listening, reading, writing) to understand & retain vocab
• Clear visualization of module structure / how far left to go in each section
User Stories
• As an MBA applicant, I want to build my vocabulary to score a 160 on my GRE test.
• As a Londoner commuting on the underground, I want an offline mode, so that travelling isn’t wasted time.
• As someone who reads journals, I want to add my own vocabulary to the app, so I can revise new words I come across.
• As someone who is busy and studying a lot, I want to see my progress and visualize how far I’ve left to go, so that I persevere.
User Flows
With Amelia in mind, I began thinking through her journey when completing tasks on the app. This ensured each step Amelia would need to take, before I began to think about the required screens.
Wireframes
Low fidelity to high fidelity wireframes
Based on the user flows, I created low fidelity wireframe solutions with pen and paper for speedy iterations. When satisfied, I then converted them to higher fidelity wireframes and made them interactive for usability tests. The wireframes evolved through different iterations during and especially after the usability testing phase.
Usability Testing
Five usability tests were carried out with volunteers from the vocabulary learning target audience.
In each usability test, volunteers were instructed to go through the onboarding process, test themselves on a new word set, change flashcard settings, add a new word to their vocabulary list as well as review mastered words. Functionality and ease of use was evaluated using Jakob Nielsen’s rating scale.
Once usability tests were complete, the prototype went through a final iteration phase. Below, I illustrate the main menu and register new account page iterations before and after the usability tests.
Explore the interactive G.R.Easy prototype here:
To see more about the thinking behind the design process, check out the short presentation:
All pictures sourced from Unsplash.com
