Final Major Project

Proposal Document

Sam Topham
Web Design 2010

sam.topham@hotmail.co.uk
Table of Contents
1. Abstract
2. Project Goals
3. User experience
3.1 Audience
3.2 Competitive Analysis
3.3 The Graffiti Database Project – flickr
3.4 StreetArtLocator.com
4. Critical Analysis
4.1 Introduction
4.2 Research sources
5. Project Content
5.1 Content
5.2 Application interface
5.3 iPhone/Android application
5.4 Marketing site
5.5 Functional Requirements
5.6 Development
5.7 End user
6. Project Structure
7. Visual Design
7.1 Design Sketches
7.2 Screen Mock-ups
7.3 Prototypes
8. Development Schedule
9. Appendix
9.1 Reference & research material
9.2 Development schedule
Abstract
Through my life, I have developed a keen interest and passion for art and design, I love
design, and designing things myself, mainly out of choice because it is enjoyable to me.
Of all of the various types of art & design one area which has always been of particular
interest to me is street art or graffiti. The term graffiti referred to the inscriptions, figure
drawings, etc., found on the walls of ancient tombs or ruins, as in the Catacombs of
Rome or at Pompeii. Usage of the word today has evolved to include any graphics
applied to surfaces in a manner that constitutes vandalism, usually in public locations.

In my opinion street art constitutes some of the finest art in existence, for example, the
world famous street artist Banksy, creates satirical and subversive epigrams which are
undoubtedly thought-provoking and intelligent pieces of art, which are designed to
challenge the way we view certain aspects of society and politics. This type of modern
art is appealing due to its provocative content, I believe people love Banksy's work
because it makes sense, people understand it and probably agree with what he's saying.

Since graffiti, unlike classic art found in gallery's etc., is classed as vandalism and
classed as a somewhat 'underground' movement of artists working in secret, it has
always been a problem to source the latest and best pieces of graffiti, mainly due to the
obscure nature of the locations they are created. It is this problem which sparked the
idea to create an application which is connected to an online database that can be
accessed anywhere and any time, either through an website or mobile application
running on an iPhone or Android platform.

The idea is to create an online environment where users can upload a photo of the graffiti
along with GPS coordinates or 'geo-tag' which is then uploaded to the database and
onto Google Earth for other users to look and find using there GPS enabled smart-
phone. Their should also be an option to add notes about the graffiti, including an
appropriate title and the name of the street artist if known, if this is not known, then the
options for other users to update the information will be available. The 'geotagged' graffiti
can then be viewed on Google Earth. The purpose of the application is not only to allow
users to upload GPS locations of graffiti, but also offer a place for people who are new to
the graffiti scene to be able to login and find pieces of graffiti that are nearest to their
location. An mobile based version of the application, designed for any Android-based
mobile platform, would allow the user to access all the features of the desktop-browser
version.
Project Goals
Eventually, I would like to produce a professional, usable and accessible web application
which could realistically be deployed onto the web for users to access and contribute to.
It should conform to information architecture rules as well as having an eye catching
design. The application, both on browsers and mobile platform should allow users to
upload, geotag, and view graffiti online within a mapping environment such as Google
Maps.

The application must conform to the standard guidelines for modern websites:
- Conform to web standards such as HTML5, CSS3, PHP, MySQL & DOM.
- Completely usable and efficient in what it aims to do.
- Contain applicable and relevant functionality for the target audience.
- Ability to be accessed from certain mobile platforms.
- Accessible according to the WAI guidelines.

Furthermore, there are some goals which I would like to achieve personally, such as:
- Researching and building an application for the Android mobile platform.
- Conduct relevant user testing on a one-on-one basis to further my project
- Improve my knowledge in various technologies (HTML5, CSS, jQuery, Flash)
User Experience
Audience
The website and application that I propose to build is targeted at users who are roughly
aged between 16-25 years, also people with an interest in modern and street art, more
specifically graffiti artists themselves. Since the project involves users uploading and
geotagging the photos, the primary target audience should also be comfortable with
existing and upcoming web technologies, mobile applications, and the use of these.

