project: event site

Event Homepage

Project brief

The overview page is the homepage of the event. Its purpose is to give the user an outline of what the event is about who is speaking and what they their presentations are about.

Requirements

Must be easy to update and must be adaptable to cover the life span of an event eg before the event , during the event and also after the event for users looking at previous events section.

Links

pick an event Calendar

Research

Before starting to design I researched what we currently had, and where we could improve it. The first place to start is looking at the original overview page, This is the first page the user sees when looking at an event so is incredibly important to make a good first impression.
You can view the original site here

Original site screen recording

Interviews

Internal Interviews

We have a custom made CMS that all our events sites are built on, This CMS would be rebuilt with the new event site.
I wanted to identify any problem areas that could be improved on, so set out some interviews with each department to see what they found easy and wanted to keep and what they found difficult, and if there is anything new that they wanted that currently isn’t available

Event organisers

There are too many entry fields, too many images to upload, too many text fields (which results in all the text being copied form one event to the next)
It takes too long to create an event from scratch and their are issues when cloning old events
Multi track Agendas are confusing and difficult to make
Colocated events are not possible to make

Sales Team

Buy Ticket button to be more prominent
Make the price page easier to understand
A way of promoting the Early bird prices

Sponsorship

To define what type of sponsorship package a company has bought
To make information on the website accurate as the current executive summary is wildly inaccurate and leads to sponsors being let down

Marketing

More lead capture opportunities

Speaking to attendees

I went to one of our London Events and interviewed some of the attendees. What I wanted to find out is why people come to our events. What is most important thing that users look for on our site before they buy a ticket.

What do you hope to gain by coming to our event

When speaking to delegates two main reasons kept popping up, Firstly people come to learn from there peers, these are usually the speakers from well established successful businesses and to gain insights into how they handle the day to day problems that they are facing. Secondly to network with people in the similar situations

On the website rate these in order of importance (1 being the most important)

Results

1st: Speakers
2nd: Agenda
3rd: Attendees
4th: Venue
5th: watching previous presentations
6th: Ticket Discount
7th: Sponsors

Internal requests

These are points raised during the internal interviews with each department

Simplify Event Creation
There are too many entry fields, too many images to upload, Too many text fields (which results in all the text being copied from one event to the next)

Make the buy ticket button more prominent
Sales constantly get site users asking them how to buy a ticket on the site as they cant find the button

add More lead capture opportunities
There is only one source of lead capture and that is download event brochure

A way of promoting early-bird discounts
There currently isn't a way of promoting the early bird tickets within the site.

Initial Problems

These are the things I first noticed when looking a the sight

Hashtag position

The hashtag is in position id expect to find the logo in, which an important position as Id expect to bring me back to the homepage

Primary CTA

The circular buttons don't look like buttons, Also the colour is dependant on what division the event is in there are eight divisions

Social Media Icons

The social share icons are sticky and often hides content, It also highlights the low amount of shares

CTA style

The CTA’s through out the overview page are just small icons that are easily missed

Speaker Cards

Listing the speakers as logo's and job titles seems a little impersonal, and doesn’t convey that they are people.

Too much Imagery

Every section has a background image, this causes problems with legibility of overlaying text, loading times & sourcing so many images

Exec Summary

The executive summary is not responsive, It is manually made and saved as a single PDF

Carousels

Carousels are proven to be not effective and the information past the first slide is rarely seen

Problem Solving

Now that Ive interviewed staff and users as well as identifying any obvious UI problems it was time to come up with some solutions.

UI needs to be consistent

The buy ticket CTA is labeled as register in the nav and request an invitation within the page, So this was changed to buy ticket in both instances. The UI elements needed a refresh to be more inline with current standards, standard CTA buttons replaced the icons style buttons and a set colour was set across all events (moving away from each division having its own colour palette)

Problem
The UI is inconsistent in shape colour and even text

Solution
Setting a style guide to be consistent through out the site, Change register CTA to Buy Ticket

Too many images

Image backgrounds on every section of the overview page caused a problems with legibility of any information on top of them and also initial loading time of site and someone had to source all these images as we had over 100 events per year and at least six images per event (not including the carousels) it all added up . The solution was to have one main header image the venue image would be pulled from google maps

Problem
Six background images for each event was too much, This was built when parallax images were a big thing and they really went for it :)

Solution
Pretty simple remove some images and split sections with background colours. The venue image is pulled from google maps

Speaker Cards

Speakers were listed as the most important thing that drove people to purchase a ticket to our events, The old site did list them above the fold but only by their company logo and job title, this seemed a little impersonal to the speakers and wasn’t immediately obvious they were speakers as we show sponsors by just a logo, so we end up with a site full of logos people become a bit impervious to. A speaker card with the photo was the solution to this. See speakers page for a more in depth break down

