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.
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.
pick an event Calendar
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
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
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.
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
Results
These are points raised during the internal interviews with each department
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)
Sales constantly get site users asking them how to buy a ticket on the site as they cant find the button
There is only one source of lead capture and that is download event brochure
There currently isn't a way of promoting the early bird tickets within the site.
These are the things I first noticed when looking a the sight
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
The circular buttons don't look like buttons, Also the colour is dependant on what division the event is in there are eight divisions
The social share icons are sticky and often hides content, It also highlights the low amount of shares
The CTA’s through out the overview page are just small icons that are easily missed
Listing the speakers as logo's and job titles seems a little impersonal, and doesn’t convey that they are people.
Every section has a background image, this causes problems with legibility of overlaying text, loading times & sourcing so many images
The executive summary is not responsive, It is manually made and saved as a single PDF
Carousels are proven to be not effective and the information past the first slide is rarely seen
Now that Ive interviewed staff and users as well as identifying any obvious UI problems it was time to come up with some solutions.
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)
ProblemThe UI is inconsistent in shape colour and even text
SolutionSetting a style guide to be consistent through out the site, Change register CTA to Buy Ticket
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
ProblemSix background images for each event was too much, This was built when parallax images were a big thing and they really went for it :)
SolutionPretty simple remove some images and split sections with background colours. The venue image is pulled from google maps
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
ProblemSpeaker cards don’t represent speakers well as they are just the logo, which seems more like a sponsor
SolutionAdd a speaker photo displayed as well as the logo, this helps attendees recognise the actual speaker at the event
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).
ProblemUsing eight speakers still leaves an uneven line when there are three speakers per row
ProblemJumping from a row of four down to a row two is too big of a jump and makes the speaker card too wide.
SolutionIntroducing 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)
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.
ProblemToo much time spent making something that isn’t even responsive
SolutionAdd a section in the new CMS where the event organiser just has to enter some figures that are then automated into an infographic.
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
As well as the brochure there are two new lead capture opportunities, Firstly the watch previous presentation section, and a subscribe to newsletter
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.
The speaker section was rated the most important thing when interviewing attendees
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
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 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.
This was a totally new section used to help marketing with lead capture
This was a totally new section that used our vast video library of recorded events
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
This was a automated version of the original executive summary.
This was automated when filling out the venue section of the CMS
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.
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.
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
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.
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.
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.
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.
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.