egrd3015 - independent practice - final major project

1

INDEPENDENT PRACTICEUnit: EGRD 3015Joe Allam

Student Number: 0902741

BA (hons) Graphic Design, Final Major Project

May 2012

portfolio

3

introduction

CREATING AN ONLINE VISUAL NETWORKAn introduction.The Final Major Project, BA (hons) Graphic Design.

Continuing on from the last semester, I knew that I wanted to work

predominantly within the web for my Final Major Project. I had drafted up

plans to create an online visual network to showcase people’s latest visual

activity from across the web, and display it within a large grid of activity.

I wanted to work within web development as I feel that it

is an area of expertise that is very new to me. By dedicating

my last semester at University to this discipline I would be

able to continue to learn new skills whilst I still have time

outside of employment rather than working in an existing area

of confidence.

From my previous research, I had decided to produce the site

using BuddyPress — A social-network-in-a-box — developed

by the creators of WordPress as a plugin for WordPress. BuddyPress allows

me as a developer to create a wholly customised site design on an existing

framework that handles a lot of background processing such as user

registration, management and blogging software. I had spent a lot of time

developing for WordPress in the past year, but I had never completed a site

using BuddyPress. From the very beginning, I felt confident that I would be

able to complete this project, independently and autonomously.

“From the

beginning, I felt

confident that I

would be able

to complete

this project,

independently and

autonomously.”

4

self analysis

THE LEARNING INCOMESWhat do I already know?Self Analysis

I chose to work within web design and development as it is a discipline

that I have been improving within over the past year in order to increase

my knowledge within interactivity and new media.

With the short amount of time left at University, I wanted to

work in an area that I did not know or fully understand as a way

of pushing myself further professionally. I have been gaining

knowledge of HTML and CSS to a high degree over the past

year and I had touched upon some basic PHP, last semester.

This semester I wanted to improve on my PHP knowledge

and also begin to learn jQuery as a scripting language. The

information graphic to the right shows my personal confidence

in a few of the web languages from the very start of my final major project,

in January 2012. At the end of this portfolio, I have included an up-to-date

version comparing the skills that I have learnt throughout the project against

my existing skills.

“I wanted to work

in an area that I

did not know or

fully understand as

a way of pushing

myself further

professionally”

5

HTML5

PHP

jQue

ry

Wor

dPre

ss

Budd

yPre

ss

CSS3

Nothing

Basic

OK

Good

Excellent

7

WORKING TO A TIME PLANTime management.January - May, 2012

In order to maintain consistent progression throughout my work over the duration of my final major project, I

created a time plan to follow. Starting very early on in January, I wanted to get on top of my research into social

media and existing online social networks. I knew that I had set myself a very large task to build a working site

that would allow users to share their latest activity online in a visual network, which meant that research was a

key area to work within. I also knew that I had to make sure to stay on top of my time plan in order to complete

the task within the time given. In the situation whereby I wouldn’t be able to complete every outcome that I had

planned, I wanted my project to be easily scalable and manageable.

The time plan that I created covers all areas of the project from design and construction, through

user testing and eventually right up until the making of this portfolio. From the very beginning, I had

always planned to create a site that would essentially be a useful tool for myself personally that I

could continue to improve once the semester had finished.

planning

“I wanted my

project to be easily

scalable and

manageable.”

8

RESEARCHInitial Preparation.Social Media

Research is always one of the biggest areas of my work as

it is the stepping stone into creating something that is both

meaningful and well-produced. Knowing that I would be

building an online social network, I knew that the majority

of my research would be about social media and the way in

which people interact with each other in the digital form. User

interface design and user experience would also be major areas

of research, as I would be needing to make a site that is both

functional and easy to use.

Essentially, I wanted to know why people share what they do;

and exactly what is it, that people are sharing?

Staying up to date with the news within social media was a

helpful way for me to keep my mind active and aware of new

and existing technologies that may adjust the course of my

development. Both the Guardian and Mashable have successful

blogs and Twitter feeds that have aided me.

research

10

WHAT IS SOCIAL MEDIA?An insight into social networks.TED Talks

I used various TED talks to learn the way in which people interact within

social networks, both online and in person, to gain some background

knowledge within my area of study. Two talks made a large impact on my

thoughts of a social network:

How to Make a Splash in Social Media

Alexis Ohanian from Reddit gave a very short but informative talk about

how a mass of users can group together and appear to takeover a particular

message and plan of action within an online campaign. He made a great point

that it’s “OK to lose control of the context and message”. As a designer,

there’s no use trying your hardest to sway a piece of design or campaign in

the specific direction that you want, if the current is flowing the

other way. At times, the greatest work comes from the interaction

with the audience. If a user base has enough momentum and

enthusiasm, great things can be achieved. Of course, there is a

huge amount of hard work involved to build up that user base and

to make something great enough to go viral.

research

The Hidden Influence of Social Networks

Nicholas Christakis spoke about the impact that each of us have on each

other within a physical social network rather than an online one. Going as

bold as to say that if your friends are fat, you are likely to also be fat. Nicholas

presents a well researched diagram of how connections extend beyond our

own preconceptions.

He describes the process of spreading emotion. Explaining how people who

