Cardtrick is a web application written in Ruby on Rails that creates clean and simple flashcards, automatically, using the comments feature in Google Drive.
I wanted to practice designing a responsive web application that would enable learning. I performed about eight hours of guerilla user research with college students and completed five in-depth interviews about their study habits.
I completed end-to-end design on this project—everything from the requisite user research to planning the IA, wire-framing the solution, building the prototype and conducting the first round of usability tests.
User interviews with students naturally guided me to a discussion of flashcard and study apps. We know that flashcards are a solid way to learn (study after study backs this fact), but we also know that high school and college students report that they don't really use flashcards—63% of them say that they rarely or never used them?
User interviews said that they would love to make easy flashcards, but there just wasn't a good way. They were right. All the flashcard options in the App Store are terrible, look for yourself. Try to use them. They'd ad-landmines, complete usability nightmare.
As I listened to users, I realized that their problems usually started in Google Docs. That's where their documents live for Gen Z college audience. Everyone mentioned it—they were all daily users. Everyone also mentioned Quizlet, none positively. Quizlet is only relevant because they received a $20 million dollar Series B in 2018, so good flashcard UX is profitable.
Tons of stuff in Google Drive, no easy way to turn it into flashcards to study—until Cardtrick. ****
I first created an "ideal" user-flow imaginatively triggered by a simple keystroke in the comments feature of any Google Drive highlight to create a card. After a couple of short conversations with the developer on the project, I understood the theory of how the back end would need to be built.
Based on that simple idea, I created the minimum necessary screens to get a working prototype in Adobe XD with pre-loaded deck non-working buttons to put my first draft of onboarding screens to the test in front of real students.
In the development phase, we used the ever-accessible Google Docs API to access our users Documents— Cardtrick just creates a simple mobile-device friendly study deck of flashcards from any document. The information you highlight becomes the term and any note you type in the comment box becomes your "definition" or "answer."
Project carrousel for Cardtrick on LinkedIn
Also See: Full Developer Write Up