October 2011 Coding Challenge/Design

This document is a work in progress. Comments are appreciated but this is not a final draft.

The coding challenge details page, if the user is logged in.

The coding challenge details page, if user is not logged in.

The coding challenge details page, requiring login, step 1

The coding challenge details page, requiring login, step 2

The coding challenge details page, create account selected

This document describes the workflow behavior and design of the 2011 Coding Challenge system. This document is a work in progress. Feedback is welcome on the talk page.

This project is envisioned as an extension that is deployed on MediaWiki.org in support of the Challenge. It is a multi-step interface that requires hooking overtop of the existing login and create account workflows.

Note: Not all screens have been mocked up for this feature at this time.

Use of Whimsical Style: This feature has been designed so as to resonate with the types of users that would be interested in the challenge itself (hence the use of various terms and "meme" images). This design direction may be abandoned, however.

Process Flow

Several banner ads will be run on various projects announcing the Code Challenge. Clicking on any banner will bring the user to a special Landing Page hosted on MediaWiki.org. This process will work for all users, including anonymous IPs.

Landing Page Behavior

Regardless of the user's authenticated credentials, the landing page will behave the same.

The landing page consists of a header and a short explanation of what the Coding Challenge is. Note: the logo used in compositions is in no way finalized; it is a placeholder draft.

Below the introductory text will be a series of buttons (about five), one for each endorsed challenge. The buttons will have a primary title and a short explanation sentence.

Hovering over a button will turn it orange. There is no other hover effect.

Clicking on a button will lock it into the orange state. Other buttons will be "disabled" to a 50% visibility. If the user clicks on a "disabled" button, that button will then become active and the previously active button, like the others, will become inactive.

Once a button has been selected, an additional pop-up dialog will appear to the right. This dialog will have a "pointy" that directly connects to the button selected.

The text of the bubble dialog will have a header for the challenge as well as a paragraph or two describing the challenge.

At the bottom of the bubble will be a button, "Challenge Accepted". Clicking on this button will bring the user to the Registration Screen (see below). The challenge selected by the user will be passed on as a hidden variable.

Registration Screen

The registration screen overrides the default Mediawiki mechanisms for log in and account creation.

This screen initially will appear in one of two possible states:

The User is Not Logged In
The User is Logged In

Logged In Behavior

If the user is already logged in, they will be presented with a set of short headers. These should be encouraging, indicate which challenge the user has accepted, and say something like "we just need a little more information...". Below that is a small form:

Real Name - Autopopulated, if the real name is on file (this is in the user table).
Email Address - (if user is logged in, and email exists in database, field is auto-filled)
Country of Residence - a pull-down
Volunteer Interest - a checkbox indicating that the user is interested in further volunteer activities
Employment Interest - a checkbox indicating that the user is interested in employment with the Foundation
I have Read the Rules - a checkbox; failing to check this will throw an error
Submit Button - Some kind of informal action text (e.g., "Let's do this!") that will submit the registration.

Submitting the form will submit the registration and the user is brought to their Dashboard.

Not Logged In Behavior

If the user is not logged in, the registration screen will indicate such, and provide the user a selection: "Log In to Existing Account" or "Create Account".

Selecting either one of the options will cause an appropriate form to be displayed (through Javascript). The forms will be effectively identical to the standard Log In or Create Account form - the only difference is that there is no immediate submit button.

Below these two form sections will be visible the above described "Registration Form", though greyed out and obviously inactive (a single white div at 50% opacity will suffice).

Once the selected form (Log In or Create Account) is filled out fully, the Registration Form will become active. This is where the user will Submit.

Note that the details form should attempt to auto-populate as much data as possible (email and real name) from the account creation form.

Submission at this point will have two effects:

Either logging the user in or creating their account, and
Submitting their registration to the Code Challenge

The user will be brought back to their Dashboard, with a note indicating that they were logged in successfully.

Dashboard Screen

tbd