are associated with depressed people are likely to have similar symptoms

of depression, themselves. This can then be translated into online social

networks through the likelihood of someone to interact, based on the

consistency of the other people’s activity in their network. It’s a process of

a chain reaction. When a network of people start to post more content, the

activity expands rapidly to each individual’s second generation of networks.

Eventually, over time the network grows and becomes more and more active

because the people around them are active.

“At times, the

greatest work

comes from the

interaction with the

audience.”

13

Cross Referencing NetworksSpreadsheets

Part of my research involved looking at what existing services had to offer

in terms of user interaction, to see what features I would like to include in

my own social network.

I created a spreadsheet with a long checklist of features and processes such

as what is required upon account registration to basic interaction between

users. To the far left, I have showcased a small sample of the whole file as

a visual representation to the data that I created. Directly to the left is a

zoomed out image of the whole spreadsheet.

By cross-referencing a sample of currently successful sites I was able to get

an insight into some of the reasons why particular sites succeed.

research

Vimeo YouTube Flickr Twitter Facebook

Requirements for first signup screenRequirements for first signup screen

First Name, Last Name

Email Address

Username

Password

Secret Question

Survey Question

Terms and Conditions

Birthday

Gender

Mobile Phone Number

Other Email Address

Captcha

Location

Account CreationAccount Creation

Welcome Message

Tour

Recommendations

Video Explanations

Support/Help

FeaturesFeatures

Friends/Followers

Subscriptions/Follow

Comments

Favourite/Bookmark

Like/Thumbs Up

Dislike/Thumbs Down

Playlists/Collections

Groups

Forum

Profile Pages

Personal Messages

Explore

Blog

Location Services

ContentContent

Photo

Video

Big Screen

LimitationsLimitations

Content

Uploads

Interactions

ExternalisationExternalisation

Sharing Links

Embedding

Social Media LinksSocial Media Links

Vimeo

YouTube

Flickr

Twitter

Facebook

Website

Email Address

Online ExperienceOnline Experience

Media Queries

Mobile Site

iOS App

Android App

Publicly Visible Content

X

X

X

X

X

15

Vimeo Sign Up ProcessAnalysis

I went through the sign up process for each of the existing networks that I

have been researching, as a way of analysing how lengthy and informative

each one would be.

To the left is the Vimeo process. Overall it took quite a long time to get to the

end result and view my profile page, however it was extremely informative

with helpful hints along the way. The language was very informal which

made me feel like I was joining into a community rather than signing up to

a service.

research

17

YouTube Sign Up ProcessAnalysis

The YouTube process was much shorter than the Vimeo sign up process.

However, much more information was required from the user. I imagine this

is to block spam accounts as YouTube is a much larger network than Vimeo,

based on the sheer amount of Google account holders; partnered with the

fact that YouTube is the most popular online video player.

In comparison to Vimeo, there was less information and guidance about

navigating around the site. However there was the addition of popup boxes

around particular features of the site design to give helpful hints to the user.

research

19

Flickr Sign Up ProcessAnalysis

The process for Flickr was very detailed and easy to understand. The most

noticeable feature was the ability to continue the setup at any time after

signing up. Each task was bullet pointed as a clear way of seeing the process

to getting fully set up with creating an account.

An issue with Flickr however is the way in which a user will edit the

adjustments made during the sign up process, at a later date. During the

setup, each change is made in a simple step by step process. At a later

date, you have to dig deep into the settings in order to change any of the

adjustments. Like YouTube, the sign up process required a lot of information

from the user which can be off-putting to some users.

research

21

Twitter Sign Up ProcessAnalysis

Twitter mixes the process of Flickr and YouTube together in a setup/tour

process. It does a very good job of getting people started with following

particular people including a smart recommendations engine. The setup

can be continued at a later date much like Flickr, however the layout of the

setup is based around the page design of Twitter, meaning that users will

understand the layout whilst they’re first using it.

In terms of understanding the site, Twitter doesn’t really present much

text. To understand why a user would sign up they have to start using the

service. Luckily for Twitter, they have grown to become one of the largest

social networks and people sign up based on word of mouth rather than by

stumbling upon the site.

research

23

Facebook Sign Up ProcessAnalysis

Facebook has a two-part sign up process, starting with a basic step-by-

step process to add a couple of critical details such as the School that you

attended and a profile picture. A small tour of the features on the profile

page, follows. This makes it easy for users to see how to adjust their profile

once each of the helpful hints have disappeared, as well as making sure that

each user has the bare essentials when signing up.

research

25

CHOSEN FEATURESThe framework for my site.Initial Decisions

The following decisions are a collection of my intended outcomes from the

very beginning of this project back in January, 2012.

Content Generation

My original plan for generating content to the site has always been through

automatic syndication from external services such as Flickr, Vimeo and

YouTube. I have allocated time within my development process to configure

how users would be able to bring in their latest activity from various sites

using the various APIs from each service.

User Connectivity

I would prefer to incorporate a system of user ‘following’,

rather than ‘friending’ across my site as it allows for a one

way system rather than a mutual agreement that needs to be

accepted, much like the method Twitter uses. This benefits the

more popular users as they are able to broadcast their posts

