New Citizens Website

Client: New Citizens

Scope:
Design the New Citizens brand
Determine Appropriate Functionality and determine development platform
Design, Develop, and Deploy the New Citizens website.

APPROPRIATE FUNCTIONALITY

This project started with a loosely defined set of functionality. The client stated that they would like to allow the ability for users to vote on images based on whether they thought the image represented a 'new citizen' or an 'old citizen'. There were no defined qualifications for what these two terms meant nor any real understanding of why people would like to participate on the website at all.

The first things we had to determine is where the images would come from, how they were displayed, and how someone would vote on them. It turned out that the client wanted to pick the images based on what was popular at the moment. After providing many suggestions and options, the client settled on several options that they would like to incorporate.

Based on my recommendations it was determined that site should:

Display the images in groups of up to 12 images at a time.
There would be an info button to display details about the image should someone not know what, or who, it was.
There would be a 'New', an 'Old', and a 'Pass' link on the image that would allow the vote to be cast.
The image would disappear after the vote was cast, thereby leaving the remaining images to be voted on.
Once the 12 images had been voted on a new set would display if available.
Have a default image set should there not be a set scheduled
In addition to the ability to vote, it was determined that users should be able to see general stats regarding the top 5 images for both the 'New' and 'Old' categories.

I also recommended that the administrative side of the site should have the ability to:

Display and filter a more detailed set of stats for individual images as well as groups.
Upload, edit, tag, and delete images.
Manage the images based on whether it was a Person, Place, Product, or Event
Create, manage, and delete image groups.
Determine date ranges within which the groups would display, should the option be selected.
Have a default image set should nothing be scheduled.
In addition to the functionality that we had arrived at, the client decided that they would like to assign a point value to the votes, with each category of photo having different weight (People = 100, Places = 200, Products = 500, Events = 1000, etc.)

DESIGN, DEVELOP, AND DEPLOY

TOOLS: ILLUSTRATOR, PHOTOSHOP, DREAMWEAVER, MAMP PRO, MYPHP ADMIN
TECHNOLOGIES: HTML, CSS, JQUERY, PHP, JAVASCRIPT, MYSQL, AJAX

Once the branding and strategy exercises had come to an end, it was time to start coding the site.

Starting in Illustrator, I created the general design for the front and backend of the site, bringing the files into Photoshop to refine the results. With the designs approved I moved into Dreamweaver where I started by creating the basic HTML and CSS framework. Once the visual shell was complete I started creating the MySQL databases in MyPHP Admin while simultaneously building the dynamic aspects of the site in PHP. Finally, once the general site structure was almost complete, I added the Jquery and JavaScript functionalities, utilizing AJAX for the dynamic page updates.

The client decided to deploy the website with arbitrary stats for the images in place in order to give the appearance that the site's traffic was high.

Several months after the initial launch of the site an update was requested to allow for variable value voting. The request would change the way that the votes were calculated, effectively making a vote either positive or negative based on the user's perceived impact of an image on the world. My solution to the request was to include a slider that allowed users to pick 100% 'Positive' or 100% 'Negative' with the center being no affect. The change affected the initial intent of the site by making all positive votes being for 'New Citizens' and all negative votes being for 'Old Citizens'.

The following screen shots were taken from the development environment.