Flashcards

Giving students a study tool that works

Flashcards are a familiar tool that students have used for decades. Interactive digital flashcards should feel familiar but improve upon the analog experience.

The problem

Students need to memorize large amounts of information for upcoming tests and want a digital flashcard tool.

How to use flashcards effectively

Research shows that flashcards are effective because they engage active recall, aide spaced repetition, improve comprehension and retention, and allow for visual learning. In addition, studying is most effective when you break material into chunks and spread study sessions out. Flashcards specifically should be studied whenever a student has idle time. Being able to study flashcards on a mobile device is essential for giving students the accessibility they need to study at any time.

Early questions and challenges

Most of my initial questions were around how flashcard sets would be organized into our existing course library. What were the entry points for sets and what content would they be mapped to? How would we ensure that the sets linked to relevant content for further study?

One of the main constraints was to keep the flashcard page in the same template as the lesson page for consistency purposes. The main desktop page would remain in the same tabbed template that is considerably busy. For this reason I explored launching a new screen to view the cards so that I could minimize distractions.

Aligning user needs with business vision

I facilitated a kickoff meeting where my product owner and I reviewed the spec and discussed user goals, business goals, and any constraints or unknowns. We established our user’s main goal as memorization of concepts in conjunction with our lessons, quizzes, and exams. We established our business goals as building high quality urls, showing new users the breadth of our content, and becoming more competitive by offering a highly desirable feature.

Supporting concentration and memorization

For a study session to be successful, a student has to comprehend, memorize, and retain information. I dug into research on good study habits and what enhances a learner’s memorization and comprehension capabilities. I wanted to focus on designing an interface that would support learning rather than distract from it. I worked to continually bring the conversation back to the student’s need to concentrate and comprehend when explaining my design decisions.

Setting a student up for success

I explored mobile and desktop solutions with early sketches and a few iterations of wireframes before moving to hi-fidelity.

Mobile first

Flashcards needed to be mobile optimized so it was great opportunity to take a true mobile first approach to the design. My product owner appreciated my mobile first approach and was able to clearly see the benefits of shifting our design process in this direction. I iterated through mobile layouts and held a group sketch session with a few designers to explore multiple solutions. Because we were building a mobile web mvp, we decided to only allow tap gestures for mobile. Once we move towards a flashcards mobile app experience we would bring other gestures into the conversation.

Learning experience

When a user launches the card viewer, all unnecessary distractions are removed to support concentration. We chose to include a grading feature so that a student can continue to study only the cards they have missed once they finish a deck – and in future versions, chart their progress. Once they finish studying a set and are ready to move on, we offer options to go to the next lesson in the chapter, see a related lesson, or choose another lesson from the chapter.

Discovering what a card flip should feel like

To give an early idea of the card and page interactions and to test out the flow, I created a prototype in Invision. I was able to get quick feedback from my product owner as well as the design team. The main downside of Invision was the lack of animation capabilities for distinct parts of the screen. I would have to create a separate prototype to explore card flipping animations.

Working with my developer

Card interactions are all over the internet so I spent some time researching what users were used to seeing and what was working well. I wanted our flashcards to feel like a real set of cards so I knew our animations would need to mimic analog interactions. I hacked together a simple animation prototype to facilitate a discussion with my deskmate and developer, Derek. I sketched out some motion that I wasn’t able to prototype and we quickly aligned our visions for the card animations. He took over the development of the animations and took great care to give users a smooth experience across all browsers, mobile and desktop.

Shipping and evolving as a designer

Our flashcards mvp is live on our site but we are not yet actively promoting the feature. My mobile designs shipped with the launch interaction but the desktop launch interaction was cut right before we shipped. There was some hesitation around the desktop launch screen that I thought was adequately addressed but I was wrong. In the future I will be more vigilant when new design patterns are making stakeholders nervous. Though I’m not satisfied with the desktop experience yet, I’ve certainly learned from this project, and if I had the chance, I would love to make some improvements to my original designs.

The content team is developing numerous card sets while we address bugs and early testing. We will be running usability sessions that we can compare to our click data once we start tracking their usage. Once flashcards are promoted to new and existing users we will be tracking engagement and conversion metrics as well as gathering feedback from current customers.

Personal goals

With each new project, I set out to improve my personal design process. The improvements help me to become a better designer and in turn I can share what I learn with my team. With flashcards and my heavy use of Invision, I was able to evangelize the tool for quick digital critiques. I also facilitated an in person critique using the four quadrant method. My goals were to get some good feedback on the feature, build team collaboration, and introduce the team to some critique methods. Several design team members have used Invision for design reviews now and the product owners have been grateful for the new process. It’s nice to see some evolution in the way we give feedback as a team.

My role:

interaction & visual design, responsive development