Eventfinda Website

Overview

Eventfinda is an events directory, calendar & ticketing website, located in New Zealand, Australia & Singapore. It was founded in 2006 and is New Zealand's premier events website.

Event promoters can list their events for free, and opt to use its world class ticketing system for selling tickets to their event. Every day the website gets thousands of visitors, and a total of 1.2 million visitors every month.

Date: January 2013 - Present

Tools: HTML/CSS/Bootstrap, PHP/Symfony/Vagrant/Docker, JavaScript/jQuery

Background

I joined Eventfinda as a user interface designer and worked alongside a product design manager and a small team of back-end developers. The product design manager and I were responsible for updating the previous version of Eventfinda to modern user interface design standards while retaining its huge customer base, excellent SEO and wonderful client base consisting of event promoters and advertisers.

An even bigger challenge was for us to update the design on a HTML and CSS presentation-layer without modifying the PHP, jQuery and Ajax code under the hood, since development resources at the time were limited.

Therefore, the product design manager and I concluded that the best solution was to update the presentation-layer using an existing framework, and we set about reviewing a range of frameworks offering a range of elements and components, before we settled on Bootstrap.

Designs

Home page

The Eventfinda Home page contains a very complex layout, but thanks to the Bootstrap framework (in particular its components and grid system), we were able to compose a page that was enticing to look at, and prioritise the different elements including the carousel, feature events, news, subscribe to newsletter, most popular events, and Facebook page feed components.

Browse Events page

Eventfinda's Browse Events page houses one of the simplest but effective components: the event filters. These filters were designed by the product design manager back in 2008 and have weathered the test of time. Why? Because they're clean, easy to use, and contain SEO gold. These category, location, price, and date filters allow visitors to quickly filter the list of events so that they can discover events to suit their needs.

World-class ticket purchase system

One of Eventfinda's goals was to design a world-class ticket purchasing system so that customers could quickly select their ticket options, enter their contact details and pay without fuss and stress.

Seating map selector

As Eventfinda's client-base grew, so did their needs. One key function that was requested time and time again was a ticket selection form where customers could select their seats and tickets directly from a seating map. Through the use of Bootstrap, jQuery, Ajax, and SVG, we were able to design and develop an effective solution.

Elegant credit card form

The credit card form was a real accomplishment of ours. One of the most painful online experiences can be entering your credit card information. I strongly dislike credit card forms that are hard to use, don't match the order of information as it's presented on the card (such as placing the name first and the number somewhere else down the form, confusing month and year inputs, and having to select the card type). So we designed a simple but effective credit card form with helpful instructions to assist the customer.

Conclusion

Redesigning the Eventfinda website was a huge challenge, since the product design manager and I were on our own, with no development resources to fall back on. Bootstrap was crucial for us, as it gave us a simple and elegant framework to convert the previous design with ease.

Using Bootstrap also allowed us to constantly design and develop new features to Eventfinda's customers, event promoters, and advertisers.

Working on this customer-facing website was a huge privilege and the sheer number of visitors and range of features stressed how important it was to create pixel-perfect designs and develop using semantic and clean code.