Final Thoughts

Home Page                                                                        About/News Pages

                         Line-up/Schedule/Tickets Pages            
                                              Gallery/Login/Contact/Register/Shop Pages

                                                                Site:  http://itecdigital.org.uk/ba/ba00017/

I am fairly happy with my finished Wordpress site (though I have had my issues with various technical aspects) I think I have done pretty well considering - the web and Wordpress are not my forte. I did end up buying a theme in the end because I got frustrated with the free themes limitations but I have designed every one of my pages using the Themify builder (which despite its faults did help massively with the build). I think I managed my time well - I had a fair amount of breathing room near the end of the project and had enough time to sort out my user testing and SEO implementation. Overall I feel  that I have made a well designed event site that is appropriate for my target audience and I believe that I have fulfilled the brief. I do have a better understanding of Wordpress and the various plugins that can be used (all of the plugins I used were free) but I am very much happy that it is finished.

Time Management

Because time management was a factor addressed in our brief I have decided to display how I planned out the project- when I initially made this plan I thought that the deadline was going to be a little tight - because there was so much to do, at least on the brief- but I have since found that tasks that I thought would take a long time were easy to accomplish and I ended up having a fair amount of breathing room (about two weeks which I spent making tweaks and user testing).


Planning

Brief Set- 24th September 2014

To do before planning deadline

Tutorial from Brighton Wordpress Company
Research Brighton Wordpress Company Websites
Research various events
Pick an event
Research Wordpress Websites
My Chosen Event Lineup
Line-up Websites
SEO basic research
Target audience research
Considering user testing/user experience
Recommended plugin research
Theme research
Name for event ideas
Logo design research
Other event sites
Other Wordpress made event sites
Information architecture
Basic Wireframes
Further Theme Research
Detailed/clarified wireframes
Final logo design
Final theme choice- experimentation
Final colour scheme

Deadline for planning Thursday the 16th of October 2014

To do for crit

Content Gather
Font Choices
Image resizes
Wordpress initial explore build
Buying a Wordpress theme (if I end up buying one) comparison to free options
Seo and Target audience considerations
Layout builder
Experiments
Adjusted wireframes
Plugin research
Plugin choices/comparasions
Screen shots of website progress
Home Page- break down
About Page-break down
News Page- break down
Line-up Page- break down
Schedule Page- break down
Tickets Page- break down
Gallery Page - break down
Shop Page - break down
Contact/get involved Page - break down
Map plugin
Login plugin
Enabling Pay Pal
Booking System plugin
Register Plugin
Search Bar
Live Social Media Feed
Social Media links
Footer
Analytics system
User Testing
Seo Implementation

Deadline for Crit Thursday the 20th November 2014

Suggested Tweaks

Final Hand in Thursday the 27th November 2014

One Last Tile Gallery Attempt...

I really wanted to change my gallery styling- so I had another crack at trying to get the tile to work - I tried adding a gallery straight into the page, it worked in the sense that it created the desired tiled effect but it veered to one side of the screen rather than filling the area and would not be centred or changed style wise. 

I tried using the tiled gallery that works without jetpack plugin and putting it into my page as a feature - this didn't work either- the images refused to load and the page looked like this:

 I tried playing around with the Jetpack one- there was no reason why it wouldn't work- but it physically wouldn't let me introduce any images.

I have definitely had a very thorough explore so I'm going to give up on trying to introduce a tiled gallery - I am out of options!

After Crit Changes

Here are some post crit changes that I have decided to make based off my feedback.

Test it on a PC

I had some of the guys that bring PC's too class open up my site and it all seemed to work fine thankfully!

Trying to integrate a tiled gallery

One of the changes was to create  a tiled gallery - I tried using the one provided in my Jetpack plugin- I activated the tile plugin and then set all of my heights and size.

 I then tried to upload to the page using the widget feature- but it wouldn't let me click on the choose images option- I made sure that I configured everything I could - but it wouldn't let me choose my images no matter what I did.