Problem
Speaker cards don’t represent speakers well as they are just the logo, which seems more like a sponsor

Solution
Add a speaker photo displayed as well as the logo, this helps attendees recognise the actual speaker at the event

Speaker Card Layout

The speaker section I would have liked to of shown twelve speakers but after speaking to the event organisers the number of speakers needed before making an event go live was nine. Understandably they didn't want to delay launching just so the formatting fitted neatly.
Nine isn't a number that splits very easily (without leaving an orphan speaker (single speaker on a line). Unlike twelve that can be split into rows of two, three, and four.
To overcome this issue I decided to put in eight speakers and a ninth that was only visible when there are 3 rows (The ninth speaker is always visible on the speakers page it is just the speaker preview section on the overview page that temporarily hides it).

Problem
Using eight speakers still leaves an uneven line when there are three speakers per row

Problem
Jumping from a row of four down to a row two is too big of a jump and makes the speaker card too wide.

Solution
Introducing a speaker that is only visible in certain screen sizes on the speaker preview section, (this speaker is always visible on the actual speakers page it is just the speaker preview section where they are potentially hidden)

Executive Summary

The original exec summary was manually built in pages then uploaded so was quite labour intensive so it would be uploaded once and never updated this led to it never really being accurate which led to sponsors being misled on attendee numbers. It was also not responsive which meant it had to be changed.

Problem
Too much time spent making something that isn’t even responsive

Solution
Add a section in the new CMS where the event organiser just has to enter some figures that are then automated into an infographic.

Early Bird Countdown

a request from the sales department was to have a way of promoting the early bird tickets as these offer a 30% discount. The solution was to have a countdown section that gave a sense of urgency

Increase Lead capture opportunities

As well as the brochure there are two new lead capture opportunities, Firstly the watch previous presentation section, and a subscribe to newsletter

Wireframes

Header section

The headers section needs to convey the Event title, what date and which city the event was in, it also needs to be clear on how to purchase a ticket.

Speaker section

The speaker section was rated the most important thing when interviewing attendees

Countdown New

This was a totally new section brought in to promote the early bird promotion, As we have events that run in the US and APAC we set a timezone to this in the CMS so it is accurate to the place of the event

Why Attend

This was the same as the old site but just striped back into an opening paragraph followed by bullet points, the why attend page was scraped as it was being copied and pasted from event to event.

Attendees New

Attendees section was added as it came up in the user interviews that it is something they look for. The attendee logo’s are white svg’s.

Lead capture New

This was a totally new section used to help marketing with lead capture

Previous event video New

This was a totally new section that used our vast video library of recorded events

Sponsors

Sponsor section is a bit of a necessary evil as in users aren't too interested in who sponsors an event however it does drive revenue so is still needed the sponsor type has been added along with an hierarchy of what sponsors are highest are positioned first

Executive Summary

This was a automated version of the original executive summary.

Venue

This was automated when filling out the venue section of the CMS

the team New

This was a totally new section so that any users wanted to contact the correct person to do with their queary would know who to contact.

Concepts

Initial Header Concepts

For my initial concepts I used an image from the original event site I didn't want anyone I was showing it to to get too caught up on the actual image being used.
The images are produced by our creative department or sometimes event organisers if they are feeling particularly creative :l, So not something I personally control.

The trade off when designing for a template

There is a difference when designing for a single site and designing for a template to be used across many sites. Any quirky or distinctive design features that work to make a site unique are repeated across all the sites so these stand out features highlight that they are all copies quite quickly.

Also I dont want the template to be too restrictive (eg every background design having to fit into a diamond shape would grow tiresome) Also we want to keep the building of the event site as simple as possible so want to avoid having text or background colour options or any sort of multiple layered background images.

So although I think their were some more eye catching concepts we went with the most versatile, a plain stripped back header with a angled cut off

Countdown Timer

This section was totally new to the site. Its aim was to highlight the early-bird ticket and give a sense if urgency. The background image should be changed for each event.

Previous Presentation Video

This section was totally new to the site, Its aim was to highlight the video content we have for all the events we do, some ticket options include all the video content form the events

The design was to highlight there is a video, it would later be used for lead capture to watch the video.

Executive Summary

The executive summary is automated all the event organiser needs to do is fill out some numbers. This saves a lot of time when building this.

Finals

Finished Design

As any UX designer knows a design is never really finished its just finished for now, New features are requested new improvements are suggested. Once the site is out in the wild, we start to get large amounts of data back from users behaviour on the site.

Improvements

Im quite pleased with the design. If I were to make any improvements to the design I would probably make the header section have a custom CSS field in the CMS, This would allow a designer/developer like myself to come in and change the header to suit what ever was needed with out having to change all the the headers it would also allow certain events to have different feels to them.

video of working prototype

1:32