We have recently completed a several-month process of sketching, refining, prototyping, and testing low-fidelity wireframes for a totally new web application. This web app design overhaul will affect all screens that the user encounters *after* being logged in.
We are now at the phase where we are ready to "skin" the prototypes and prepare them for implementation. This contest is simply to design the UI for the user's main 'dashboard' page for a particular class. You can see the attached wireframe for guidance of the main navigation elements.
If you are selected as a winner, we will likely continue to work with you to skin the rest of our web app's screens with a similar skin.
To see a visual concept of the screen, we recommend both (i) creating a free Brainscape account, logging in, and looking at the main My Classes screen, with a particular class (e.g. Knowledge Rehab) selected in the main area; AND (ii) referencing the wireframe that we have attached, with the new site navigation (but the same general functionality as the current live web app).
The screen should contain the following elements:
(1) A top navigation bar with the Brainscape Logo and options to Find Flashcards and Make Flashcards, as well as a User Profile avatar to the far right
(2) A collapsable left panel, allowing the user to quickly navigate to other classes or all the way back to their Profile screen. At the bottom of the Class List in the left panel should be options to Create New Class or Browse Catalog
(3) A full-screen main area serving as a "container" for all elements of the selected class. When the left panel is visible, it should be clear that the class selected in the left panel is the same class that is visible in the main area of the screen.
(4) The screen should consist of a large title area at the top, which contains (i) the class name; (ii) class icon; (iii) study progress indicator (either a mastery bar, a progress wheel, a single % stat, or whatever else you think would best represent the % of flashcards mastered in the class); (iv) a drop-down options menu with Class Actions; and (v) a Help info icon. Also, there should be an icon in top-right that allows the user to show/hide the top and left nav bars, to focus more exclusively on the class at hand
(5) Underneath the title area should be three tabs: (i) Class Info; (ii) Decks; and (iii) Learners. The tab selected for this contest design submission should be the *Decks* tab.
(6) At the top of the list of Decks should be quick links to Create New Deck and Import Deck. At the bottom of the list of decks should be a lightly colored placeholder "new deck" that the user can easily click to create a new deck on the spot.
(7) Inside each Deck in the list should be the following elements: (i) Deck Name; (ii) Deck Mastery Indicator (either a mastery bar, a progress wheel, a single % stat, or whatever else you think would best represent the % of flashcards mastered in the deck); (iii) Ratio of Cards studied over total cards (e.g. 17/56 Cards Studied); (iv) Quick links to Study, Preview, or Edit; and (v) a Deck Options drop-down menu with additional features.
That's it! Remember that Brainscape should feel like a smooth, modern utility app, but should also consider lightly "playful" elements as well.