EGRD3015 - Independent Practice - Final Major Project

portfolio

INDEPENDENT PRACTICE Unit: EGRD 3015 Joe Allam Student Number: 0902741 BA (hons) Graphic Design, Final Major Project May 2012

1

2

introduction

CREATING AN ONLINE VISUAL NETWORK An 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.

“From the beginning, I felt confident that I would be able to complete this project, independently and autonomously.”

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.

3

self analysis

THE LEARNING INCOMES What 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.

4

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 myself further professionally� 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

Nothing Pr es

s

Basic Bu dd y

ry

jQ ue

PH

P

or dP re s

W

s

Excellent

Good

OK 5

HT

CS S

M L5

3

6

planning

WORKING TO A TIME PLAN Time 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.

“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.

7

research

RESEARCH Initial Preparation.

8

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.

9

research

WHAT IS SOCIAL MEDIA? An insight into social networks.

10

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 “At times, the with the audience. If a user base has enough momentum and greatest work enthusiasm, great things can be achieved. Of course, there is a comes from the huge amount of hard work involved to build up that user base and interaction with the audience.” to make something great enough to go viral.

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.

11

12

Vimeo

YouTube

Flickr

Twitter

Facebook

Requirements 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 Creation

research

Welcome Message Tour Recommendations

Cross Referencing Networks

Video Explanations Support/Help Features Friends/Followers

Spreadsheets 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.

Subscriptions/Follow Comments Favourite/Bookmark Like/Thumbs Up Dislike/Thumbs Down Playlists/Collections Groups

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.

Forum Profile Pages Personal Messages Explore Blog Location Services Content Photo Video

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.

Big Screen Limitations Content Uploads Interactions Externalisation Sharing Links Embedding Social Media Links Vimeo YouTube Flickr Twitter Facebook Website Email Address Online Experience Media Queries Mobile Site iOS App Android App Publicly Visible Content

X X X X X

13

14

research

Vimeo Sign Up Process Analysis 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.

15

16

research

YouTube Sign Up Process Analysis 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.

17

18

research

Flickr Sign Up Process Analysis 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.

19

20

research

Twitter Sign Up Process Analysis 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.

21

22

research

Facebook Sign Up Process Analysis Facebook has a two-part sign up process, starting with a basic step-bystep 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.

23

24

planning

CHOSEN FEATURES The 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.

“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”

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.

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.

25

development

SKETCHES Hand rendered ideas.

26

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.

27

28

29

development

SKETCHES Continued 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

DEVELOPMENT BEGINS Initial 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.

30

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.

“I based my sizing on the visible grid of either 4, 3, or 1 column of media to be displayed.”