Furthermore, a more generalised audience would be people who have an interest in

finding out and keeping track of street art but who would otherwise not be aware of
where to start looking, since the majority of the locations are obscure and often hard to
find.

Scenarios
There are various scenarios in which I imagine the application will be used, firstly as an
upload-user, these will be users who have, for example, just seen/found a piece of street
art which they feel is particularly good and worthy to document, the user can then, using
their GPS smart-phone, take a picture of the graffiti, add notes including a title and the
name of the street artist if known, and then upload the content into database.

Secondly, there would be users who mainly use the site for finding out the various
locations of graffiti. These users could log onto the website/access the application, enter
their postcode and then be presented with the GPS coordinates and locations, as well
as the proximity to the street art. This would be particularly useful once the database has
a greater amount of information uploaded because then the user could essentially use
the application as a GPS tour guide to the various works of street art closest to them.

Competitive Analysis
The idea which I propose to develop, is fairly unique, though not entirely. There are some
solutions available online for tracking locations of street art, though these have yet to be
included within a mobile platform application which I intent to build. At the time of writing,
there are only a handful of sites which provide information on the locations and photos of
street art.

The Graffiti Database Project – Flickr

Hosted on the image hosting and sharing website Flickr, this pilot project
attempts to accurately map geotagged photos of graffiti around the
world. The images are geotagged from within flickr using an internal plug-
in, the user has to record the nearest business or known address in order to geotag,
then the user manually inputs the longitude and latitude. This is a design flaw because
itmeans that the process takes quite some time as opposed to my idea whereby the
GPS coordinates are read directly from the smart-phones internal GPS receiver and
automatically added to the images metadata, ready for upload.
Street Art Locator
The website streetartlocator.com is an online community of people who collectively strive
to create an online, mapped record of not only graffiti, but also galleries, paintings,
stickers, stencils and sculptures. This is achieved in a fashion similar to my own idea, the
homepage displays a wordwide map containing data created by
the various users of the site. Users must login with their name
and email, in order to be sent a password for access to the
upload section where locations and photos can be added. This
site is very helpful in mapping the locations of the street art, but
one critism would be that it is not able to be accessed easily
through a mobile platform. I aim to create an application which is
designed for both the web and for mobile platforms, making it
very accessible to the intended audience.

Critical Analysis
Introduction
In order to develop a completely accessible and fully functioning application, available
across various platforms, I must examine the roles of usability, accessibility, information
architecture and data relevancy throughout the project. Therefore I shall be doing
thorough research on these issues in order to employ the proposed
guidelines and standards as mentioned earlier.
Additionally, when planning the design I should use well-established
application designs as a guide to developing features and a strong
user interface, for example Apple's design trends are widely
understood format, taking the user on a logical journey through an
applications features. These shall be used in order to make the application easy to use
and accessible.
The project I propose here is hopefully going to fill in a niche in the market for a complete
graffiti geotagging application, by combining various aspects already on the market such
as the geotagging used on The Graffiti Database Project, as well as the user login system
and mapping solution found on streetartlocator.com, I am hopefully creating a concise
solution for anyone interested in the discovery and online collecting of street art/graffiti.

Research Sources
Steve Krug's “Dont Make Me Think” is an invaluable resource
when creating accessible design, aswell as for avoiding and
solving usability problems when designing for on the web.
The most important books that I shall be reading are the following:

- Professional Android 2 Application Development. Reto Meier. Wrox 2010

- Learn Java for Android Development. Jeff Friesen. Apress 2010.
- Web Geek's Guide to the Android Enabled Phone. Jerri Ledford. Que 2010.
- Web Accesibilty: Web Standards & Regulatory Compliance. Michael Burkes. Friends of ed. 2010
- Pro Android Web Apps: Developing HTML5, JavaScript, CSS, and Chrome OS Web Apps. Damon
Oehlman. Apress 2010.

Project Content
Content
In general, the applications structure will be kept to a bare minimum in order to increase
user-friendliness and usability. The content will be designed in such as way to make it
easy to use and pleasing to the users eye.

