Wireframe Prototype — Flashcard App

Design

This is a flashcard app. The purpose of this product is to help learners to remember vocabularies or concepts more easily.

There are dozens of flashcard apps in app store, why make another one? Because none of them meets my needs. My needs are very simple — I am studying GRE vocabularies, and I don’t want to manually input every definitions of the word. No matter what you are trying to learn using flashcards, inputing definition is definitely a pain. We should better leverage the technology.

This flashcard app focus on improving the experience of creating a new flashcard. There are three ways of creating a flashcard

1)The system automatically generate a definition be fetching data from google api and wikipedia api. A lot of times, there will be multiple definition of a concept/word. The user can choose the definition they want by checking the corresponding checkbox.

2)User can take a picture from the textbook. The system can recognize the text, or, user can simply use the picture as the definition instead.

3)Users are still allowed to input their own definition.

The focus on the mobile platform and web are different. For mobile, inputing text is such a pain, however for web, copy and paste is very easy to do. As a result, for the web app, we can make the process even easier by allowing users to import data from spreadsheet.

Process

Content Inventory and Information Architecture

List of features and contents
Screen Sketches and their relations

Interactive Wireframe

I made two separated interactive annotated wireframe for both Mobile and Web.Mobile: http://1fsres.axshare.com/ Web: http://qrutrr.axshare.com/

Analysis

The participants really like the idea that the definition could be automatically filling out and by taking a picture. However the participant think it would be better if the review(study) feature of the app could be stronger, because after all, the flashcards are made for studying.