I looked into the only other tiled gallery plugin that had a decent amount of downloads and was compatible with my version of Wordpress and my theme (tiled gallery without Wordpress) but I had the same issue - the only way to rectify it would be to place my imaged straight into the page directly - but they popped up in a regular grid like the one I already have and couldn't be edited on the page. For this reason I intend to leave the gallery as is- after a quick google I think the issue is to do with my Themify theme that I am using and the builder it provides.

Changing my Social Media Stream

So I had an experiment and a google - you can't make the feed horizontal - because of this I didn't want to put it on my homepage- since I think my homepage works aesthetically, however I knew that I had to change what I had for my social page- I contemplated placing it within the blog page (but thats a link to my blog) so instead I have decided to place it at the bottom of my news page - I have limited it to only 3 posts so its not a massively long part and I have given it its own heading to really signpost what it is. Since many festivals use social media to display news it felt pretty logical to include it on this page.  

Setting a product amount limit (a user testing change)

I had a quick flick round my settings and its not immediately obvious in how to change it - so I opted instead to have a look at the documentation - I found that setting the product amount was something that I could only do if I had the Woo Commerce quantity extension plugin - in order to get this plugin I would have to pay $29.00 - If I were creating a legitimate event then obviously I would invest in this but because my event isn't real and this isn't a real site I'm going to have to leave it. 

Playing about with the header image

I tried setting a specific position and size for my logo - but it didn't work responsively and ended up cutting off half my logo.