Web Application / Marketing Site

When the user first lands on the main page, they will see the map and basic description
of what the site is about, and its aims, to promote the awareness and locations of good
street art, not vandalism. They will be prompted to sign up in order to use the tagging
facility and also to be able to view the tags and locations already present on the maps
section.
The main place which the user will interact with is the map itself, which will take up a
good portion of the available space, which shows the locations of the various street art
which other users have located. The map will be tagged with small icons which, when
clicked on, will reveal information on the graffiti such as location, artists name, and extra
information needed to locate the graffiti if it is in an inconspicuous location.
After they have finished using the site, they will log out and be returned to the home
screen. I would like to include a Facebook Connect feature, enabling users to 'like' the
site or individual locations that have been tagged.
The site will also most probably have a set of links either down the side or along the
bottom of the page within the footer, these links will take the user to the websites of the
most famous street artists.

Overall, the major elements of the site include:

- Interactive Google Map, with current geotagged positions and 'hover over' information
- Upload section, containing image uploading facility with the ability to give the image a
title, as well as name the artist if known and add the longitude and latitude of the work.
- About section, detailing the reasons for the site and its aims.
- Links section, containing links to notable street artists

Android application
A mobile version of the application, which will be arguable more important than the web-
browser version shall be produced. This will run on Android based smart-phones, and
will utilise the built in GPS system in order to provide a fully automated geotagging facility
to the user. The application will look almost the same as the online web-browser version,
apart from having a smaller framework, and stripped down images, smaller fonts etc to
give it great accessibility and usability.

Functional Requirements
Development
I will be developing the project using various software packages and applications. These
will include:
- Dreamweaver CS4 (Win7), for coding, and front-end scripting such as HTML5, CSS3 and
jQuery.
- MySQL, for creating the database which the images are fed from onto the Google Maps.
- Fireworks CS4 (Win7), for designing any graphics for the site and applications.
- Flash CS4 (Win7), for developing the mobile platform application.
- Adobe AIR, deployment and testing for mobile platform.

End-user
The end user will require:
A modern web browser, with active internet connection such as:
- Firefox 3.6
- Safari 5
- Google Chrome 7.0
- An Android-based, GPS enabled smartphone for geotagging option. (optional)
- Facebook application, in order to use the 'like' options. (optional)

Project Structure
Architectural Blueprints
The main part of the application, the map will be contained on its own page, all the input
boxes for selecting the photo of the street art to upload as well as the artists name and
the box to enter the longitude and latitude will pop up within the page, so it is self
contained, this reduces page refreshes and gives the user the information they want in a
quicker manner. Though the site will include other sections as shown below, using a
basic, single level navigation.
Global and Local Navigation
The navigation for the site and application is very simple, using only one level of
navigation as shown above, all of the information the user needs, or is required to input
shall be brought up inside light-box style boxes with semi-transparent background, this
means everything is basically contained within one page and makes for a smoother user
experience.

Visual Design
Development Schedule
Appendix
Reference and research material
Publications:
• Professional Android 2 Application Development. Reto Meier. Wrox 2010
• Learn Java for Android Development. Jeff Friesen. Apress 2010.
• Web Geek's Guide to the Android Enabled Phone. Jerri Ledford. Que 2010.
• Web Accesibilty: Web Standards & Regulatory Compliance. Michael Burkes.
Friends of ed. 2010
• Pro Android Web Apps: Developing HTML5, JavaScript, CSS, and Chrome OS
Web Apps. Damon Oehlman. Apress 2010.

Websites:
• W3Schools – HTML5 and CSS tutorials (http://www.w3schools.com)
• PHP Documentation and tutorials (http://uk.php.net/)
• Android Developers Site (http://developer.android.com/sdk/index.html)

Software and technology:

• HTML5
• CSS3
• Javacscript/jQuery
• PHP
• MySQL
• Eclipse – developing for Android (Windows 7)
• Adobe Master Collection (Windows 7)