Project Overview
The Problem
Vocabulary and learning apps are often not engaging, offering users little more than a digital flashcard. While some allow for users to add custom vocabulary to a deck, the process can often be frustrating and time consuming.
The Goal
Design an app that allows users to learn new vocabulary in engaging ways, while giving them the ability to easily create custom cards.
The Solution
QuizCards is mobile application focused on learning new vocabulary. Users can choose from existing vocabulary lessons, easily create their own decks and connect with classmates.
TOOLS
Figma
Marvel
Photoshop
DURATION
1 month
ROLE
UX Designer
My Approach
Using the Design Thinking framework, I was able to make informed decisions based on learnings from each phase while understanding the problem I was solving as well as the user and their needs.
Empathize
Competitive Analysis
User Interviews
Define
User Personas
User Stories
Ideate
Task Analysis
User Flows
Prototype
Wireframes
Prototype
Test
Usability Tests
Iterations
Competitive Analysis
In order to better understand the problem I was trying to solve, I performed a competitive analysis on three highly rated vocabulary apps. This allowed me to see what was currently available to users, assess their strengths and weaknesses and determine where QuizCards could stand apart.
AnkiApp
8.4K Ratings
4.7 Stars
Chegg Prep
1.6K Ratings
4.5 Stars
Quizlet
476 Ratings
4.8 Stars
Pros
- Add your school and course which gives recommendations to sets created by classmates and teachers
- Can resume a session if you stop in the middle and close out the app
- Easy to create cards and gives suggestions for terms and definitions
- Different study options (Flashcards, Write, Match, Test) keep you engaged.
Cons
- Can only create one card at a time
- Free version is missing progress section to track learning
- Ads can become distracting
- Must upgrade to paid account to remove ads, get offline access and view study progress
Insights
Different Ways to study
Quizlet offers different ways to study your cards (Flashcards, Write, Match and Test). It’s easy to navigate between the options.
Connecting with peers
You can set your school and course of study in the admin section, connecting you to other students and sharing decks within the class.
Creating and organizing cards
Creating flash cards is made easier by giving you suggestions for terms and definitions as you type.
User Interviews
I conducted interviews with three individuals who worked within education and had experience with learning apps. Going into the interviews with an effective script and recording the results allowed me to collect qualitative information on the users.
Paul
Private Tutor
Brooklyn, NY
43-years-old
Ly
High School Teacher
New York, NY
27-years-old
Jeni
Yoga Teacher
Brooklyn, NY
31-years-old
Empathy Map
I combined all the notes from my interviews to identify what interviewees were doing, thinking, feeling and saying.
User Personas
Based on feedback from my interviews, I was able to identify the users goals and create a user persona. This persona helped me better understand the needs, goals, emotions and behaviors of the user. I referenced it throughout the process to be sure the user was at the center of my design decisions.
Proto-Persona
One of the challenges I faced was designing for both types of users, the teacher and the student. Due to constraints, I was only able to interview teachers. In order to also design with the student in mind, I created a porto-persona. The assumptions made in this persona will be validated through testing.
User Stories
With the persona complete, I then created user stories to determine what our users want to accomplish. These stories allowed me to focus on defining functions and solutions from the perspective of the user.
Task Analysis & User Flows
With the user and problem we are solving clearly defined, I then created a task analysis to determine the actions a user would need to take in order to accomplish a goal within the app. This was done for multiple tasks, such as review vocabulary and adding new vocabulary to the app.
Once complete, user flows were created to show how users would navigate through QuizCards and which screens they would need to interact with.
Create a Card
Low-fidelity Wireframes
I sketched low-fidelity wireframes to begin focusing on the structure of the pages. These wireframes were then grouped together to represent a user flow, focusing on the high-level functionality of the design. These groupings would be the first step in creating a prototype.
Usability Tests
After creating an interactive MVP (minimum viable product) in Marvel, I conducted usability tests with three participants. I went into the tests with a clear script and tasks that each user was asked to complete while I observed and made notes.
After synthesizing the data, I created a usability test report which contained my observations, errors and their severity, along with recommendations for resolving.
The results from the usability tests informed design changes for my next iterations. This process is repeated until we have final working prototype.
Test Plan
I created a test plan and wrote a script in order to keep the tests consistent, allowing me to observe how users were able to complete tasks within the prototype.
Scope
Testing QuizCards account creation, adding vocabulary to a new deck, uploading a spreadsheet to create a new vocabulary deck and studying vocabulary including switching between games.
Schedule
The usability tests will take place on March 22nd via Zoom’s Share Screen function.
Sessions
Three participants will each complete a 10-minute session.
Equipment
The Marvel prototype will be tested in the users browser. Notes taken on computer.
Test Script
Introduction
Hi, ___________. My name is Kevin and I’m going to be walking you through this session today. We’re conducting usability tests to better evaluate how well our prototype empowers people to learn new vocabulary. The session should take approximately 10 – 15 minutes.
The first thing I want to make clear right away is that this is not a test. You can’t do or say anything wrong here. You will be testing an incomplete prototype that likely has errors and mistakes – that’s why we’re testing it out! If you have any questions as we go along, just ask them.
OK, let’s get started. I’d going to present you with a few scenarios and ask you to perform a task in the app. Go to the link I’ve added to the chat box and you can open the clickable prototype in your browser.
Scenario Tasks
- You are looking for an app to help you study new vocabulary. You search the app store and are drawn to QuizCards so you download the app and create an account.
- While studying for your class, you come across a word or phrase that seems important. You want to add it to QuizCards. You create a new set for that class and add the word and definition to be reviewed later.
- While studying, you keep a document on your computer where you save words and definitions that are important and you’d like to add to QuizCards later, but don’t want to interrupt your study session to create a card in the app. You save multiple words to the document and at a later time upload the file to QuizCards and easily create a new deck with multiple cards.
- To prepare for an upcoming test, you use QuizCards Games function to study the vocabulary. Because you want to test your knowledge in various ways, you switch between the games during your study session.
Challenges
Trust in the Process
This was the first UX project I worked on. I was learning the design thinking process as I built the app. Not letting my assumptions come into play and trusting that the process would inform future design decisions was my main challenge. Now that I’ve applied design thinking to this project, I am confident in the process.
Designing for Multiple Users
There were two types of users I was designing for, teachers and students. While I had access to a number of teachers, I didn’t have access to students who were using similar apps. Due to time constraints, I was not able to explore the student user beyond a proto-persona. In future projects, I would push for more access to all users.
Learnings
Competitive research is the best starting point. By seeing what applications are out there, how they’re used and what they offer helps give us a better understanding of the landscape.
Listening to not only the users needs but gaining insight into how they learn and engage with apps will help inform our design decisions.
Test. Test. And test again. By putting the app in the hand of the users, we can not only identify problems, we can gain a better understanding of the user flow by watching how they complete a task and areas that may have caused hesitation or missteps.