What is Wordsmith?
Wordsmith is a vocabulary training app designed for students who struggle with pronunciation and large work loads. Wordsmith is a side project I created after finishing my Careerfoundry UX/UI course.
Project
Conceptual project
Timeline
2 months
My role
UX/UI Designer
UX Researcher
Deliverables
Competitor analysis
User interviews
Personas
User flows
Wireframes
Overview
People all over the world struggle remembering new vocabulary, whether its a new language they are practising or specific terminology for a topic they are studying. Wordsmith is designed to motivate its users to practise new vocabulary using simple, fun, bitesize flashcards that users can personalise.
The Process
Problem
When learning new vocabulary or studying terminology for an upcoming exam, people can feel overwhelmed by the workload and learning the correct pronunciation of complicated words. This leads to a lack of motivation to revise.
Solution
Create an app with certain gamification elements that helps break down user’s workloads to a bitesize level with a voice recording feature that helps users practise correct pronunciation.
Competitve Analysis
To better understand the strengths and weaknesses of current vocab learning apps I downloaded and used 3 that I found mentioned by students on UK study forum www.thestudentroom.co.uk.
Word Up
Pros
- Card sorting to discover words encourage fun learning
- Long scrollable examples of vocab help user learning
- Fast & simple explanatory onboarding
Cons
- Navigation buttons are sometimes ambiguous and sometimes it can be unclear what is a button or just simple text
- Most features and games require a payment plan
- Frequent adverts every 5-10 interactions can be irritating
Word of the day
Pros
- Quick onboarding process
- No immediate pop ups asking for paid subscription
- Gentle light colour scheme
- Immediately gauges users vocab level with a fun interaction using complex and more common words
Cons
- Not many examples of words given in context
- Navigation icons clearly laid out but some are unclear as to their purpose
- Not much use of gamification
Vocabulary
Pros
- App has daily reminders of favourite or random words and how many times the user wants to be reminded of the word which is a good feature
- Long scrollable examples of vocabulary help user-learning
Cons
- The UI is very unattractive with its brown and white colour scheme.
- There are no annoying pop up ads on the app which is good, however there are no interactive features for the user until the switch to a paid version.
User Interviews
I interviewed 3 students over Zoom to understand their needs and pain points when trying to learn vocabulary for their studies. This would help me define the problem and give me qualitative data that would be used to build a main persona for the app.
Main insights
- Need more ways of learning rather then just revising a word and its definition
- Gamification makes the process enjoyable and more engaging
- Having many words broken down into bitesize chunks can help
- Feeling disorganised leads to lack of motivation and procrastination
User Persona
Wordsmith’s main user persona Yanis was created to express the needs and frustrations discovered through the interviews.
User stories
- As a student I want to communicate with clear and correct pronunciation to my professor, tutor and other colleagues so that I sound professional
- As a student I want to feel rewarded when I recall correctly so that I feel motivated and more engaged
- As a Student I want to learn new visual revision skills so that my memory is improved
User Flows
With the user stories and personna in mind I decided on the main features Wordsmith would be used for. Beneath are two main flows for adding a new flashcard to a deck and a user practising their pronunciation of a word.
Low-Fidelity Wireframes
Now that I understood what screens and different types of interactions there would be I could then go onto drawing up some very lo-fi wireframes on paper and begin thinking about how the app will begin to look.
Mid Fidelity Wireframes & Testing
I designed the mid-fidelity frames in figma and turned them into a prototype ready for testing. At this point I was happy with the majority of the layout but needed validation from users.
I tested 4 students (2 PHD and 2 masters) remote in-person via zoom to see how well they carried out 4 basic task flows:
- Sign up and onboard
- Add a new flashcard to their deck
- Practising pronunciation of a word from their deck
- Choosing a category of words & terminology
Success was measured by the length of time users took to finish the tasks and also how many prompts they needed.
Results
The participants showed no issues with the first task flow however the 2nd and 3rd tasks had the longest completion time and required the most prompts.
The main findings were:
- Users were confused how to locate the flashcard page and said the icon was ambiguous
- Users commented that the ‘add flashcard’ modal screens were unnecessary and should be separate page
- Layout of the selected flashcard was bit messy and could be cleaned up.
- Users found the voice record UI layout confusing and listen and practise pronunciation buttons looked to similar
Iterations
Before
After
- Text was added to each bottom navigation icon when a user is active on the page. This will help users better navigate the app and makes the icons less ambiguous.
Before
After
- Instead of the modal screen I added a seperate screen for the user to add a new word, definition and example of the word in a sentence.
- The only modal screen used is just to alert the user that their new flashcard has been added. Users can exit this modal and they will be taken back to the main flash card page.
Before
After
- Improved the flashcard layout by making clean sections for the word, its definition and its use in a sentence.
- Changes the colours of the ‘listen’ and ‘record pronunciation’ icons to create contrast as the similarity of the icons confused users.
- On the pronunciation screen there is bulleted text beneath the pronunciation button giving the user clear directions on how to use the button.
- Once a user records a correct pronunciation a positive message appears with a GIF of a ‘perfect’ hand gesture.
- All above changes will help improve the usability of the app’s pronunciation feature and also help motivate users by adding a gamification element to the app.