1920+ pixels width (full HD displays. Typical 23” and above.

Example of 2560px width (iMac 27”).

31

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

Mobile devices.

visual network

STREAM ACTIVITY 9

FRIENDSF AVOURITES GROUPS FORUM PROFILE ACCOUNT

LOGIN

search

REGISTER

MENTIONS 2 FAVOURITES 6 REQUESTS 1

TWITTER FEED

EVERYONE YOU FRIENDS GROUPS RANDOM USER

43 minutes ago

6 comments

19 minutes ago

1 hour 26 minutes ago

12 comments

3 days ago

12 comments

No comments yet...

2 hours 12 minutes ago 3 comments

32

User posted MM Time ago

User posted MM Time ago

Title of Movie

User posted MM Time ago

User posted MM Time ago

Month DD, 2012

Title of Movie

Month DD, 2012

User posted MM Time ago

User posted MM Time ago Title of Movie

Month DD, 2012

User posted MM Time ago

Title of Photo

Month DD, 2012

User posted MM Time ago

Title of Movie

Month DD, 2012

User posted MM Time ago Title of Movie

Month DD, 2012

User posted MM Time ago

Title of Movie

Month DD, 2012

Title of Photo

Month DD, 2012

@username

development

DIGITAL DESIGN Layout 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.

33

Me

Me

View

View

Notifications

Notifications

Forum

Forum

Visual Network Visual Network

Help

Help

Search

Me

Me

Register

Search

View

View

Notifications

Notifications 0

Forum

Forum

Help

Help

Search

Search

Visual Network

Me

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Sign in

Sign in

Register

Sign in

Register

Sign in

Register

Sign in

View

Notifications 0

Forum

Help

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Sign In

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Sign In

Notifications 0

Forum

Help

Search

Register

Sign In

Notifications 0

Forum

Help

Search

Register

Sign In

Notifications 0

Forum

Help

Search

Register

Sign In

Notifications 0

Forum

Help

Search

Register

Sign In

Profile

Profile

Favourites Friends

Favourites

Settings

Friends

Log Out

Settings Log Out

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Sign in

Visual Network

Profile Favourites

View

Friends

Profile

Settings

Favourites

Log Out

Visual Network

Me

Friends Settings

Me

View

Notifications 0

Forum

Help

Search

Register

Sign in

Log Out

Profile Favourites

34

Friends

Visual Network

Settings Log Out

Me

View

Profile Favourites

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Friends

Sign in

You

Settings

Following

Log Out

Everyone

Visual Network

Me

View

Profile

Notifications 0

Favourites

Friends

Forum Settings

Help

Search

Register

Sign in

Visual Network

Me

View

Profile

Log Out

Favourites Friends Settings

Visual Network

Me

View

Profile

Notifications 0

Favourites

Friends

Forum Settings

Help

Search

Register

Log Out

Sign in

Log Out

Visual Network

Me

View

Profile Favourites Friends

Visual Network

Settings Me

View

Profile Favourites Friends Settings Log Out

Notifications 0

Forum

Help

Search

Register

Sign in

Log Out

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Sign In

Visual Network

Me

View

Profile

Profile

Favourites

Favourites

Friends

Notifications 0

Forum

Help

Search

Register

Sign In

Notifications 0

Forum

Help

Search

Register

Sign In

Notifications 0

Forum

Help

Search

Register

Sign In

Friends

Settings

Settings

Log Out

Log Out

Visual Network

Me

View

Profile

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Favourites

Sign In

Profile

Friends

Favourites

Settings

Friends

Log Out

Settings

Visual Network

Log Out

Me

View

Profile

Visual Network

Favourites Me

View

Notifications 0

Forum

Help

Search

Register

Sign In

Profile

Friends Settings

Favourites

Log Out

Friends Settings Log Out

Visual Network

Me

View

Notifications 0

Forum

Help

Search

Register

Sign In

Profile Favourites Friends

35

development

Settings Log Out

Visual Network

Me

View

Profile Favourites Friends Settings Log Out

Notifications 0

Forum

Help

Search

Register

Sign In

NAVIGATION Site 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.

36

development

37

FEEDBACK Online 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

38

production

OFFLINE SERVER Working 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.

39

40

development

BUDDYPRESS Creating 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.

41

42

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.

44

extensions

PLUGINS Enhancing 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.

45

JQUERY MASONRY Assembling the grid.

46

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.

47

problems

INTERACTIVITY SETBACKS Problems along the way.

48

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.

“I came to realise that these issues were really slowing me down with the production of my site”

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

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.

49

process

ALPHA TESTERS User testing phase one.

50

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.

“Most of the invitees were either creative individuals or extremely techsavvy in terms of web interaction”

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 techsavvy 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.

51

52

development

BEFORE AND AFTER Incremental 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.

53

54

55

branding

CREATING A BRAND Coming up with a name.

56

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.

57

58

branding

FINDING A NAME Digitally 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. “the ‘.co’ domain is an up and coming standard of domains that is projected to become more popular than .com”

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.

59

60

61

Implementing the logo Navigation 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.

62

outcomes

THE GRID The 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

63

64

development

SIGNING IN The 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.

65

66

outcomes

EXTRA FEATURES Showcasing 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.

67

68

pages

NEW USER INTRODUCTIONS Pages 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

69

70

pages

FAQS Frequently 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

71

72

pages

UPDATING USERS The 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

73

74

setback

PROMOTIONAL VIDEO Instructional 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.

75

76

pages

NEW SKILLS Implementing 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

77

78

79

process

REGISTRATION New 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.

80

admin

CAMPAIGNS Designer 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.

81

admin

BETA TESTERS Better looking invitations.

82

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.

83

84

85 admin

STATISTICS Comparisons 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.

86

admin

USER ENCOURAGEMENT Getting 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 nonintrusive 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.

87

88

feedback

GAINING FEEDBACK The 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.

89

self analysis

THE LEARNING OUTCOMES What have I learnt?

90

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. “through perseverance with jQuery Masonry and other small scripting challenges, I have been able to improve on my skills�

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.

ry

ue

jQ

PH

P

Basic

Nothing Bu d

Excellent

Good

91

OK

Pr es s

dy

CS S

L5

3

or dP re ss

M

W

HT

92

registration

TAKE A LOOK FOR YOURSELF A 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

93

94

evaluation

HINDSIGHT Evaluating 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.

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.

95

bibliography

LINKS Acknowledging my sources.

Bibliography BuddyPress buddypress.org Dribbble dribbble.com Facebook facebook.com 96

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

The Guardian guardian.co.uk/media/social-media

Subtle Patterns subtlepatterns.com

Isotope isotope.metafizzy.co/

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

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/

Twitter twitter.com Vimeo vimeo.com, vimeo.com/api/docs/oembed YouTube youtube.com, youtube.com/dev WordPress wordpress.org

thanks

THANKS People 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

97

98