06
Dec

Skiddle goes responsive!


A project that has been 2 ½ years in the making has finally come to fruition with the launch of the new responsive skiddle.com.

responsive re-design

When I arrived at Skiddle as the new Online Development Manager, I was keen to keep the forward thinking momentum that has been synonymous with the company to date. Skiddle’s impressive history included being the first website to allow event promoters to upload their event listings without human intervention, whilst later becoming the first ticket outlet to have a Facebook ticketshop app and first to be integrated with Facebook opengraph. That’s quite a development legacy to live up to.

In this post I will cover why we needed this re-build, why we chose a responsive approach and what it means to both our customers and promoters.

 

The problem

Since the launch of the iPhone (and later Android phones), it has become easier for our customers to browse the internet whilst out on the go. This includes users having the ability to buy tickets for an event whilst on their night out, instead of waiting in queues to pay on the door.

Device usage graph

Since 2010, we have seen our unique visits reach 1.5 million a month, and from this the growth in mobile users has grown significantly. In 2010, on average mobile users accounted for 6% of our customers, growing to 13% in 2011.  2012 saw another massive jump to 24.4%, and with the ability to also track tablet users, these accounts for 6.7%. This year, customers on mobile (mobile 38.7%, tablet 11.3%) devices have reached parity with desktop users, and in the height of festival season this year we saw this jump further to almost 60% mobile traffic, with customers accessing the website on over 1500 different mobile devices . We believe this is a trend that is likely to grow further in our industry.

Whilst it’s always been possible to use Skiddle on mobile devices, we wanted to give our users an optimised experience, which in turn would make it easier for them to find events & purchase tickets without having to pinch & zoom each page to read the content. With the high traffic volumes we receive, even a small increase in ticket sale conversions would result in maximising the revenues for event promoters using Skiddle.

 

Why we chose responsive

We had 2 options to approach the user optimisation: have a dedicated mobile only website, or create a responsive version of the site. Our development team investigated each approach and discussed the pros and cons for each.  We then devised a way to test both approaches on our customers to get real feedback about which option to go ahead with.

Option 1 – Mobile only website

After joining Skiddle I instigated the first tests in mobile options. In October 2011, with New Year’s Eve being the busiest period on the website and with it fast approaching; it was an ideal opportunity to get a lot of real user data in a short period of time.  We built a small mobile only New Year’s Eve website and pushed any mobile traffic through to this. We then measured the analytics data.

We saw successes in our findings and our competitor research demonstrated that there were few ticket outlets that had produced a mobile version of their websites, we therefore initially thought this may well be the best option to go ahead with. However the main disadvantage to us is that unlike most other ticketing websites, our foundations as a what’s on guide meant we also have a lot of content (around 4 million pages) which as well as events listings also includes: editorial content, curated city guides, as well as hotels and restaurants which would also need to be included in the new mobile version.

If we didn’t down this route we would end up with nearly double the amount of code to maintain, which would mean twice as long to push out any new features to the site and impact on the dynamism that’s enabled Skiddle to remain a market leader in the events industry.

There was also the issue of tablet users, as this is also a growing segment of our customers base, would this group of users also need a specific version of the website, or would they prefer the mobile or desktop version, this would increase the code base further.

Option 2 – Responsive Website

In 2012, we started looking at our second options of a responsive design. Although there has been a huge take up of responsive design over the last few years, it’s still in its infancy and there’s not a lot of large scale websites built this way, so we hadn’t got a many points of reference in terms of best practices.

The main advantage of having a responsive site is that we would be working with just 1 codebase instead of 2 (or more) like the mobile only approach. The design will then grow or shrink depending on what device you are viewing it on. This meant that any changes we make to the site going forward would just be in one place and work across all devices (alleviating the tablet users problem), allowing quicker innovation, which is very important to us.

At the time we were also looking into creating white label functionality for our promoters, and we decided these templates would form the foundations of our testing for the responsive work.  With the responsive white labels created, we then monitored the conversion rates of purchases made on mobile devices against those made on our non-responsive site, seeing a significant increase which we believed could be transferred to the main skiddle.com website.

With the 2 different approaches tested and the pros and cons considered, we decided that responsive was the best approach, not only to optimise mobile / tablet users, but for any device that allows an internet connection – TV’s, game consoles etc, you’d be surprised what our customers purchases tickets on!

 

The build and putting live

Now we had chosen the responsive option, we had to devise a plan of action for the development.  With the site having so many different areas – events, festivals, news, city guides, hotels and restaurants (and more!) it would have been unfeasible and taken too long to make the whole site responsive and put live in one go.  With a background in agile development, I devised a development strategy which would mean us converting and putting live the new responsive work in phases. Looking through our analytics data, we split the site up into key areas that drive the most revenue to include in the initial phases.

Along with the responsive redesign, I was keen to implement a progressive enhancement approach.  This approach means starting off with the core information for a page e.g. event details, then layering into the page extras if the customers device can handle it.  The result is a leaner, faster website, from which we can already demonstrates additional ticket sales.

Once the first phase was complete, and tested in the office over a couple of weeks, we were keen to put the site live.  Using an A/B testing tool, we could send a percentage of users through to the new website to compare ticket purchases.  We were expecting positive results for customers using mobile / tablet devices, and a 32% increase in conversions showed this, but the bigger surprise was the 20% increase from customers using desktop devices – even though for desktop the design had changed very little (most people couldn’t tell the difference), so this must be down to the website being leaner and quicker to load!

Happy with the results, we switched the website over at the start of last the week, with the events section of the website now fully responsive, we have since moved over the news area with the hotels, restaurants and festivals sections moving over in the coming months.

Below are some comparisons of how the old (images to the left) and new (images on the right) website looks on various devices.

hompage-compare

compare listings page

event-page-compare

[a tip of the hat to the folks at placeit.net for the awesome image generator]