Back to Help Center

licity isn't as simple as you might think: How your users can keep you honest

The Project: 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?"

And so we set out to create a study mode on Quizlet that would replace our current flashcards with one clear goal:

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

Simplicity isn't as simple as you might think

Unless you get a simple thing absolutely right, it can be more user-UN-friendly than the more complex version. And that excites ire in your userbase. Aware that we couldn't rely on our gut alone for what was perfect and obvious, we committed as a team to amping up our feedback on this mode as we built it, rather than waiting to end to find out what everyone thought.

This game plan included:

  • Class Visits to see how teachers and students used the old and new versions of flashcards
  • Users in the office as we built flashcards and how us how they studied on web and mobile
  • Launching a V1 of flashcards in preview mode, bugs and all
  • Open up the floodgate of feedback from our users
  • Iterate, iterate, iterate

Quizlet.com/totally-broken

At Quizlet we have high standards for launching a new feature. We create (and check off) endless lists of bugs in every browser and device we can find because we're committed to every student at every school having a great experience on Quizlet.

We had to sacrifice for the greater good in this case however, and release a feature in preview mode that we were 100% sure had some serious bugs in it. We'd done a lot of testing with local Quizlet users but we wanted to hear from all Quizlet users.

version-1

And so we launched Version 1 of flashcards past midnight on Thursday night and waited for everyone to tell us what they thought.

Night of feedback 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!

Class Visit - press the big blue buttonnnn

Version 2: Stronger, Better, Faster

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.

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.

Create Set