I tried setting my main image as a header image rather than a logo - but on the other pages it cut it in half (there is no option to upload separate header images on different pages its all linked). So for this reason I plan on keeping what I had before - the only way to rectify it would require a complete re work of all my pages- something that I could have done had I been alerted to it 3 weeks ago (however since it was suggested by the Wordpress developer the solution was only offered when he came in so it wasn't possible).

Search Bar

The search bar still has its issues that I have discussed pretty comprehensively before hand - although its not ideal my user testers didn't have to much issue with its position so for that reason its going to remain on the footer- at the very least its on every page. 

The Crit

After presenting my site for crit I received the following feedback:

Maybe think about the shade of blue used throughout and darken it - (this wasn't an issue throughout my user testing and I think is more to do with personal preference so I don't plan on changing it- not least because it's part of my site branding and none of my user testers felt it was hard to read)- justified

Fix the gaps between the segments - I explained that it was to do with the Themify builder and that George had already attempted to rectify this through the code and it wouldn't take on any of the code he inputted- justified

Alter my gallery tile layout - try to find a widget that will allow a tile layout in my gallery photographs - I fully intend to try and find the right widget to accomplish this.

Think about moving my live social feed- I have given it its own page because I don't use any sidebars throughout - it was suggested that I could include it on my homepage (provided I can make it appear horizontally on the page)- again I fully agree with this point so I intend to try and rectify this.

Move the search bar- I explained that when I tried to move it it generated massive gaps- or hid beneath my navigation - George also tried to rectify this but much like with the segment gaps nothing in the code would take- I also explained that whilst my user testers did look for it in that corner and it was by no means ideal they did find and use the search.

Change the header image- my logo image is evident on each of the pages so you have to scroll down it in order to find the relevant information - it was suggested that I place the navigation at the top of the page and then place the logo image on the page and then introduce a smaller logo on the other pages- however I think that this is a bit too radical, it would involve me having to change every page- and move my navigation (something that I planned to place at the bottom of my page and the whole reason I chose the parallax theme). I intend to have a play to see if I can make the header logo smaller on the other pages- but the fix suggested isn't something I think is reasonable to accomplish in the remaining time given. Again it wasn't an issue in my user testing - and from a practical perspective it does mean that my festivals name, date and location are a constant.

Overall I am fairly happy with my feedback - the Wordpress developer liked my illustrations and the overall styling of the site- he also seemed to like the information provided and had no issues with the layout. It would have been good to receive some feedback from my classmates and have a little more time to go through some more of my site aspects but due to the time constraints of the crit this wasnt possible.

User Testing Screen Record

I ended up screen recording my last user tester- this was useful because it gave me an idea of how much time it took them to click on parts and how they interacted and navigated through the site. Personally I think user 3 navigated through the site relatively smoothly and interacted well with my site.

User Tester 3- Screen Record

Overall thoughts on user testing

I got some good results for my testing and I am happy that my site was well met. Got some nice feedback and some minor issues that I need to remedy.

Things I need to change

Put a limit on the amount of tickets that people can buy- I think this is an easy plugin setting that I have to set

Consider Search Bar change- I plan on asking for ideas about this in crit

User Testing Results

I tested my site on three different users- I didn't tell them I designed the site and I was very careful to allow them breathing room during the testing period. I user tested on a neighbour ( 19 year old male- who am not familiar with), my stepdads boss (a 36 year old man-again I am not familiar with this person) and a friend of my mums (A 28 year old female -I am on more familiar terms with this person but I was careful and made sure that she was under the impression that it was a random site that I had to test for uni ). I have collated my answers to my questions below and have tried to find user testers in my target audience range which is fairly large.

What are your first impressions of the Jess Can’t Get Enough Site? What grabs your attention?

Tester 1: The first thing that grabbed by attention was the use of bright colours in contrast to the black background. On the home page its the big image.

Tester 2: Professional looking, neat and structured, has an illustrative feel.

Tester 3: Nice visual language on the images used and its easy to navigate.

What would you say the sites purpose is?

Tester 1: A festival site.

Tester 2: A festival event day.

Tester 3: It is a festival website- where you can buy tickets, know more about the festival - images and line-up. Buy merchandise.

Imagine you want to volunteer- try contacting the festival- how easy is this and are you happy with the information provided on the subject? Do you have any issues filling out the form?

Tester 1: Possibly clarify the “subject box” on the contact form, other than that no issues.

Tester 2: 100% easy to read information, filled it out no problem

Tester 3: Very happy, no issues, straightforward

Find and try to buy a ticket - don’t actually buy it - but go through those motions- if this wasn’t a test would you buy one? How happy are you with the checkout process?

Tester 1: Easy enough, but no limit on tickets you can buy - I am up to a million!

Tester 2:Very happy, really quick, yes would buy a ticket - more comfortable using paypal

Tester 3: Standard shop process and actions

Remain on the page that you are on- using the search bar search for Depeche Mode- does the correct information appear? Does the Search bars position hinder or help?

Tester 1: It works- bit slow-  provides expected information and extra- when you click on the items displayed it remains on page.

Tester 2: Search bar is not where its expected- it should be at the top however it does work well on the bottom because it fills up bottom of the frame and is consistently in the same position on every page. 

Tester 3: Took me longer to find the search bar because it wasn't in the top of the frame - but at least its on every page I click on and its in the same place- should be fine- I wouldn't have actively searched for anything because of the clear navigation at the top.

If you navigate to the home page are you happy that you could then buy tickets through that page- does the link work how you would expect?

Tester 1: Easy to see.

Tester 2: Yes- nice and clear.

Tester 3: Yes- good position at the bottom makes sense, the link works- takes directly to buying a ticket In the shop- where its expected. Double gap on phrase - small typo error.

Try navigating to the news page on the mobile platform- is this easy - is everything how you would 

expect it to be on the mobile version. Do you like the layout?

Tester 1: You have to click on the menu before it appears on iPhone, slightly slower to load- navigated to line-up page - didn’t not notice the slight variation in overall layout on mobile version.

Tester 2: Slower to load but looks good- I like it.

Tester 3: Navigated with ease, styling consistent. Everything branded and fits well.



Are you happy with the fonts legibility? It is easy to read? Do the colours stand out?

Tester 1: 3 fonts work well - didn't really notice the subheading font-

Tester 2: Yes- bubbly font- fun - easy to read! Nice colours

Tester 3: Change in font on image allows for artists personality. Actual site font- easy enough to read- like the colours they match the brand.

Are there any of the tasks above that have taken you longer than you thought they would - was anything difficult to accomplish?

Tester 1: Small issue on mobile platform but it only took a bit longer to load- minor gaps between stuff- nothing huge- helps to separate sections - but still gaps. Every thing else I liked nice style and very simple.

Tester 2: Everything was fairly fast.  No difficulties- navigation simple, not overwhelming , style wise- perfect amount of information- everything you would expect- breathing room to read.

Tester 3: No issues, questions answered.

User Testing

Because our crit has been pushed back and I have managed my time well - I plan on doing some user testing before crit- this will help me figure out any final touches that I can make, and help ensure that I have made good design decisions.

Ive already looked into user testing (in some of my prebuild research) but I opted to explore the types of questions I should be asking and what I should be aware of when I user test. I found the article below that hand some handy tips:

Source: http://www.usertesting.com/blog/2011/10/24/tips-for-top-test-results/

I also found this site below that offered similar tips (I wanted to cross reference to ensure that I had a reliable idea of what questions to ask)

Source: http://www.nngroup.com/articles/flexible-usability-testing/

I plan on asking my testers these questions - rather than just leaving them with the sheet- but I plan on trying my best to not lead them and I will adapt my questions if I think that there are any issues. I will also not inform any of my testers that I created the site - to ensure honest and well rounded findings.

Questions I will ask my user testers

What are your first impressions of the Jess Can’t Get Enough Site? What grabs your attention?

This will give me an idea of how my branding and design is being received- it will also tell me what they are likely to click on (on the home page).

What would you say the sites purpose is?

Will tell me if they understand my sites function- I have read that they should understand its purpose in the first 5 seconds.

Imagine you want to volunteer- try contacting the festival- how easy is this and are you happy with the information provided on the subject? Do you have any issues filling out the form?

Setting a task will help me to determine how well they navigate through the site to complete the action as well as inform me on how they find interacting with the site.

Find and try to buy a ticket - don’t actually buy it - but go through those motions- if this wasn’t a test would you buy one? How happy are you with the checkout process?

This will help me to determine how they find completing a transaction through my site (which is vital for my shop and tickets)

Remain on the page that you are on- using the search bar search for Depeche Mode- does the correct information appear? Does the Search bars position hinder or help?

One of my own personal issues with my site is the search bar- I have tried to rectify it in every way that I know so I don't think I can change it, unless someone in crit comes up with a good idea. Having said this, hopefully this question will determine how big an issue this is and provide me with some insight.

If you navigate to the home page are you happy that you could then buy tickets through that page- does the link work how you would expect?

I want to make sure that the calls to action on my home page are doing their job.

Try navigating to the news page on the mobile platform- is this easy - is everything how you would expect it to be on the mobile version.

I want to check that my site works on its mobile platform - although I don't have a massive control over its responsiveness I want to ensure that everything works how it should.

Are you happy with the fonts legibility? Is it easy to read? Do the colours stand out?

Legibility is obviously very important to any website - so I want to try and see if any of my colours or fonts are causing problems.

Are there any of the tasks above that have taken you longer than you thought they would - was anything difficult to accomplish?

This last question should alert me to any issues that a user may or may not have with my site- its also a nice question to round off on. 

Making Sure I have Covered the Brief

Before thinking about user testing I want to check that I have fulfilled everything in the brief.

On My Site

I have a home page

An About page- with detailed information

A booking system calendar- I was also told by Sue that my booking system calendar would also count as my calendar with categories- I had a bit of an experiment with various calendars and none of them would allow me to introduce categories so I'm thankful that my booking system fulfils both.

A news area

Detailed Information about each event- (I have been pretty thorough through my sites build so I am hoping that everything that can be there is)

Contact Info- I have my contact form 7, a contact section along with a get involved section

A map- I have a fully intractable google map on my about page

An events calendar with categories- my booking system calendar counts as this

A shop selling merchandise using Paypal- both my booking system and my shop use paypal so that has been covered

A search bar- although I'm not completely happy with its position

A gallery page

A login and register option

A blog

Links to social media- including a live Facebook feed on my social page

An analytics system (my Jetpack plugin gives me my analytics system- and various page stats)

Overall I am happy that I have included all the aspects stipulated in the brief and can now think about user testing.

Implementing SEO

Implementing my site's Seo was harder than expected - because I have used a lot of layout parts (a widget within my Themify builder that allowed me to design various segments before placing those segments live on my site) and have built much of my layout through Wordpress's front end none of my content was deemed to actually be on my page (it is but its not on the backend). However after a bit of jiggling eventually I got all of my keyword sections green.

This is the SEO on my individual Layout builder page- the page url doesn't match because its a layout part and the content is all within widgets so apparently it won't count (these pages in the end turned yellow which mean my SEO overall was classed as ok).

 

I managed to get my line-up page entirely green (I think because I have incorporated links to my artists page on the images, and my content has been placed actually on the page which means it has been counted by my SEO plugin).

Overall my line-up page is completely SEO optimised (its all green which means I have included the correct keywords, links and descriptions) the rest of my pages excluding the gallery page are yellow which means that my SEO is ok (I would have made them all green but because of how my builder works it doesn't count certain aspects of content that should be included). My gallery page is the only page that is amber SEO poor- but thats because my gallery is picture orientated rather than keyword/text based.

The Blog Page

I realised that I needed to include a blog page on my site - and after checking that it was ok and would still fulfil the brief with Sue I ended up linking my blog page to my actual blog page- A lot of the festivals I looked at didn't even have a blog page so I didn't really have any point of reference but I'll further clarify when we crit.

Homepage Revisions

The article that Sue gave us to look at about what to put on your homepage was really helpful- I thought that my homepage was a little sparse as it was so I opted to add in some of the suggestions featured in the article.

The Home Page Before

 I had a giant gap on my homepage when it went viewed on the mobile platform (I asked George about this and after much fuss - I had assumed that you could just set the min height for the slider to auto so it became responsive but this wasn't the case- it was decided that my theme was overriding the code that George was putting in- it doesn't happen on any of my other sliders but I think thats due to the size of my images on this one) In order to stop this from happening I would have to remove the slider. I did think that I could maybe find a plugin slider but because I am rethinking my homepage layout I think I have a new plan.

Responsive

Homepage After

The article suggests that home pages should employ a clear heading (something I had before) and a subheading (which I have incorporated through the use of my slogan and the short explanatory text below)

Because my slider didn't work responsively (and I have since discovered that it doesn't work when the images featured are larger than 500px) I have instead opted to place my main featured and arguably biggest band as one large image and then the others in a small gallery underneath. The large image links to the my line-up page (I would have liked to do the same for my smaller images but it didn't give me the option)

After which I have placed another small column of text which would promote the show (in order to sort of fulfil the content offer and benefit sections the article alludes to) and next to it I have placed a small image slider- I have put one of my T-Shirts on this with a link to the corresponding merchandise in my shop, one of my support artists photographs and a link to the line-up page and a picture of a tent- which links to my booking system page- I am very conscious that including all these links should hopefully generate better seo and make it easier for my users to interact and navigate around my site.

I have finished my site off by placing a Buy Festival Tickets banner at the bottom which links to where you can buy the tickets within my shop.

Below:

Some of my links and the respective images

Responsive

I'm happy to see that my new layout works much better when its on the mobile platform - no large gaps and everything fits well in my one column layout.

The Hompage- Do I need to add some features...

As a class it was suggested that we look at this blog post and possibly include some of its features within our own home pages. After a quick read through I think that the Benefits, Call To Action  and Success Indicator sections can be discarded (I don't feel like the explicitly apply to an events page) and that the Customer Proof section is probably something I would designate to my shop review page. Having said that I think I should include some of these sections on my homepage (It was the first page that I ended up building so I definitely think I can add more to it).

Source: http://blog.hubspot.com/blog/tabid/6307/bid/31097/12-Critical-Elements-Every-Homepage-Must-Have-Infographic.aspx

Elements I have on this list:

Headline

Features

Supporting image

Navigation

Elements I would like to add:

Subheadline

Resources - in the form of a buy now button with a direct link to buy tickets

Content offer- possibly by placing one of my festival t-shirts on there - some kind of promotional offer, or some kind of additional news enticement.

Typography Revised

After a quick review of my site with Sue my body types overall readability was questioned- although I would argue that my site is aimed at a quirky target audience and it matches my overall branding- I agree that although it is readable it's probably not as readable as it could be so I have had a rethink about my body text font choice.

I need my body text to match my heading font as seen below:

My Set Heading Font

I also needs to match stylistically to my sites brand but be more legible.

My Current Body Text

My New Body Text

I found the Shadows Into Light 2 font that I think works well enough (it was one of my contenders before). It's got a hand-drawn element to it but its much clearer to read particularly when I use large segments of text.

I think I am still going to employ the Covered By Your Grace font - for subheadings and maybe captions because I think that they all work well as a unit - but my main body text is going to change to the Shadows Into Light 2 typeface.

Before- Covered By Your Grace font on the site

Shadows Into Light Type On the Site

Social Media Icons, Search Bar and Footer

Search Bar

 I have had real issues with my search bar, at first I tried moving my search bar to my top navigation, but because of the theme I have used it will not allow me to add widgets to my search bar. I was almost expecting this because initially the theme included a search bar that would remain on top of my logo (because my logo is an image rather than text it looked stupid because the search bar concealed some of the logo), so I removed this. I then planned to place the search bar above my main heading but after my navigation on my home page but both times I tried it, the search bar placed itself under the navigation so it was only half visible, or so far down the page there was a large white gap of blank space that couldn't be altered or filled. I decided that I had two options- place the search bar on my footer or give the search bar it's own page (which seemed somewhat wasteful). I could of course include my search bar simply at the bottom of my homepage but I don't think that this is any different to placing it on my footer- at least if its on my footer- the search bar is on every page which means that its available to users at all times. I plan on asking my classmates at crit if they have any suggestions as to what to do with it- and I'll try and address this in my user testing to determine how big of an issue it is.

Social Links

The social links was a category that came within my theme so I didn't have to worry about using/finding a plugin I simply added the links and there titles to the various sections provided.

The Footer

Experiment 1

I didn't have a great deal of layout options on my footer- obviously my pages remain on the bottom row- but depending on how many widgets I included I could incorporate sections to my footer to divide it. Personally I think that the one column layout looks a bit too list like (especially If I opt to include any more).

Experiment 2

I prefer separating out my widgets so they have there own space, I think it will probably look better visually if I employ a three column layout but I can't think of another widget to include so I'm sticking to two until I can think of another one to include.

Analytics System

I wanted to employ an analytics system in order to see what people were clicking on and how they were navigating through the site (not least because this can help me determine my sites overall usability). It was also a requirement of the brief, I began by using the Yoast plugin- we were recommended the Yoast SEO plugin by Brighton Wordpress Company so it felt like it would be an obvious choice to use this. However after installing the plugin I found that the stats weren't available to me at the time (premium users already had this option but the free version that I was using did not include this and it looked like it wasn't going to be updated at any time soon).

Yoast Analytics Plugin

Plugin Source: https://wordpress.org/plugins/google-analytics-for-wordpress/

Because the Yoast plugin wouldn't allow me to view my stats and analytics I had a rethink and came across the Jetpack plugin- initially I was concerned that It would affect my theme, but after reading some reviews I found that it would actually provide me with some extra widgets and an analytics dashboard.

Jetpack Plugin

Plugin Source: https://wordpress.org/plugins/jetpack/ 

I had to authorise my account, but after which it provided me with various settings that would allow me to track clicks and page movements.

 Currently my stats page looks like this - but the more my site is looked at the more it will change- this bar displays how many people have clicked on a specific page on my site- which is useful to me because it will tell me what people are clicking on and I should be able to follow their navigation logic.