Event Ticket Website Design for a UK Distributor

  • UI redesign for multiple ticket buying websites
  • CMS development
  • Infrastructure migration and support
  • Microservices-based architecture
Expertise
Web & Enterprise Portals
UI/UX Design
eCommerce
Verticals
Retail
Media & Entertainment
Technologies
PHP
Python
Frontend
Cloud

Iflexion completely overhauled the look and feel of multiple event ticket selling websites for the target audience of 30+ million, while migrating the customer’s infrastructure to AWS and introducing microservices.

  • JavaScript
  • PHP
  • Python
  • Symfony
  • React
  • Angular
  • Drupal
  • AWS
  • Docker
  • Node.js
Calendar
3
years
Gears
18
people
team

Context

Our customer is an established event ticket distributor in the UK, operating since 2000. The company is an official partner of 200+ entertainment institutions, theaters in particular, and has served over 30 million event goers so far. 

At one point, the interface of the customer’s ticket booking website became outdated. In addition, there was no content management interface for the non-technical employees to upload and update the website information. Instead, the programmers had to insert static content by creating and editing HTML pages.

For this project requiring a profound expertise in designing ecommerce websites, the company turned to Iflexion based on the positive feedback from one of our past clients. The initial requirements included a new ticket buying website design and a content management system (CMS) for the website administrators to manage the website information on their own, without turning to developers. Later on, the project scope was expanded to include migration of the company’s main website from the monolith application to a microservices-based architecture, development of new features, redesign of two more websites, infrastructure optimization, and more.

Solution

Ticket booking website design

Iflexion’s team delivered the new version of this ticket broker’s website design. The complete UI redesign and new search options (e.g., viewing shows by day or month on the main page in addition to full-text search) provided for an intuitive ticket buying experience. 

The redesign brought the following results, compared to the same period of the year preceding the project: 

  • 2x faster website search
  • User sessions grown by 29%
  • Conversions increased by 28%
  • The volume of transactions increased by 65%

Iflexion’s team also redesigned the customer’s other holiday booking and ticket selling websites that also had outdated UIs. Thanks to the new ticket marketplace website design, the number of visitors grew by 35% while the holiday booking site enjoyed a 29% increase in traffic, and the transactions doubled in two months.

To ensure the best possible user experience, the customer launched A/B testing of the website, with our team setting up the Monetate A/B testing toolset. The process is as follows: the customer sets up the metrics they need to measure (e.g., the number of sessions, conversions, and transactions), and our specialists write the scripts. The new features added after the redesign are assessed with the help of cookies gathering users’ preferences with their consent.

The content management system

The CMS delivered by Iflexion to underpin each of the customer’s ticket booking websites offers a visual interface that allows the site administrators to publish items, news, and articles with no HTML coding required. It also enables the auto-update of the upcoming shows catalogue, including the information on available tickets, premiere and regular performance dates, venue locations, etc.

Microservices-based architecture

The customer’s main website offering UK-wide event guides and tickets was initially created as a monolith application. With the growth of featured events and end users, however, the customer was looking to update the architecture in order to ensure a better user experience.

We suggested redesigning the architecture to make it microservices-based. This approach makes it easy and convenient to add new features, manage the performance and scale the solution as needed, as well as to change and update the library and framework versions.

We started the changeover with dividing the legacy app into two independent micro-apps, developed with the help of Symfony and PHP, concurrently with updating the website UI design. Then we integrated the two micro-apps into one Drupal page in the form of configurable blocks and JavaScript-based scripts. Our developers also added micro-libraries ― the common code shared by the micro-apps ― to simplify and speed up the development process.

Along with the micro-apps, our team implemented microservices, with each providing a set of APIs and widgets to enable a certain capability within the system:

  • Inventory service for displaying ticket availability for a chosen performance with the details on the venue, rows, and seats. There are several inventory modes depending on availability, specified by dedicated seats, location, or an unlimited number of tickets (e.g., for a festival). 
  • Venue service for showcasing venue locations and an interactive seat plan with the possibility to view, zoom, pan and select seats. 
  • Search service for enabling product and venue search. 
  • Content service for pulling the content for display. 
  • Payment and checkout services for supporting multiple secure payment methods, including PayPal and Adyen, enabling integration with the 3D Secure protocol, and ensuring fraud protection. This service allows authorizing, capturing, and cancelling payments. The checkout service covers the process end to end, from adding items to basket through to payment, automatically handling order placement and booking confirmation.
  • Basket service for handling the shopping cart functionality, including all the steps from placing an item in the cart to applying promo and discount codes.
  • Indexers service for ensuring data migration from other microservices to Algolia that enables site search. 

The customer’s main ticket booking website, holiday booking website and the box office utilize the solution’s EAPI to get the updated information for display on the websites. All the websites work with their own CMS.

Operations support

Infrastructure migration

