LearnGo.
A flashcard app built with user research.
I created an app to help people study by applying a user-centered design process in which I focused on understanding the experiences and needs of someone who needs to learn new material. With results from a competitive analysis and user research, I developed a low fidelity prototype that highlights common user pathways.
My Role
UX Design
UX Research
Timeline
May — June 2022
Tools
Pen & paper
Marvel
LucidChart
Loom
The Problem
Successful learning looks different for everyone, yet many apps that help people study treat everyone the same. An app that responds to people's unique behaviors and needs was missing.
Plus, this was my first time designing an app! I needed to learn, understand, and practice the design process.
The Solution
Keeping the user in mind, I built a flexible and customizable flashcard app design that offers solutions to studying hurdles and encourages learning for everyone.
To ensure I was absorbing what I was learning, I spent time investigating the importance and methods of each stage. And, I created flashcards that helped me retain what I was learning!
My Design Process
To learn about & empathize with my target audience. This phase included: a competitive analysis, user surveys, & user interviews
Discover
To define user needs, behaviors, & pain points. This phase included: user personas & user journeys
Define
Ideate
To create the pathways to real solutions. This phase included: user scenarios & user flows
To create the solution itself. This phase included: low fidelity wireframes, mid fidelity wireframes, & mid fidelity prototype
Prototype
To find errors & opportunities for improvement. This phase included: usability testing & design improvements
Test
Discover
I began by conducting a thorough competitive analysis. Then, I used these results to guide my user interview questions.
Competitive Analysis
Pros:
Simple launch experience
Flashcards include pronunciation and part of speed
Vocabulary words are defined and used in a sentence on “backside” of flashcard
Cons:
Limited words offered, no customization offered
Multiple choice rather than “true” flashcard style
Some navigation options are counterintuitive, such as no back button on every screen
Pros:
The onboarding process includes personalization via user goals
Badges earned during the learning process adds motivation and gamification
Includes a workout “tracker”
Cons:
Email sign up is required to use the app
No customization or ability to add your own words
Free version is very limited experience
Pros:
Flashcards can be created on desktop or mobile
Users can create new flashcards or view flashcards from other users
Flashcards can be "learned" and removed from deck
Cons:
Several navigation issues exist, such as missing buttons
App feels unfinished (some buttons open empty screens)
Flashcards only contain the word and definition
User Interviews
I conducted 3 virtual user interviews. I prepared interview sessions that began with brief background questions before asking more detailed questions that sought to reveal behaviors, motivations, and insights about user interactions with flashcard apps.
Interview Questions:
When was the last time you had to learn a lot of new words or concepts? Did you feel like you were successful? Why or why not?
Are there aspects of learning new words or concepts that you struggle with? What is the hardest for you? Could something have made it easier?
Are there aspects of learning new words or concepts that excite you or make you feel successful? Can you explain those to me?
Can you tell me a bit about your study habits or routines?
Do you ever use apps to help you learn? If so, what do you like about them? If not, how come?
I reviewed interview recordings and organized findings into “thinking, doing, feeling” groups for each participant, so that I could understand the goals and needs of flashcard users.
Define
Due to my limited timeline, I created a proto-persona to define my user along with user stories that dig into the details of my user’s habits, behaviors, and goals.
Proto-Persona
Armed with what I had learned from my analyses, I was ready to build a clear picture of who would be using this app. This helped guide me when creating wireframes, and aids in explaining to stakeholders who will be using this app to solve their problems.
User Stories
To better understand the situations that our user, Emma, will find themselves in, I created user stories that help explain how Emma thinks and feels about their goals and needs.
As someone with a busy schedule, I want to be able to study efficiently so that I don’t waste any time.
As a student with new courses every semester, I want an app that allows me to create my own content so that I can turn my own notes into flashcards.
As a person who seeks external motivation, I want my flashcard app to track my progress and reward my hard work, so that I continue to study.
Now that I understood the details of the user, I needed to make sure that my app was still poised to solve the original problem. I revisited and clarified the problem statement and hypothesis, adding or changing details based on findings.
Problem Statement
Emma needs a way to consistently study for multiple classes in engaging formats because she wants to learn new subject material. We will know this to be true when Emma has used the app multiple days per week, has met her study goals, and has created her own unique flashcards.
Problem Hypothesis
We believe that by creating an app that allows creating and/or downloading material, tracking daily use, rewarding use with badges, and uses gamification learning strategies for Emma, we will achieve teaching Emma the material that she needs to learn and understand for her future career.
Ideate
Next, I set up my app’s structure with information architecture, followed by an analysis of the specific tasks a user might take within LearnGo.
Information Architecture
I created the architecture of my app so that I had a foundation when beginning wireframes. It was a challenge to include the details that my research found user's would want, but still keep the app simple and easy to navigate.
Task Analysis & User Flow
Task: Create a new flashcard deck
Entry point: Opening the app as a registered user
Success criteria: New flashcard deck created
Prototype
To get an initial feel for the app, I used my new understanding of my users to sketch low fidelity wireframes of primary user flows. I included enough detail in the wireframes to conduct successful usability tests.
Low Fidelity Wireframes
Test
After preparing a low-fidelity prototype with a few key features, I wanted to learn about my app through another person’s eyes. By conducting usability tests, I learned what was working and what needed improvements. Beyond errors, I was also able to hear about how user’s commonly interact with flashcard apps in general.
Usability Testing
I created a low fidelity prototype and conducted 3 usability tests to evaluate the app's flows and features. Tests took place over 3 consecutive days and ranged from 15-20 minutes in length. I met with participants via Google Meet. Each participant shared their screen with me while testing the prototype. I recorded each session using Loom.
Scenarios
You just enrolled in a new course. Since there will be a lot of new material to learn, you decide to use an app to help you study. Open LearnGo and create a new account.
You are picky when it comes to flashcard learning. Use the example deck provided by LearnGo to make sure you like the style of this app.
To help motivate you to keep studying and stay on track, you benefit from setting goals. Use LearnGo to create a motivational study goal.
You prefer to make your own flashcards because it helps you study. Create a new flashcard deck by typing your study material into new cards.
Design Improvements
I gave the example deck a makeover to ensure the screen’s purpose is clear and beneficial to the user.
I overhauled onboarding, and users can now skip and go straight to signing up or logging in.
Final Design
Reflections
Sketching/wireframing is a skill. I won’t get the wireframes right straight out the gate. I leaned on my patience while learning the fundamentals of wireframing, and kept improving them based on usability testing and user feedback.
Agility and iteration are a delicate balance that can result in a successful design process.
I really enjoy conducting user interviews and usability tests. Talking and listening to people explain their thought processes behind their choices is fascinating, and using those insights to the design’s benefit was a very fun challenge.
And finally… I feel confident I can learn any skill that I will need, but my interest and joy in this process is innate.