Approach
This web application “Flashcards” is a web-based flash card application for users to memorize words, terms, and knowledge. The site comes with several existing flashcards packages including elementary Japanese words, French words, Harry Potter Trivia, etc. Users can also generate their own flash card packages.
Problem
However, some disadvantage of paper flashcards includes that it takes long to hand-written all the words, the inconvenience of bringing cards, and the risks of missing cards, etc. Furthermore, the promotion of paperless lifestyle also welcomes digital apps of flashcards.
Duration
Feb. 2018 - May 2018
Role
UX/UI designer, usability researcher, developer
Tools and methods
HTML5, CSS3, JavaScript, Adobe XD, wireframing,
prototyping, usability testing
Overview
College students always have to memorize lots of words or terminologies in their daily study lives. Paper flashcards is a very useful way to help this process.
Wireframes and prototype
We firstly designed the basic functions and user flow for the app. Based on that, we drew the wireframe for the web application, which includes two designs - one for mobile platforms and one for larger screens such as iPads, laptops, and computers. After the first draft, we made some changes and hand-coded a high-fidelity prototype with front-end languages includes HTML5, CSS3, and JavaScript.
Usability testing
We conducted seven usability tests in order to get better understanding of the potential users’ attitude towards and experience with the high-fidelity prototype of our “Flashcards” web application. The participants include three male and four female college students, ranging from 23 to 29 years old.
​
Users were introduced to the website and were allowed to browse freely. After the test, they were asked about the overall experience with the web application, their level of enjoyment, whether they had any frustration using the website, opinions about their perceived website aesthetics, and their opinion about the overall website performance.
​
See the full user testing report here.
Highlighted findings
​
There exists confusion of the navigation buttons.
All the button areas (such as the one been circled in the picture below) should be clickable instead of only the text areas in the create set page.
A need for a delete function for the cards users have created.
It might create a better experience if users could directly change the texts directly on the card when creating a new set or a new card.
A function showing the total number of the cards in the set and which card users were on the card browsing page would increase card browsing experiences.
