People of all ages and backgrounds take courses, master new languages and memorize new information. Curiosity to learn something new, is a critical to an active life, no matter your age, location, or circumstances.
Who: The target audience is 25–45 year-olds enrolled in online courses or language learners.
What: A mobile application focused on learning new vocabulary.
When: This application is meant to be used on-the-go for quick 5–10 minute study sessions. That could be on a bus or train, waiting between classes, on a lunch break, etc.
Where: Using the app for 10–20 minute intervals, at a cafe, at home, or on the go.
Why: It can be difficult to keep track of all the jargon when studying a new discipline. Students need a way to methodically categorize, reference, and study new vocabulary and concepts so they can move forward confidently in their field.
I conducted Competitive analysis of StudySmarter, Quizlet & Spacify: popular flashcard apps each promising different flashcard learning techniques and resources to help users reach their learning goals. This helped me outline some features of Eager Beaver needs to have to stand out:
• Straighforward way to add your own flashcards, with option to upload photos.
• Access to other user’s publicly shared flashcards.
• An integrated dictionary to help language learners.
• Option to study only the flashcards the user isn’t sure about.
Additionally Eager Beaver will have engaging statistics to keep users motivated and a distraction-free interface.
To gain an understanding into the needs and wants of users and how they approach learning new vocabulary, I interviewed 3 people with different experiences in what and how they learn.
After synthesizing the data from the interviews, into what users are Doing, Thinking and Feeling, I was able to take out some key insights:
• People look up words & terms they come accross in Google.
• Folks learn better when they use their visual memory by writing down notes.
• They see mobile apps as useful in helping them learn.
• People think memorizing new vocabulary is the most difficult part.
• They feel accomplished when they can recognize new words and use them in context (in conversations, at work, etc.)
• Folks feel frustrated when they have to look up a word/term multiple times.
With the information from the interviews, I started narrowing down the scope of the project, creating a proto-persona. That ensured the further design decisions stayed user-centric.
In order to move forward with the design and define the core functionality of Eager Beaver, I’ve created User & Job Stories from the perspective of my proto-persona Nina.
From the stories, there were 4 main features of Eager Beaver that emerged:
• Dashboard: with run streak and goals, recently viewed (continue learning)
• Flashcards overview: with list of flashcards organized into subjects & access to other users’ publicly shared flashcards
• Deck overview: with study sessions, recently added cards, & cards marked repeat
• Dictionary: with option to add different languages
I set out to map my proto-persona’s User flow. This step helped me keep the design user-centered, by showing me what pages or screens of the app will be needed from the perspective of Nina.
In order to ensure a clear structure of the app, I’ve created a sitemap, based on the user flows.
The Marvel prototype was tested with 3 users. The finding from the usability test were documented and rated by severity.
To see the detailed usability report click here.
The most severe problems were:
• Lack of onboarding
• Ambiguous icons & labels (in the navigation bar; library, decks, assign deck, flashcards)
• Add new flashcard involving confusing search option
• Deep architecture, requiring multiple clicks to get to a study session
These issues were addressed in the next high-fidelity iteration of Eager Beaver. I simplified the architecture by reducing the number of options in the navigation bar & having “flashcards” as the only category within users saved items.
Eager Beaver is relaxed, fun and colorful. Despite the bright colors, it is undistracting and there is no unnecessay clutter in the UI elements.
Interacting with Eager Beaver relies on well known gestures and triggers, feedback and step by step actions, to minimize cognitive load and let users concentrate on learning.
The user can see their progress in the study session: how many cards they have mastered and how many they need to repeat.
Closing a session mid way, gives the option to resume and jump right in where the user left off.
Adding a flashcard gives the user confirmation feedback and an option to continue browsing or jump to saved flashcard.
The process of adding a flashcard is broken down to one step at a time, so conginitive load is minimized.
As a design is never finished, there are some features and interactions I would like to develop futher:
• A feature where users can learn only the cards they have marked as “repeat”. This feature can offer a unique value propositions for Eager Beaver.
• Profile and settings screens
• Individualized learning goals and progress notifications
Being the solo UX/UI designer for the project has had its challenges. Despite the limited timeframe, I was able to make design decisions and move quickly thorugh the design process. The work on Eager Beaver has been divided into two parts: Discover & Define stages which took relatively little time and Develop & Deliver, where I spent more time working on high-fidelity prototype.
I’ve gathered important learning from each stage of the process:
• In User Interviews, ask non-leading questions. Processing the information is time consuming.
• Differentiate between your own assumptions and the findings from the User Interviews and Usability Tests.
• Wording of features is important. Try conveying information visually.
Moving into the final design I’ve realized how time consuming but important high-fidelity prototyping is. Adding microinteractions had a great impact on the whole look & feel and identity of the app. I had the chance to create a prototype in ProtoPie which I found to be a powerful tool that I would like to continue mastering.
Icons by Material Design
Illustrations by Freepik Storyset.
