FLIPR

A Flashcard and Quiz App

An app to create and organize flashcards and automatically generate quizzes for both solo and group study.
‍
My role: Solo UX/UI Designer.
Tools used: Figma, Adobe Photoshop.
Project Timeline: 3 weeks.

VIEW FULL PROTOTYPE ↗
Photo: me with one of my favorite classes.

Background

I’m a former ESL Teacher, worked in education for 6.5 years, and have a B.A in linguistics with an emphasis in Mandarin Chinese. I wanted to design an app for students and teachers to make review sessions simpler, quicker, and more fun.

Problem

  • Memorization of vocabulary is often boring and difficult for a lot of students.
  • Preparing a review session takes a lot of prep time for the teacher.
  • Making flashcards and creating review games time consuming for both students and teachers.

PHASE 1: RESEARCH AND DISCOVERY

User survey and interview analysis

I conducted a survey and interview with 5 Teachers and 4 Students (9 Participants).

☆ Top Categories for flashcard use:language learning, scientific terms, technical terminology.
80%
Prefer flashcards as their study method.
60%
Prefer to study with another person.

Teachers

  • Teachers who responded to the survey mainly taught ESL.
  • They wished for more engaging ways to review with students.

Students

  • Most are using flashcards to practice new vocabulary.
  • Others who study scientific subjects see the value in using flashcards to memorize terms.

Both

  • Students and teachers prefer Kahoot as a platform to review materials in the classroom.

Pain points and observations

Teachers feel like it wastes a lot of prep time to prep a proper review session.

Students feel like creating flashcards takes way too long, which is discouraging.

Most apps just have multiple choice options for quizzes. Not too much variety.

Current apps on the market are either quiz apps OR flashcard apps. Not both.

Both teachers and students get bored when their review sessions start to feel repetitive.

Competitive analysis

I researched competitors to understand how they tackle user’s problems and discovered opportunities to surpass them.

KAHOOT
QUIZLET
ANDEV
STRENGTHS
-Amazing for creating interactive quizzes for solo and group practice.
-Has multiple variants of quiz/game types for added interest.
-Can add pictures.
-Access to other users flashcards/pre-made flashcards sets.
-Easily add terms and definitions.
-Scan documents and convert to cards.
-Quizlet Live for classroom review sessions.
-Quickly add terms and definitions.
-Options to label different languages.
-Ability to do matching games and listen to audio.
-Ability to organize sets.
-Track progress.
WEAKNESSES
-No flashcard system.
-Have to manually input questions.
-Lots of features, including uploading pictures, are blocked by a paywall.
-Quizlet live doesn't have variety in game types.
-App navigation could be better
-Solo review only, no options to review as a classroom.
-Not as useful to teachers.
-Only paid version allows people to add photos to the cards. a lot of games are locked by pay wall.
OPPORTUNITIES
Takes from Kahoot's game systems and quiz format, but also introduce a way to review terms as flashcards.
Provides a more simplified approach to the flashcard feature Quizlet has, while focusing on a more interesting/complex version of the Quizlet live feature.
Allow users to add photos for free, add more games, allow for group review games.
THREATS
#1 game for classroom review on all apps. Really popular with students and teachers.
This is a popular choice amongst teachers/educators. Top rated in google play store. Already has an established reputation.
Top flashcard app on google play store.

Personas

Created personas based on the insights learned from surveys and interviews. Serves as an exploration of the possible issues and goals of the two main groups identified in the research.

Shanelle T.

23 | F | University Student

Bio: Shanelle is a Biochem major with a minor in Spanish.
Motivations: She needs to pass her finals this semester. She wants to go into her finals prepared.
Goals: She needs to memorize over 200 terms combined from all of her classes.
Frustrations: She feels that there isn’t enough time to study. She also feels like everyone is too busy to study with her.

Image by on Freepik

Lisa S.

42| F | ESL Teacher
‍
Bio: Lisa is an ESL teacher at a community college.

Motivations: She wants to reduce her lesson planning time, but make sure her students are having fun.

Goals: Midterms are coming up for her students. She hopes they can all pass.
Frustrations: Engaging older students is challenging, especially when it comes to memorization.

Journey map

Created a journey map to explore how the persona would go through solving their problem without Flipr. Analyzed user expectations and discovered opportunities to dive into as well.


Lisa  S.
Scenario:
Lisa needs to create a review session for her class tomorrow. They have about 50 terms to memorize for their unit test.
Expectations:‍
  • spend no more than a half hour on prep time.
  • Wants her students to have fun.
Define
Compare
Planning
  1. Needs to figure out which platform/game she wants to use to create her review session
  2. Wants something reasonably simple to use.
