top of page
Group 271.png

Improving the digital flashcard experience

mNeme Flashcards
mNeme flashcards app is focused on creating an engaging and streamlined experience for students by using spaced repetition that has been scientifically proven to improve retention.
[Nee-Mee]

Overview

Over a period of 8 weeks, my team and I were responsible for developing a flashcard app from the ground up. This case study highlights the key design decisions and insights gained throughout the process.

UX designer

Role

Team composition

2 UX designers

4 Frontend developers

Time frame

8 weeks

1 Backend developer

1 Android developer

Group 208.png

Our approach

Our approach included a combination of interviews, surveys, and usability tests. From our interviews, we found that medical students were heavy users of flashcard apps.

"The apps that are out there either work well but look dated, or look great but don't function well" 

Students expressed that applications with seamless user experiences lacked successful study techniques and progress tracking, while applications that appled proven study techniques lacked a desirable user experience. 

Screen Shot 2020-05-21 at 9.48-1.png
Screen Shot 2020-05-21 at 9.48.png

Surveys and interviews

  • Talking to students revealed who we should focus on

  • Surveys helped us reach out to more students in less time and delivered insights about pain points and positive attributes

  • Watching students use flashcard apps allowed us to observe where they might get stuck or what their most common usage patterns were

Screen Shot 2020-05-21 at 9.47.png

What we focused on

We wanted to build a delightful web and mobile app that users could interact with easily without sacrificing functionality. we wanted to leverage on spaced repetition to facilitate increased retention and progress tracking so students could identify areas of improvement.

Our target audience

Through user interviews, we discovered a niche segment of students (medical students) who would need to study upwards of 500 flashcards in a single day. We decided to focus our attention on medical students.

What can we do better?

Interviews and surveys revealed the most common pain points users were experiencing. We incorporated aspects that were already working and fixed those that were not.

Going well 

  • Sharing

  • Pre-made decks

  • Gamification

Not so well 

  • Progress tracking

  • Boring UI

  • Cluttered UI

Competitors.png

Quizlet dashboard

Anki dashboard

What students were using

Students were already familiar with existing flashcard applications. This made it easy for them to tell us which ones they enjoyed and why, or what they did not enjoy. The top three apps were: 

  • Quizlet

  • Anki

  • Brainscape

Wireframes mNeme.png

Thinking through the dashboard design

When designing the dashboard we thought about what content students needed to see, and what actions were most important for them to take. We asked ourselves the following questions:

  • How do we show all the stages of progress over time?

  • How do we display 5, 10, 20, 100 decks of cards?

  • Are pre-made decks or creating new decks most important to students?

Dashboard wireframe 1

Dashboard wireframe 2

  • How do we display recently studied or most frequently studied decks?

Dashboard wireframe 3

Dashboard wireframe 4

Progress tracking mneme.png

Dashboard iteration 1

Dashboard iteration 2

Dashboard iteration 3

Dashboard iteration 4

Engaging and fun.png

Sprinkling in some fun

The emojis serve a dual purpose! They are fun and they help with the spaced repetition algorithm. The cards you know best show up less frequently than the cards that need improvement.

  • How can we make self-assessment more fun?

  • What could be an intuitive display of self-rating?

  • How many cards are in a deck?

Card call out.png

Reducing visual noise

We explored how the dashboard could be less cluttered than some of the competitors. We chose a larger card in contrast to our competitors, which helped provide some breathing room to the content inside while displaying crucial information. What's the visual information that is most important to students?

  • What's the name of the deck?

  • How am I progressing?

Making editing easy

Students wanted a quick way to edit cards "on the fly". We looked to our competitors for inspiration and found that there was similarity in their designs. In order to prevent users from getting confused with an entirely new approach to editing, we followed a similar pattern.

Edit card.png

What students are saying about mNeme

“I really like the emojis. It makes me happy when I get the answer right, but still makes me giggle if it’s wrong”

“Super intuitive and fun”

“It feels more like a game rather than studying”

User testing results

All 14 users were able to successfully complete any given task during the final usability test. This was accomplished by having regular testing and feedback loops to incrementally improve the design.

Banane.png

Learnings

This project reiterated the importance of flexibility and communication. Our developers were unable to implement certain designs on time. As a result, we did not meet our initial deadline. We went back to the drawing board, reprioritized features, and developed new designs that were cheaper to implement yet just as effective as the previous designs. 

For future projects, I'll continue to be prepared for changing requirements by prioritizing must-haves and nice-to-haves and facilitate regular standups with the team to ensure that everyone is on the same page. 

Previous project

Managing industrial machinery efficiently

Alloy Technology Solutions needed to improve the speed and accuracy of field technicians who manage and maintain industrial machinery.

Next project

Improving perceived user value

June has the opportunity to improve the perceived user value of potential new customers by redesigning the hero section of the landing page.

bottom of page