Back to Help Center

nfinity and Beyond: How we defeated paper with our new version of flashcards

Paper vs. Web

Paper flashcards take advantage of paper's best attributes: Lightweight, Two-Sided, Blank Space, Cheap. Not bad for paper.

cardsvsweb

But paper can't do a lot of things. There's no audio for one. Paper can't be in two different people's hands at once. It's lightweight and cheap, yes, but not free and weightless.

And so we asked ourselves, "It can't possibly be that replicating how a paper flashcard works in web-based technology truly takes advantage of the wonders of what we can build to make it easier to study, right?"

Recreating something on web that exists in reality could live up to reality but it wouldn't ever transcend. And so we set out on a journey over the last few months:

  • Step 1: Forget reality.
  • Step 2: Build something awesome.
  • Step 3: Get a lot of feedback.
  • Step 4: Iterate.
  • Step 5: Deliver an awesome new Quizlet studying experience.

Here's how we did that.

Mode X

In order to remain completely un-biased by reality, we named our project "Mode X". We set a clear goal for this mode formerly known as flashcards:

You should be able to effortlessly familiarize yourself with the terms in a set, with as few gestures and actions as possible.

Mind Be-Lown

Since we weren't constrained by reality, we created a shape that simply can't exist: our transforming cards.

cards

The top of the card squishes and shrinks into itself as the second part of the card comes up to become a two-sided card.

UmpOi

Paper can't do that. It can't dissolve into itself and the text can't be disconnected from the background in order to stay in one place as the background moves. But thanks to Anand, Andrew and David, Quizlet could do that.

Anand and I tried explaining the new metaphor to Shane, who had just joined the Quizlet dev team. But it was impossible to show him using physical objects.

flashcards2

And so we turned to our secret weapon within Mode X, the "x" shortcut (try this out yourself).

x-mode

This shows each individual part of the card moving as the card goes from expanded to two-sided. It was actually necessary for us to build it in order to code this project. But it also looks pretty sweet, so we kept it enabled (for now).

We did say "Give us feedback"

While building this, we did a lot of in-person user testing with students and teachers in and out of school. But we also wanted to include the whole Quizlet community (outside of San Francisco) in our iteration process. A week after we put up our first version of the new flashcard mode, we received 1,129 messages that our whole team responded to (including the engineers who built it).

Screen Shot 2013-05-29 at 6.19.18 PM

Over 2 months, we got nearly 10,000 messages. All these generous users helped track down bugs and improve the mode tremendously by pointing out what was missing or what was unclear. We hope you keep all that feedback coming!

And while we're at it...

Not only did we want to revolutionize the idea of what a flashcard could be on web, we also wanted to improve the Quizlet study experience in general. Here's the highlights of more features we added.

Starring Cards

Now you can focus in on a sub group of your set and study just the really hard ones.

stars

We might expand this system of starring to the rest of Quizlet so that you could work on just your stars in Learn Mode for example. Ideas on how you think this should/could work for you are welcome and encouraged!

Audio Options

Based on user requests, you can now slow down the audio..

audio-options

Additionally we recently added one-sided audio at the request of vocal language learners who wanted to hear the word they were learning not the English word they already knew.

Play Mode

We added an option to play the cards automatically (an already popular feature on our iPhone app), so that you can listen to the words while you're doing your laundry or out on a run (on mobile!).

play

Bigger Images

Images can now take up the whole screen to show up particularly sweet pictures (this this one) or a detailed medical diagram.

big-image

Modes Header

During the design process, we added a new header for all the study modes on Quizlet. Now you can quickly switch from one to the next without having to go back to the set page.

header

Move from Cards to Learn Mode to a few games of Scatter and then go to Test. You'll be done with your studying in no time!

We don't take the summer off...

flashcards

We delivered the exceptional study experience we set to but this is just the first step in more exciting developments we'll be working on this summer.

We're planning a redesign of a set page that might involve achievements, accuracy scores, and much, much more. And now that all the study modes are side-by-side in the new header, we're looking into more cross-mode studying options (such as starring across modes, adding progress markers, or suggesting a next step in your studying journey). And we're hoping to overhaul the search experience on Quizlet. Not to mention Android and iPad...

As usual, please let us know if there's something you think we should do on those fronts (or anything else for that matter). Thanks to everyone who gave us feedback in person and on the web and enjoy your summer!

Create Set