Eventfinda Website

Overview

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.

Converted Into Bootstrap Framework

The product design manager and I converted the previous version of the consumer-facing Eventfinda website to use Bootstrap’s wide range of components so that we could quickly and efficiently design new features seamlessly while also retaining Eventfinda’s fantastic SEO, unique marketing and flexible advertising opportunities.

Fully-Responsive Design

As smartphones were becoming more common, we needed to update the website so that it was fully responsive and displayed beautifully on a range of devices and screen sizes. In 2013, we saw the trend of mobile devices slowly become more important, as mobile users grew about 10% every year. In 2020, mobile users make up roughly 60% of its total user base.

Clean Page Design & Code

The previous design was very cluttered and reminiscent of web design styles from the mid-2000s. Problems ranged from small typography, outdated colour schemes, and a difficult ticket purchase user interface. We went through every page with a fine tooth comb and successfully carried out a plan to update the layout of every page to modern design standards while also implementing semantic coding practices for future-proofing.

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.