Flashcard App

Project Overview

My Role
UX Researcher, UX Designer
Solo Project
Duration
3 Weeks
End User
College Students
Credits
Joshua Weber, mentor and Wesley Casswell, tutor
Tools
Adobe Illustrator, Marvel, Miro, Powerpoint, and Google Docs, paper and pens. Google Forms, Zoom, Skype, and FaceTime for communications, interviews, and surveys

The goal of this Flashcard app is to provide students with a tool to help them learn quickly, any time, and anywhere.

How does the mind evolve and grow to understand new material? By digging into the experience of learning and figuring out how people gain understanding, I’ll build a mobile app to help people grow their knowledge so they can grow their lives. This means in the mix of life, students will get help to juggle school on top of everything else in life.

The Problem

When going through the process of learning there is a ton of vocabulary and terminology to remember. Often there are several categories of terminology to remember at the same time. For students who are taking several classes at once, it can be tricky to keep all this material straight while learning.

Design Thinking Process

Phase 1: Research

Understand

The first step when taking on a new project is to build my knowledge. To gain a better understanding, I conducted a competitor analysis on three different flashcard apps.

I looked at successful direct competitors to learn what they were doing well and what could be improved upon. I looked at the company, the product and an in-depth UX analysis. When doing the UX analysis, I focused on four parts of their app: the onboarding experience, navigation, flashcard creation, and flashcard usability.  

All three of the apps featured used a familiar flashcard structure but varied in their presentation. Here are the main takeaways from the three apps as pros and cons.

Observe

The second step of the project was to gain a more intimate understanding. To do this, I conducted interviews and surveys of how people learn new vocabulary and the difficulties that come with learning.

I did a total of 3 interviews with young adults in their 20's and 30's who were current students. For the survey, there were 20 participants who were all currently part of a learning program but not necessarily enrolled in college courses.

I gained insights into what most people's difficulties were and how they overcame them.

Phase 2: Conceptualization

Personas

The third step was to create user personas based on the research I had done. A user persona is a representation of the goals, pain points, and behaviors of the potential users of the app.

The goal is to generate empathy for the people you are designing for. It is easier to keep a face, name, and a personal story in mind when designing than the details of the target audience.

For this project, I created three proto-personas based on the students I interviewed.

Ideate

With the research and the user personas completed, the next step was to look at the information architecture. This meant a task analysis to figure out all the steps a vocabulary app would need and the surrounding navigational issues.

Once I figured out all the steps, I worked on a user flow to figure out how Ronnie, Christine, or Mary Ann would go through the app.

I focused on two features for this step: creating a flashcard deck and practicing with a flashcard deck.

Open the App

  • Open App
  • Welcome Screen
  • Login or Create Account
  • Create Account > Onboarding (option to skip)
  • Home Screen

Task 1: Create Flashcard Deck

  • Home Screen
  • Create or Search for existing deck
  • Create > import from file or input manually
  • Search > choose existing
  • Review Deck
  • Edit Deck
  • Save Deck
  • Exit to Home Screen

Task 2: Use Flashcard Deck

  • Home Screen
  • Select Deck
  • Select Practice Options
  • Practice Type: Review or Quiz
  • Learning Type: Standard flashcards, Matching, Writing, Mixed
  • Word Order: In order, random
  • Start
  • Practice Vocabulary
  • Evaluation
  • Finish Page
  • Exit to homepage or practice again

Phase 3: Iteration

Prototype

The next step is to bring the ideas to life in the tangible form of wireframes. Wireframes are two-dimensional illustrations of a screen's interface.

I followed my user flows when creating wireframes and kept Russel, Christine, and Mary Ann in mind.

Test

With all the wireframes done, I put them together to create a prototype of the app in Marvel to test it. The next step was to get some feedback to evaluate its usefulness.

It was time to see how people would interact with the app and if it was functional.

I had scheduled 5 user tests, 2 in person and 3 online, however, 2 of the online appointments fell through. Need to send out a reminder the day before and the day of to help counter this issue.

The in-person tests had a much different feel to them because I could watch what the participants were doing and looking at. I could see both them and the screen.

In the online test, I could see the screen share but the person was tiny which made it hard to see their facial expressions and reactions. It would have been better with another person to help observe.

Participants started sharing memories of using flashcards in the past which I didn’t expect. Their past experiences influenced how they interpreted the app. They expected the app to work like index cards.

Project Recap

Final Results

This project completed the objective, which was to create an app to facilitate the process of learning new vocabulary. It is flexible enough to work with several subjects at once. It allows users to learn by traditionally using flashcards, matching, and writing both sentences or short answers. These are the methods that 65% of participants in the survey said worked best for them.

What I Learned

Since the purpose of this project was for me to learn the fundamentals of the UX process it was an incredibly valuable process. I was able to go through all the steps of the design thinking process to get a feel for each one and what each entails. This gave me first-hand experience and helped me realize ways that I can improve. For example, I found out that it's difficult to get participants for interviews or usability tests even when I sent out reminders. I also learned the difference between conducting a usability test in-person versus online through a video call. I will be able to take these experiences and continue to grow my UX skills in the future. As I learned during this project, learning comes from repetition and exposure and now I have a taste of the UX process.

Future Steps

The next steps for this app would be to implement the changes and suggestions that arose in the usability tests as well as creating a high fidelity prototype. There would also need to be more usability tests to make sure the changes work smoothly.

Design Thinking Takeaways

  • Simplified wireframes are a great way to figure out the layout because it is easier to make changes to.
  • Flexibility is key, it’s always changing but that means it is getting better.
  • Getting outside opinions and feedback is necessary for a good, usable design.
  • Sometimes there are so many revisions it can get frustrating but that is part of the process.
  • People are hard to be held accountable, some people won’t show up for interviews or user testing even when reminders are in place.
  • It is easy to overlook essential elements without realizing them.
Let's Collaborate
Always looking for opportunities to continue growing, learning, and creating positive impacts. As a UX designer, I'm looking to further my career by working within the constraints of business requirements to produce a product that customers love.
Let's Talk