How Brainscape started their web page design journey
Brainscape is a new web and mobile application for learning and studying. The Brainscape system uses a "flashcard" metaphor to allow users to study. After seeing a card, users must "rate" how well they know the information. Brainscape uses this rating to determine the optimal time to show the card again or incorporate new information.
This design content seeks to generate good conceptual ideas of our flashcard screen. (i.e. the learning machine, NOT the logo. You may use our existing logo which is attached to this contest.)
Our internal designer will use the winning mockup as the seed for our upcoming website overhaul.
Tell us a bit about who you are and the people you reach
Brainscape users are tech-savvy, comfortable studying online and on their iphone (or Android phone). Typical users are high school students studying for standardized tests (SAT, AP exams, etc), college students creating cards for their courses, young professionals taking certification exams or qualifying exams for graduate school (MCAT, GMAT, GRE), and other adult learners studying foreign languages.
*shows the flash cards ("question" card, and "answer" card)
* card area is 450px wide by 180px high
* "flip" button reveals the answer
*allows the user to rate how well they know the answer on a scale of 1-5
*graphically displays the user's progress through the materials they're studying
*has a "total mastery" graph which shows progress from 0-100
*has a bar (or other) graph that shows relative number of cards in each of 6 quadrants/levels
o 0 not seen
o (1) not confident --> (5) mastered
Look & Feel
* We want to give the impression that cards are chosen by an advanced "learning machine"
* We are looking for a machine, network, flow, or similar metaphor
* lightweight design
* smart use of color
* as few images as possible (i.e. don't give us a design where every label, button, line, etc. needs to be an image)
See the uploaded attachments for a general layout, and feel free to contact me with any questions about Brainscape by emailing email@example.com.