Sprout
A flashcard app simplifying the learning experience
Scope
User Personas
User Flows
Task Analysis
User Interviews
Wireframing
Prototyping
Tools
Figma
Marvel
Duration
April - June 2022
My Role
Solo student project for CareerFoundry UX/UI Bootcamp
What's the context?
I was tasked with creating a vocabulary learning app as part of my introductory course at CareerFoundry's UX/UI Program. This project allowed me to explore the fundamentals of UX Design and the most important terms, tools, and techniques in the field by researching and designing an app to empower people to learn new vocabulary.
The Challenge
The challenge was to create a vocabulary learning app that targets language learners through a mobile application. Students need a way to easily categorize, reference, and study new vocabulary in order to help them achieve in their language learning goals.
Why is this a problem?
People have busy schedules and not much time to spend learning.
People do not have an a way to customize their learning experience.
People experience inconsistencies in motivation levels.
Design Approach
User Persona
Richard Gomez
Age: 20
Gender: Male
Location: New York
Occupation: University Student and Russian Tutor
“I love finding new ways to learn and refine my vocabulary skills, but it’s hard to stay consistent in my learning because I have other commitments as a student.”
POV Framing
As a ___________________ I want _____________________ because ______________________.
USER
USER'S NEEDS
INSIGHTS
As someone who is extremely busy, I want a flashcard app that encourages me to study at my own pace, so that I can make the most out of my study sessions without feeling overwhelmed.
As someone who is used to tedious classroom instruction, I want engaging ways to interact with vocabulary material that appeals to my learning style, so that I can continue to foster my interest in the language.
As someone that doesn't have many Russian friends, I want to be able to meet people who have similar interests to me, so that we can engage in learning more about Russian language and culture together.
User Insights
NEEDS
-
To be able to quickly and easily learn vocabulary
-
To be able to meet people and learn in exciting ways to stay motivated
-
To be able to have confidence in their vocabulary and language learning abilities
GOALS
-
To make significant progress towards mastery of vocabulary material
-
To have a consistent study schedule to stay on track with learning goals
-
To build a learning community and connect with like-minded people
How might we empower users to take actionable steps to achieve their vocabulary learning goals?
THE SOLUTION
WHAT
WHO
WHEN
WHERE
WHY
A mobile app empowering individuals to learn and practice vocabulary
For K-12 students and anyone inspired to learn new vocabulary
5 min, 15 min, 30 min, or 1 hour sessions
On the go, at the workplace, in a study area, library, or while traveling
Individuals like Richard need an improved way to personalize their vocabulary learning sessions to more effectively pursue their language learning interests. Sprout aims to empower users to practice with flashcards, customized study plans, and find their own language learning community.
User Flow & Task Analysis
Task 1: Create a custom study plan
Entry Point: Open app
Success Criteria: Save a customized study schedule
-
Open App
-
View Splash Screen
-
Sign Up (new User) or Sign in (Returning User)
-
Complete onboarding process (New User) or view Home screen (Returning User)
-
Create New Study Schedule (New User) or go to My Study Schedule (Returning User)
-
Customize study schedule based on preferences
-
Choose duration of study session (5 min, 15 min, 30 min, 1 hr)
-
Chose frequency of study sessions (days/week)
-
Select which sets to study for this schedule
-
Choose to get a reminder notification for each session (Yes/No)
-
-
Review Study Schedule
-
Change preferences if necessary
-
Select “save” feature to save custom study schedule
Task 2: Create a flashcard deck
Entry Point: Open App
Success Criteria: Create a flashcard deck for review
-
Open App
-
View Splash Screen
-
Sign Up (new User) or Sign in (Returning User)
-
Complete onboarding process (New User) or view Home screen (Returning User)
-
Create a new study set
-
Name the deck
-
Select folder to place deck in
-
Add terms and definition
-
Add images & audio if desired
-
-
Repeat until desired
-
Save flashcard deck
Low-Fidelity Wireframes
Introduction & Onboarding
Task 1: Create a study plan
Task 2: Create a flashcard deck
Usability Testing
I examined the usability of Sprout through a usability test, in which I met with 4 participants (via Facetime & in person) for 10 - 15 min sessions. I used Jakob Nielson's Error Severity Scale to quantify the results of the usability testing. I tasked the participants with four direct tasks and observed their ability to complete the task to assess the feasibility of Sprout.
Sign up
Create a study plan
Create a flashcard deck
Delete a flashcard
Insights & Improvements
After reviewing the results from my usability testing and receiving feedback from my mentor and tutor, I continued to iterate my design with 3 major themes of improvement.
CLARITY
ACCESSIBILITY
FEASIBILITY
Use appropriate icons
User doesn’t understand the icon to begin creating the study plan. Although it is still early in the design process & prototyping, keep in mind icon preferences to simplify the experience for the user.
My Decks vs. Shared Decks
User was unsure what decks are offered to select when asked to choose decks to study. Let users choose and access various decks by creating My Decks vs. Shared Decks categories.
Redirect to previous screen
When User selects “Not Quite,” they don’t want to restart the whole process to create a plan. By redirecting them to the last screen, we can save the user the hassle of starting over.
Redirect to previous screen
Clear example
Clear example
User was unfamiliar with example flashcard about User Experience vocabulary. This was resolved by replacing it with a more familiar and mundane example flashcard.
Delete a card
Delete a card
User was not able to understand the process of locating and deleting a card. A clear tutorial aids the user in successfully accessing the delete feature for a flashcard.
Turn off notification feature
Turn off notification feature
User doesn’t have the option to turn off notifications, only turn on. By adding a skip button on the notification prompt screen, the user can choose to not have notifications.
Reflection & Lessons Learned
User experience design is entirely an iterative process, with constant revisions and restarts.
There is no such thing as the perfect design or perfect solution to any problem, it will require many reconsiderations in order to dive deep into the design framework.
Usability testing is an opportunity for the designer to truly understand the gaps in their mindset vs. the user’s mindset.
Although testing might not be enjoyable, it is a crucial part of the design process that opens the designer's eyes to the exact pain points and mindset of the user.
Interviews are a valuable resource to effectively understand the problem space and shed light on issues pertaining to the user.
Interviews are extremely informative and allow the designer to empathize and understand the needs, goals, and establish a deeper relationship with the user and the product.
It is crucial to design and test based on what is best for the scope of the problem.
Having a concrete understanding of the problem and using various techniques to define the scope of the issue is a critical and necessary step in the design process.
User centered design comes from designing with the user’s best interests & being conscious of their pain points.
At times, it can be easy to slip into a stakeholder, business, or designer's perspective but the best user-centered design focuses on being considerate of the user at every step of the design process.
Be insight-driven, not process driven.
Trusting the direction of the product based on insights is key to creating a solution that makes users feel heard and seen.