and media to a wide audience without having to subscribe to

everyone else’s activity.

Site Demonstration

I would like to have an area of the site that will offer helpful hints and

demonstrations to new users as a way of introducing them to the site. Ideally,

I would like this to be in the format of a video. However, I know the process

for building the site may actually take longer than originally planned so this

feature may have to be scaled down to something a little more static.

planning

“One of the biggest

plans for this final

major project is to

make sure that it

has longevity to

continue after the

proposed hand-in

deadline”

Blog and Updates

I would like the site to incorporate a blog to post updates to the site’s features

as a method of keeping users informed and also as a way of documenting

certain milestones within the development of the site. I would also like to

have a Twitter account dedicated to the site that can post more frequent

information and also link to the latest blog posts.

HTML Emails

Rather than having standard text-based emails, I would like to have the

ability to send high quality media-rich communications to users to raise the

professionalism of the site’s identity.

Brand Identity

If time permits, I would like to create an identity for my site including a

custom domain, name and visual identity. This isn’t necessarily a priority

for me as I am initially planning to just create the interactivity of the site.

Mobile

I would like to be able to develop a mobile version of the site, for devices

such as Android and iPhone. This is also a time permitting addition as I know

that creating a mobile version is almost as much as creating the whole site

individually.

Continuity

One of the biggest plans for this final major project is to make sure that it

has longevity to continue after the proposed hand-in deadline as a personal

project.

26

SKETCHESHand rendered ideas.Initial Sketches

Before even considering working digitally, I will always start

in my sketchbook to get some ideas down on paper. The sketch

directly to the right is from my very first ideas back in December

of last semester. Further right are my updated ideas including

layout plans for the profile pages and mobile sites.

development

29

SKETCHESContinued ideas.Initial Sketches

To the left, I have enlarged one of my sketches to show it’s full

detail from thumbnail size. This can sometimes work well to

find out the best scale to use across the site.

development

30

DEVELOPMENT BEGINSInitial preparation for site design.Display Sizes

Due to the fact that there are hundreds and hundreds of display resolution

variations coupled with the user choice of which browser they would prefer

to use; websites need to be developed to be flexible and adjustable rather

than fixed.

At the very beginning of my design process, I decided to configure a multiple

column grid — much like I would within print design — to find out the various

sizes of each element depending on the screen resolution. Considering the

fact that the design and functionality of my site would revolve heavily around

the basis of a visible grid, these preliminary steps were vital.

I decided I would work with three main sizes to hold some

sort of structure to the design whilst allowing people to utilise

the extra screen real estate if they happen to have a larger

display. I based my sizing on the visible grid of either 4, 3, or

1 column of media to be displayed. The resources available

to me are all Apple products so I worked with their standard

screen resolutions in widths of 1920, 1440, 1280, 640 and 320 pixels (the

latter being iPhone retina and standard displays). I had decided that my

priority would be to develop both the 4 and 3 column versions of the site

simultaneously and if there was time available in the later stages of the

project, I would work on the mobile 1 column version.

development

“I based my sizing

on the visible grid

of either 4, 3, or 1

column of media to

be displayed.”

31