“I really don’t want to spend an hour on this...”
  1. Heard from her coworkers that Quizlet and Kahoot are good sites.
  2. Decided to go with Kahoot based on app reviews.
“Kahoot seems like a good place to start!”
  1. creates a quiz of 50 questions.
  2. underestimated how long it would take because she had to come up with the questions herself.
“This is good but...I wish there was something a but quicker? ”
  1. Students enjoyed the review session. but they used this platform about 50 times before with other teachers.
  2. studying quiz at home is repetitive
“Kahoot again?”
Opportunities:
1) Automatically generate questions for quicker prep.
2) Allow students to use what the teacher prepared for self study.
3) Allow different forms of practice (not just multiple choice).

PHASE 2: INFORMATION ARCHITECTURE AND WIREFRAMES

User stories and user flow

User’s expressed their need for certain features.

HIGH
As a student I want to make flashcards so I can reference important terms.
HIGH
As a student I want to play review games so I can retain info in a fun way.
HIGH
As a teacher I want to make quizzes so I can test my students knowledge.
HIGH
As a teacher I want to play review games so my students feel engaged in class.
MEDIUM
As a student I want to organize my cards so I can access different topics.
MEDIUM
As a student I want to add images to my cards so I can visually remember terms.
MEDIUM
As a teacher I want to share my cards so my students can have access to them and save time.
MEDIUM
As a teacher I want to share my cards so my students can have access to them and save time.
VIEW USER FLOW↗

Wireframes and iterations

Adjusted wireframes based on user feedback, and quick usability tests.

WIREFRAME SKETCHES
DIGITAL WIRES ATTEMPT #1
DIGITAL WIRES ATTEMPT #2
EXAMPLE#1
Home screen
Sketched out the intital layout of homepage. I wanted quick access to card sets and the option to add more.
BIG QUESTION: would users swipe to access cards? How do we get to that screen?
‍
“View cards” shortcut button added for clearer user journey.
EXAMPLE#2
Flashcard set screen
Initially I had the flashcards as tiny little icons squeezed into one container. If you were click on each flashcard icon, it would pop up at card in a modal. Quick review with peers reveals this was not ideal for users.
Decided to change each flashcard to an indivdual card layout
Extra icons added to expand card options.

PHASE 3: BRANDING, UI AND ITERATION

Branding and colors

Created UI and brand guidelines for visual consistency across the app.

Branding

  • Name: Flipr (like flipping through flashcards)


  • Logo is simple text with cards in background (easy to identify purpose)

Colors and Accessibility

  • Contrast is AA compliant.
  • App’s main colors are also color blind friendly, so there’s no confusion in color coding.

Usability tests and iterations

Prototype v1 Usability test

Goal: Conducted a Usability Test based on Prototype #1 to determine if the prototype addresses MVP requirements and if the app’s features are well constructed.

Findings:

  • Sets not clear. Maybe signal to make it appear clickable.
  • Some users unable to navigate app properly due to non-functional buttons.
  • Some complaints about exit buttons going way too far back. Frustrating for some users.
  • Users unable to bypass login/sign in page.


☆ Icon size decreased:

  • Account icon important for sharing feature.
  • Too big=too distracting, as it’s not a main feature.

☆ Card style changed:

  • Wanted to give off a “deck of cards” feel.
  • Signals to users that there’s multiple “cards” in a set.

☆ Button Changed:

  • Account icon important for sharing feature, but too big=too distracting, as it’s not a main feature.
  • Added text for some for added clarity.
  • All buttons are now capitalized for style consistency.

Prototype v2 Usability test

Goal: Conducted a Usability Test based on Prototype #2 to determine if previous alterations solved the users' initial concerns in the first test.

Findings:

  • Improved user feedback. Lower error rate in navigation.
  • Negative feedback in last user test resolved.
  • Users suggested more games options (will be addressed in future version of app as it is out of scope.)

FLIPR PROTOTYPE

VIEW FULL PROTOTYPE ↗

Next Steps

  • Expand review games to include Jeopardy and matching games.
  • Access database of pre-made card decks.
  • Add friends to form study groups.

Final thoughts

  • Was able to apply my previous knowledge in education to UX/UI Design for the first time.
  • Doing research on what TYPES of games people play during successful review sessions would have been helpful in making a higher quality product.

SAY HELLO!

email me at MANDI.EXCELL@GMAIL.COM if you have any questions. I’d love to hear from you!

☆ made with webflow ☆

Follow me! ♡

INSTAGRAM↗TIKTOK ↗LINKEDIN ↗