Flashcard app — the interactive wireframe

Design

This is an flashcard. The difference between this app the other apps is that the process of making a new flashcard or making a set of flashcards are simplified.

The basic functions of the app includes
1)Add new flashcard sets
2)Review an existing flashcard sets
3)Create a new flashcard

The focus of this prototype is on 3)Create a new flashcard.

There are three ways of creating a new flashcard
1)System automatically fetch data from dictionary API
2)User take a picture of the definition from textbook
3)User can manually input the text

For web app, there one more function, which is importing a new set of flashcard from CVS files.

Process

Black/White Wireframe with annotation

Colored Wireframes

Analysis
The concept of the app is easy for participant to understand. During the testing, the user flow is very clear. The interface design is successful, because participant had no problem finding where to go next.

However, some of the functionalities are under implementation, so it is hard to know how they will work when they are completely implemented. The next step is to make this prototype more real and functional.