Initially, the customer’s infrastructure was hosted by a local provider. However, the provider’s service package included no autoscaling, load balancing, and containerization. This led to the customer losing their time on setting up these services manually and sending requests to the provider directly for making any network changes. To fix this, they decided to move their infrastructure to Amazon Web Services (AWS). Together with the customer’s DevOps specialists, we performed the migration and created a new infrastructure with the help of Terraform. 

We set up the infrastructure as code, which minimizes failure risks. It also supports autoscaling in case the infrastructure load increases. In addition, moving to AWS made it possible to use such services as: 

  • Amazon ECS for working with Docker containers. 
  • AWS CodeDeploy for automating software deployments. 
  • AWS Lambda for launching scripts for predefined events and prepare CSV reports. It also serves as a transitional layer for checking the access to microservices. 
  • Elastic Load Balancing for distributing incoming traffic in order to ensure smooth performance. 
  • AWS Auto Scaling for system monitoring and automatically adjusting its capacity. 
  • Amazon Route 53 as a DNS web service for routing end users to the customer’s website. 
  • Amazon S3 as a data storage service.
  • Amazon SNS for pub/sub messaging.
  • AWS Glue for loading data for analytics. 
  • AWS Systems Manager for automating operational tasks across AWS resources. 
  • Amazon VPC for ensuring control over the customer’s virtual networking environment.

We also started the ongoing process of updating the versions and libraries of PHP used in the solution, as well as the operating system. The main goal was to eliminate the environment issues that hampered developers’ work. With the new continuously updated infrastructure, we can delete the server and deploy a new one in a matter of minutes in case an issue occurs.

Monitoring setup

Iflexion’s DevOps specialist set up system monitoring with the help of:

  • Zenoss for monitoring the main metrics, such as CPU load, random-access memory, server availability, network parameters, etc.
  • Splunk for gathering logs and notifying the DevOps team about log errors
  • New Relic for monitoring web statistics

CI/CD

Initially, we set up the Jenkins automation server to enable CI/CD on the project. The developers uploaded the source code into the repository and launched a Jenkins job ― a description of automated code build and/or code deploy on the destination server ― to gather a build for deploying it on the server. 

After moving the infrastructure to AWS, we started working with Bitbucket pipelines and AWS CodeDeploy. Any commit to the code repository now automatically launches the deploy into the development environment. 

Issue resolution

Together with the customer’s DevOps and Operations teams, our DevOps specialist checks the logs from the monitoring system and processes issues. If needed, the issues are escalated to be resolved by the developers.

The types of issues covered include site unavailability caused by a DoS attack, incorrect changes in the CDN system, a bug in the code, certain show or tickets being unavailable, and so on. The reaction time is between several minutes to several hours.

We also drew up a recovery plan for critical issues. We replicated the databases and configured daily backups. In addition, we worked out the procedures for the necessary changes in case of a server failure. As for the main server, we set up an additional server to be switched to if necessary.

Process

There are three teams on the project in total, with their work divided into biweekly sprints with backlog grooming and technical planning at the end of each sprint.

There is also an operations support team that comprises 2 DevOps specialists on the customer’s side and 1 DevOps specialist on our side, who are working closely with the development teams. The developers implement Agile practices using a custom framework based on Scrum that they adapted to their needs. New releases are launched during each sprint.

To ensure the solution’s quality, Iflexion assigned 9 QA engineers to the project. They work as two teams performing functional testing and test automation accordingly. The automated tests are written in Java, Selenium, and Cucumber and cover the main part of regression testing. This allows the team to test the developed functionality quickly and thus maintain regular releases in every sprint.

Technologies

The customer’s redesigned ticket booking website has a custom Drupal theme as its presentation layer, Drupal-based CMS and modules as the business logic layer, and a custom API client as the integration layer. We leveraged custom Drupal modules for content migration, API integration, filtering by date, specific arrangement of page elements, and seating plan display for each venue represented on the website.

The solution processes the latest ticket availability data from the third-party APIs of the featured event providers in the JSON format. In order to be able to work with external APIs, we developed a custom API client. It enables automated daily catalogue updates from APIs using the cron job command. The custom API client also supports manual updates via the admin panel if needed.

Results

In the course of 3+ years of cooperation, Iflexion redesigned the customer’s multiple ticket and holiday booking websites, created a new CMS, and engineered a new microservices-based architecture for the customer’s main website, drastically improving its user experience and quality. 

Working closely with the customer’s team, we also created a new scalable and fail-proof infrastructure in the cloud and continue enhancing it. Iflexion’s team keeps developing new functionality and ensuring the high quality of the customer’s portfolio of websites. 

  • 35% more website visitors
  • 29% more web sessions
  • 28% more conversions
  • 65% more transactions

Screenshots

WANT TO START A PROJECT?

It’s simple!

Attach file
Up to 5 attachments. File must be less than 5 MB.
By submitting this form I give my consent for Iflexion to process my personal data pursuant to Iflexion Privacy and Cookies Policy.