1920+ pixels width (full HD displays. Typical 23” and above. Example of 2560px width (iMac 27”).

Up to 1440 pixels width (MacBook and MacBook Pro). Typical 15” displays. Mobile devices.

32

Title of Movie

User posted MM Time ago

Month DD, 2012

Title of Movie


Month DD, 2012


Title of Movie


Month DD, 2012

Title of Movie


Month DD, 2012

Title of Photo


Month DD, 2012

Title of Photo


Month DD, 2012


Title of Movie


Month DD, 2012

Title of Movie


Month DD, 2012

visual network search

43 minutes ago 6 comments

1 hour 26 minutes ago 12 comments

19 minutes ago No comments yet...

2 hours 12 minutes ago 3 comments

LOGIN

REGISTER

3 days ago 12 comments

EVERYONE

YOU

FRIENDS

GROUPS

RANDOM USER

TWITTER FEED @usernameMENTIONS

FAVOURITES

REQUESTS

2

6

1

STREAM FRIENDSF AVOURITES GROUPS PROFILE ACCOUNTFORUMACTIVITY 9

33

DIGITAL DESIGNLayout and grid mock-ups.Reflection from last semester

Last semester, I created the mock-up shown on the page to the left (top) as

a way of visually expressing and supporting my idea of creating a visual grid

of media. At the time of creating this mock-up (December 2011), I wanted to

have the activity from a user’s Flickr, Vimeo, YouTube and Twitter accounts

automatically syndicated into the grid for all other users to see. Since that

time, I revised my idea and decided to remove Twitter from the main grid

as I felt that it would disrupt the grid with a bunch of irrelevant text and

occupy precious grid space. The updated mock-up is shown below the first.

development

34

Me View Notifications Forum Help Register Sign inSearch

Me

Visual Network

View Notifications Forum Help Register Sign in

Register Sign in

Search

Me View Notifications Forum Help Search

Visual Network Register Sign inMe View Forum Help SearchNotifications 0

Profile

Favourites

Friends

Settings

Log Out


Profile Favourites Friends Settings Log Out


Profile Favourites Friends Settings Log Out


Profile

Favourites

Friends

Settings

Log Out


You

Following

Everyone


Profile

Favourites

Friends

Settings

Log Out

Visual Network Me View Forum Help SearchNotifications 0 Register Sign in

Profile

Favourites

Friends

Settings

Log Out

Visual Network

Visual Network

Me View Forum Help SearchNotifications 0 Register Sign in

View Forum HelpNotifications 0

Visual Network Me View Forum Help Register Sign In

Me

Notifications 0 Search

Profile

Favourites

Friends

Settings

Log Out

Visual Network Me View Forum Help Register Sign InNotifications 0 Search

Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


35

Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out

Visual Network Me View Forum Help Register Sign InNotifications 0 SearchVisual Network Me View Forum Help Register Sign InNotifications Search

Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


Profile

Favourites

Friends

Settings

Log Out


NAVIGATIONSite navigation and user interface.Prototyping with Illustrator

Before heading straight into hard coding the site design with CSS, I worked

in Illustrator to get an idea of some layout options that I could work with as

well as a few colour variations. The main idea was to work out a scale for

the site navigation and to find a healthy balance between making it easy

to use and noticeable, but not obtrusive. The navigation bar is the only

consistent piece of design across the site so I wanted to put a lot of effort

in getting it just right.

development

37

FEEDBACKOnline HTML/CSS prototype.Developing usability and functionality

After prototyping a navigation header within illustrator, I then coded a

version in HTML and CSS to work with the interaction and usability. I put

this version online and asked others for feedback either in person or through

Twitter and email. This process was very helpful in gaining an outsider’s

perspective of my designs and also as way of testing out different web

browsers and their limitations.

HTTP://SANDBOX.JOEALLAM.CO.UK/FMP/DEVELOPMENT/

NAVIGATION-1-1.PHP

development

http://sandbox.joeallam.co.uk/fmp/development/navigation-1-1.php

http://sandbox.joeallam.co.uk/fmp/development/navigation-1-1.php

39

OFFLINE SERVERWorking locally before going live.Localhost

WordPress is a web application that runs on a system called PHP which

gathers data and information from a whole host of files in order to build up

one single page. It also stores all information including user data, posts and

settings. In order to work offline and produce the site I had to convert my

own personal computer into a server. Using a free piece of software called

MAMP, I was able to open up the server software Apache for personal use

and create a local database to host my site.

Having an offline version of my site before going straight online makes it

much faster to develop, as I don’t have to wait for upload times in between

slight changes that I make. It also means that I don’t have to rely on

the internet to work, therefore internet connections and speeds are not

considered when initially building.

production

41

BUDDYPRESSCreating a child theme.Basics

As mentioned before, BuddyPress is a social-network-in-a-box, meaning that

it will work straight away in its basic form. This basic form also includes

a default theme design that users can work with. I was using BuddyPress

purely for it’s admin control behind-the-scenes and so I completely gutted

all of the styles applied to the site and started fresh.

The screenshot on the far left is how the default style looks and on the right

is the position for which I would start designing.

development

43

Sample Development Process

The sequence of screenshots to the

left shows a small sample of how a

part of the site has developed over

time.

Initially, the elements in their most

basic forms are highlighted (aqua)

and then positioned into the correct

place, possibly renamed depending

on the user experience that I have

chosen. Each element would then be

individually styled.

45

PLUGINSEnhancing my site with open source solutions.Benefits

One of the greatest features of making a WordPress site is the ability to install and

configure a magnitude of plugins developed by other like-minded designers. There is a

great sense of community within WordPress which means that a lot of software is shared

around for free. This has become beneficial for me as it has allowed me to implement a

specific feature in a matter of seconds rather than through weeks of development.

There are many plugins installed on my site, but a few are more prominent in terms of

the effect they have on the overall site experience. Most notably would be the plugin

‘BuddyPress Follow’ which enables users to follow each others activity without requiring

a mutual agreement from either party as the regular BuddyPress Friends feature does.

I am also running a plugin called ‘Jetpack’ which offers many features, but most important

to me would be the tracking of user views and other statistics. As the site is still a closed

network, I am using a plugin called ‘WP-Invites’ which limits user registration unless

they have an invite code. It also allows me to send out invites to people in bulk and track

which emails convert to user signups and which invite codes are more successful.

You can view the full list of plugins in the folder structure to the far left.

extensions

46

JQUERY MASONRYAssembling the grid.Development

In order to make the grid an organic, adjustable and flowing element, I had to implement

jQuery Masonry which is a layout plugin for any web application. If I were to use the

default settings of how a browser reads ‘floating’ elements on a page, I would have a

layout similar to the diagram. Elements are floated left which means that they have their

vertical position fixed before the horizontal position is adjusted. This means that if there

were to be a vertically smaller element at the far right of the layout, then the next element

would slot into place directly below it rather than flowing from the left onwards. jQuery

Masonry enables the opposite to happen. It will lay items out on a vertical grid before a

horizontal process takes place. This minimizes vertical ‘gaps’ from appearing throughout

the layout.

At the start of this project, I really didn’t have much knowledge with using jQuery and so

it took many weeks of revisiting this issue with the grid to fully understand how Masonry

would work and to set it according to my own site designs.

The screenshot to the right is the example page from Isotope, the latest version of jQuery

Masonry with extended support for more features and performance.

48

INTERACTIVITY SETBACKSProblems along the way.Automatic Syndication

Throughout a large amount of the production time for the site I had been

working to get the automatic syndication of posts from user’s external service

accounts such as Flickr, Vimeo and YouTube. Along the way, I stumbled

into many different issues. Firstly, a lot of the processes for creating an

automatic solution are beyond my skills as a developer. They involve some

programming that would require a user to log in to each of the services

whilst on my site, fetch some data and then convert it into a format that I

could work with. Even with the help of some experienced web developers,

getting this feature to work in the way I had intended seemed like a very

distant possibility within the time frame available.

Issues with time aside, there was another problem that I would

have encountered along the way if the process had been

completed. API (Application Programming Interface) request

limits. Each of the services that I wished to connect with, have

limitations on how often you can fetch data from their servers.

Generally speaking there is usually a limit of about 60 requests

per hour to fetch data on a single API key (a unique identifier for

problems

“I came to realise

that these issues

were really slowing

me down with the

production of my

site”

an application). If there were multiple users on the site refreshing feeds over

a number of services at the same time, I would likely run out of API requests

within a much shorter time than the 60 minutes allocated. A solution would

be to register and create an API key for each user that signs up to my site.

This would be a very long winded manual process as more users begin to

use the site. Without the help from the development of a plugin — which I

am also inexperienced with — this process is impossible.

I came to realise that these issues were really slowing me down with the

production of my site and I was looking to begin user testing in just a few

days, so I had to make a compromise and create manual posting. By having

manual posting, it means that a user would have to copy and paste the URL

from the address bar of a video or photo that they wanted to share from

locations such as Flickr, Vimeo or YouTube into the share box on my site.

By having this method, it allows me to continue with other areas of the site

and develop the user experience and user interface in much more detail. I’d

still like to include an automated feature into the site at a later date when

I have gained more experience, but for now I am satisfied with the results.

50

ALPHA TESTERSUser testing phase one.Invitations

On schedule with my time plan, I opened the site up to user testing at the end of March.

Initially, I wanted to manage the amount of users who would be joining the site through

the use of an invitation only registration process. Using the plugin WP-Invites, I was able

to lock the site down to new users unless they entered one of my preselected invitation

codes or clicked a specific link within an invitation email.

I sent 11 invites in the first batch, of which 7 people responded by signing

up for an account. In the second batch of invites I sent out another 11 emails,

however only 3 people from this batch signed up. I had tried to maintain

some consistency with the type of person that I was inviting from my contact

list. Most of the invitees were either creative individuals or extremely tech-

savvy in terms of web interaction.

You can see the initial message that was sent out to each of the invited users in the

screenshot to the right. I was a little surprised that more people didn’t sign up to test out

the site, but unfortunately that is beyond my control.

process

“Most of the

invitees were either

creative individuals

or extremely tech-

savvy in terms of

web interaction”

53

BEFORE AND AFTERIncremental changes along the way.Design Adjustments

During the process of designing the site there were numerous

occasions of stylistic change. One of the most notable changes

was the addition of a textured background and a slight change

in the detail of the drop shadow on each of the elements. You

can see the difference and extra ‘pop’ that is achieved with the

composition to the left. The top left corner is the newer version

of the design.

The next spread shows these adjustments applied in full to the

main activity grid.

development

56

CREATING A BRANDComing up with a name.Initial ideas

During the middle of March, I was preparing to get the site online for early user testing

and I was also considering creating a brand image and name for my website. The main

principle for the project was the whole interactivity of the site and the actual build process

rather than a name and logo being the main focal point.

During my early stages of development, I was referring to my site as simply ‘Visual

Network’ then I moved on to ‘FlimeoTube’. The latter being the compound of Flickr, Vimeo

and YouTube. I kept referring back to my notebook with additional ideas for a name but

nothing really stuck in place, so I registered the domain flimeotube.com .org .info and .net

for under £10 and used that as my temporary solution to my branding problem.

branding

59

FINDING A NAMEDigitally developing a logo.Continued Branding

After numerous options for a name, I thought I had it settled with the name GridNet.

Working in Illustrator I tried to create a logo or brand image that was sufficient for my

website. The hardest part about choosing a name for the site was making sure that a

suitable domain name was also available. The best domain name option I had with GridNet

was gridnet.me. I personally felt as though it gave a personal and informal touch to the

name however it still didn’t fit right.

I continued to search for a suitable name and domain to match until I

came across the idea of GridShare. I felt the name was a little less harsh

typographically and I was also able to buy the domain name gridshare.co

(the ‘.co’ domain is an up and coming standard of domains that is projected to

become more popular than .com within the next 5-10 years). I also purchased

the domain gridshare.it for potential future purposes. The graphic to the

right is the final chosen name and logo. I have attached ‘beta’ at this stage

to make users aware that this product is still in stages of development.

branding

“the ‘.co’ domain

is an up and

coming standard

of domains that is

projected to become

more popular than

.com”

61

Implementing the logoNavigation

With the new name, logo and domain name, I

decided to redesign the navigation menu to give

more information about each link and also to make

sure that the logo would sit in place correctly. The

steps on this spread show the diluted process

to recreating the main navigation menu. Each

screenshot is beneficial to showing the progression

that I have made as well as comparing between

different versions when developing.

63

THE GRIDThe final piece.Analysis

In terms of the interactivity and the main design of the grid, I feel I have achieved the

aesthetic that I was after. With all my troubles with jQuery Masonry behind me, I have

been able to establish a fully working interactive environment. This screenshot displays

the finished outcome for the main activity within GridShare for my final major project

submission. As outlined before, I plan to continue this site long after I have submitted this

portfolio, which will most likely include an evolving design of the site as new features

are developed and added over time.

HTTP://GRIDSHARE.CO/ACTIVITY

outcomes

http://gridshare.co/activity

64

SIGNING INThe landing page.Analysis

From the beginning, I wanted there to be a main landing page that would simply detail

what the site was and have a simple signing in box for existing users. To achieve this, I

decided to place an image on the screen showing a screenshot of the main activity grid,

to give a glimpse of what the site looked like and entice users to want to know more and

register. This then developed into an image of a whole display, but after some feedback

it was decided that I should rethink whether I was abusing the use of a great looking

display to introduce users to my product. I readjusted the image to put the focus back

onto the screenshot of the website and also added a small caption to summarise the site.

development

67

EXTRA FEATURESShowcasing other elements of the site.Avatars

The next series of spreads show particular pages and elements of the site that have been

created in addition to the main activity grid. The aim is to create a complete package

and experience when using GridShare. This page (left) shows how a user would edit an

avatar that they have uploaded for their profile page. WordPress by default uses Gravatars

(a globally recognised avatar connected all over the web by an email address) for each

user’s avatar; meaning that if they don’t have a gravatar account, then they would be

without an avatar for their posts. I wanted to give users the option to choose whether

they wanted to upload an image directly or use their Gravatar account if they have one.

outcomes

69

NEW USER INTRODUCTIONSPages to help out those new to the site.Basics

I created a page with step-by-step instructions to help out new users getting started with

using the site. The page details everything from the moment they sign in to visiting their

profile, editing their details, posting media, following users and where to go if they get

stuck with anything.

Included within the page is a whole series of screenshots to direct the user around the

page and to give visual instructions as well as written information.

HTTP://GRIDSHARE.CO/OLD-BASICS

pages

http://gridshare.co/old-basics

71

FAQSFrequently Asked Questions.Analysis

Alongside the basics page, I also created an FAQ page to help people out with particular

issues that may already have been solved previously, or common misconceptions.

Throughout both the basics page and FAQs page, I have included links for users to give

feedback; either through Twitter, email or commenting directly on the page itself.

By having these pages, I hope to ease users into the idea of sharing great online media

with other people, as well as support them when things don’t appear as they maybe

first thought.

HTTP://GRIDSHARE.CO/FAQ

pages

http://gridshare.co/faq

73

UPDATING USERSThe GridShare Blog.Analysis

From my research at the very start of this project, I noticed that all of the major social

networks had up-to-date, well-established blogs documenting things such as new features

and updates, helpful tips and hints and popular posts from a particular time frame.

As a way of documenting development throughout the site I also set up a blog. For the

time being it serves mainly for my own personal purposes of noting milestones within

the development of the site. However, over time I would like to continue writing the blog

towards the interest of users. If the site were to gain more popularity over time, I would

like to have a feature within the blog to post popular content from current users on a

weekly basis.

HTTP://GRIDSHARE.CO/BLOG

pages

http://gridshare.co/blog

75

PROMOTIONAL VIDEOInstructional video to explain GridShare.Story-boarding

As the deadline for this project drew near, I was sceptical about being able to create a

promotional video that would showcase all of the features of my site. I wanted it to be

something that could be viewed once a user had registered for an account as a way of

explaining how to use it. Due to my continued issues with getting the grid to display

properly, I became short of time to be able to make something of a satisfactory level that

would compare to my site. I still story-boarded the idea and listed all of the steps that

I wanted to show in the site as well as filming certain aspects with Quicktime screen

recording.

I decided to postpone the idea of creating a video until after the hand-in deadline, as

I needed to allocate enough time for this portfolio and finishing other areas of the site.

setback

77

NEW SKILLSImplementing PHP and jQuery.Basic Features Tour

Having past the alpha stages of user testing, I felt as though the page displaying the basics

of how to use the site, was a little bit long-winded and not very interactive. The user had

to scroll through a long list of screenshots on the page mixed in with some text. Instead

of using this approach to help users begin to use the site I wanted to create something

that flowed and had a consistency to the design. I also felt that this would be a great

compromise to the fact that I became short of time to make a fully fledged video. Using

jQuery I created an ‘image sliding tour’ that would show ‘pages’ of information rather

than a whole scrolling document.

It was my first time using jQuery from scratch (rather than adjusting an existing plugin)

within a project and I felt as though I was able to teach myself a logical method of

progression within my work.

Once I had the tour working, I set about remaking the whole piece but using less code

and more automation as a way to make editing easier at a later date. Using PHP Arrays,

I was able to create a process that would automatically generate each of the ‘pages‘ of

the tour rather than manually writing each piece in a repetitive fashion. The screenshot

on the top left shows the previous method with a section of code highlighted that would

be repeated for each of the 25 tour pages. The screenshot below shows the PHP code in

the gold colouring that would automate the same code 25 times. The screenshot in the

top right is a snippet of the jQuery and below is the end outcome of the tour.

HTTP://GRIDSHARE.CO/BASICS

pages

http://gridshare.co/basics

79

REGISTRATIONNew user sign up process.User Experience

The images across this spread showcase the process for the registration of a new user. As

mentioned previously, the site is currently open to invited users only. Once a user enters

a correct invite code, they are able to follow the simple steps to registration. From my

previous research I wanted to keep the steps as short as possible and only require the

bare minimum of details from each user. I also wanted the users to be taken straight into

the site without any requirements to confirm their registration through a link in an email

as a way of streamlining the process and encouraging people to use the site.

process

81

CAMPAIGNSDesigner emails to users.MailChimp

To consistently apply branding throughout the whole user experience, I created an account

with MailChimp to create user subscription lists and distribute HTML emails rather than

standard text based notifications. MailChimp handles all of the list management so that

users can subscribe and unsubscribe at their own will, as well as being a manager for

email campaigns. It is also powerful enough to generate user statistics such as how many

people open the emails and how many times, which links they click and which campaigns

have been successful in relation to industry standards.

The first message I sent out to all users from MailChimp was a notification of the new

name and location at gridshare.co.

admin

82

BETA TESTERSBetter looking invitations.MailChimp

Rather than using the plugin WP-Invites to send out my invitations to users, I decided to

use MailChimp to make the invite look more appealing and easier to read. I felt that by

including an image, logo and properly laid out typography I would create a much more

professional looking invitation that would hopefully encourage more people to test out

using the site.

I sent out beta invitations to 40 people, however only 2 people have signed up to start

using the site. I was quite disappointed with the results of this, especially considering I

tried to choose people with a similar interest area and also people who would have a large

amount of connections to each other, which would help stimulate more activity within the

site. Again, these statistics are beyond my control and I will just have to continue trying

other methods of generating new users.

admin

85

STATISTICSComparisons to industry results.MailChimp

When comparing my statistics of the couple of email ‘campaigns’ that I have sent, to the

average results from within the social network industry, it strikes me as a very hard area

to crack. With an industry open rate of only 18.1% of all emails sent and an even lower

click rate of 3.8%; I am preparing myself to not set my expectations too high from each

of my campaigns. However, GridShare will definitely prove to be a great starting block to

understanding the business side of communication for future projects.

The screenshot to the left and above shows an example of how my statistics weigh up

against the industry average. Of course I have a much smaller subscriber list than the

average social network, so the numbers will be skewed slightly.

admin

87

USER ENCOURAGEMENTGetting users to return to the site.MailChimp

Before I had introduced the straight-through registration process that didn’t require

the email authentication; a few users had registered for an account but never actually

activated it. These users had legitimately received invitation codes so I wondered why

they hadn’t progressed any further with the sign up process. As a way of trying to

encourage the users to finish the registration and log in for the first time, I created an

email campaign called “The lights are on, but nobody’s home!”. With some informal copy

and a simple vector design that I created, I tried to come across in a friendly but non-

intrusive manner. The results were very successful, managing to get all of the users to

sign in and finish creating their accounts.

I plan to create some other similar campaigns built on an automated system of user

interaction to send out during the continued stages of building up a user base.

admin

89

GAINING FEEDBACKThe main purpose of user testing.Making Progress

The whole purpose for user testing was to be able to gain some direct feedback from users

of the site as a way of improving features and understanding the way in which people

interact with particular elements. As an independent developer there is no way that I

can suggest what is the right or wrong way for something to work, as certain people will

interpret features to have more or less functionality, or need more or less description as to

how they work. It is also almost impossible for me to test out every working combination

of links and profile settings, so having many users increases my chances of finding

something that may be broken. Throughout the site I have placed links to give feedback

either through Twitter, email or commenting directly on the page.

I’d like to mention specific thanks to Tom Lynch, Andrew McDermott and Henry Lambourne

who have personally gone out of their way to give detailed written feedback including

screenshots, suggestions and test results from certain features not working correctly in

person and through email.

feedback

90

self analysis

THE LEARNING OUTCOMESWhat have I learnt?Self Analysis

Over the course of this project, I have learnt a great amount of skills within

web development, pushing my confidence to newer heights. At the very start,

I had only a small amount of knowledge within PHP and jQuery. The core

WordPress installation itself is built almost fully with PHP, which meant that I

had to read through a lot of it to understand how pages were being built. By

consistently having to try and understand the way PHP was being utilised, I

built up a knowledge of why it was used and further how it was used.

jQuery is a scripting language that I had barely any experience

with before starting this project, however through perseverance

with jQuery Masonry and other small scripting challenges, I

have been able to improve on my skills.

My knowledge of WordPress and more importantly BuddyPress,

has grown considerably as well. Rather than making a site

and including WordPress for a blog, I have been more efficient

with including WordPress throughout the whole of the site. I

definitely feel very confident developing fully with WordPress.

I also feel as though I have learnt a great amount about handling multiple

users on a single site and configuring email campaigns within social media.

I will confidently be able to apply these skills to later projects with success.

“through

perseverance

with jQuery

Masonry and other

small scripting

challenges, I

have been able

to improve on my

skills”

91

HTML5

PHP

jQue

ry

Wor

dPre

ss

Budd

yPre

ssCSS3

Nothing

Basic

OK

Good

Excellent

93

TAKE A LOOK FOR YOURSELFA personal invitation to GridShare.GridShare

In order to fully understand the mechanics of the site and the user interactivity, I would

like to invite you to start using GridShare and experience it for yourself. You may register

for an account with the link below.

HTTP://GRIDSHARE.CO/REGISTER

You will need to use the following invitation code at the registration screen.

PORTFOLIO-FMP-05-12

registration

http://gridshare.co/register

95

HINDSIGHTEvaluating the whole project.Final Major Project, BA (hons) Graphic Design

Looking far back into last semester, there was a time when I had absolutely no clue about

what direction I would be taking for my final major project. I knew that I wanted to work

with something related to the web, but I was unsure about what my content would be

and how it would be relevant.

I came into the idea of a grid based media sharing site from my own personal needs for

a site that would collect all of my Flickr, Vimeo and YouTube inspirations and favourites

into one location. I had longed for a place where I could see all of my latest activity in

one location and to have the ability to share that location with other people. Viewing

online media takes up a large portion of my browsing time as I am always looking for

inspiration and creative outcomes. By taking this personal passion and creating a site

that would allow other people with the same needs as myself to create their own grid, I

would be adding relevance to a final major project.

Overall, I am extremely pleased with the outcomes that I have produced over the space

of about 4 months. I have been able to work independently almost every single day for

full-time hours on a project that I fell in love with. The only aspect that has really gotten

in the way of me, was the addition of a deadline to a project that felt so independent

from anything that I had ever worked on before. I will definitely be continuing to work

on GridShare, developing new features and I will also continue to be an active user; as I

feel that it works well for me as an individual visual bookmark location as well as a place

to share great online content with other users.

evaluation

I spent a large amount of time trying to get an automated process working. However, I no

longer feel disappointed about not getting it working as I had originally intended. Mainly

because I now believe that the manual process of sharing content is what brings people

to view the site in the first place and also because it allowed me to continue developing

other areas of the site, to depths I hadn’t previously thought I would reach. I will still try

and develop an automated system, however it will be displayed as a secondary way to

post content.

With regards to my time management, I feel as though I made a successful time plan at

the very beginning, only falling behind a few days at most due to technical difficulties.

I knew that the size of the project would be larger than any website I had ever worked

on before, but I also made sure to make the project scalable if things were to get too big.

I’m glad that I allowed for as much time as possible to gain user feedback through the

alpha and beta stages of development. By having users active on the site; it encouraged

me to continue to have a working site and to maintain certain aspects if they should fail.

Development

I have once again surprised myself on my own personal achievements with learning

new skills and maintaining patience with things that I either do not know or do not

understand. From last semester, I had planned to make progress with learning PHP and

jQuery. Both of which I have been able to do so within multiple areas of this project. I

would like to continue to learn new skills and programming languages alongside these,

to the degree of having excellent knowledge independently.

To conclude, I have thoroughly enjoyed working on GridShare to the point of it becoming

something that I am truly passionate about and I look forward to continuing to work on it.

96

LINKSAcknowledging my sources.Bibliography

BuddyPress

buddypress.org

Dribbble

dribbble.com

Facebook

facebook.com

Flickr

flickr.com, flickr.com/services/developer/

GDNM

gdnm.org

GoDaddy

godaddy.com

Google Analytics

google.com/analytics

Google Apps

google.com/a

Gravatar

gravatar.com

bibliography

The Guardian

guardian.co.uk/media/social-media

Isotope

isotope.metafizzy.co/

jQuery

jquery.com

jQuery Masonry

masonry.desandro.com/

MailChimp

mailchimp.com

Mashable

mashable.com/social-media/

Oembed

oembed.com

PHP

php.net

Smashing Magazine

smashingmagazine.com/

Subtle Patterns

subtlepatterns.com

TED

ted.com

Clay Shirky: How Social Media Can Make History, James

Surowiecki: When Social Media Became News,

Alexis Ohanian: How to Make a Splash in Social Media,

Nicholas Christakis: The Hidden Influence of Social Networks

Twitter

twitter.com

Vimeo

vimeo.com, vimeo.com/api/docs/oembed

YouTube

youtube.com, youtube.com/dev

WordPress

wordpress.org

97

THANKSPeople who’ve helped me out.Web Development

Dale Anthony

Luke Watts

Olly Smith

Tom Lynch

User Testing and Feedback

Andrew McDermott

Anita Sheth

Chris Newland

Dale Anthony

Elly Tanaka

Henry Lambourne

James Uden

Jez Olpin

Joe Parsons

Luke Hopkins

Martin Bellamy

Rob Jones

Tom Lynch

thanks