VANUX.COM/CASESTUDY

ShopTV Ticketmaster Enhancements


Update iTV Landing Page to support localization, static banners,
new list widget, updated horizontal control grid, & Ticketmaster API.
These features can also be used to enhance other retailers.
‍

Landing Page Upgrade


The strategy was to upgrade the components and functionality of the iTV Landing Page template and modify the existing code for Ticketmaster. Below is an example of the main template used by the Ticketmaster store for navigating all categories and tickets.

Building a flow with users in mind

We knew that we wanted to make the Ticketmaster implementation as simple, straightforward and accessible not only from a development implementation perspective but also to allow Ticketmaster visitors the freedom to select what type of experience they want to have. To provide both technical and customer support, since we were not sure how our product would work from Ticketmaster's web portal to the ShopTV app experience, we needed to make the design of the iFrame flexible enough that either creative assets or content would work.

Designing a User Flow requires knowing more about the users. We had to figure out not only the kind of users who will be interesting in purchasing a concert, movie or sporting event tickets, either on Ticketmaster or the ShopTV app.even on through our ShopTV app. We also needed to understand how the different entry points would influence user behavior and look at the scenarios from a person who wants to buy tickets for these events.

To provide both technical and customer support since we were not sure how our product would work from Ticketmaster's web portal to the ShopTV app experience, we needed to make the design of the iFrame flexible enough that either creative assets or content would work. Which This meant we had to provide some style guidelines so the experience from Ticketmaster will match our branded channel experience that we were proposing to create for them on our end. Working with the Creative Director, we came up with some design standards and best practices from the TV wheelhouse.

‍


Get Tickets - Send to Mobile Flow


Once a user has selected the 'Get Tickets' button for a show, the user then lands on the Send to Mobile Page and Checkout Flow. Once completed, the user will receive a text with a link to purchase tickets.

‍

Same Code Base Structure

We used Using the same code structure for ShopTV to implement the Ticketmaster checkout process on SmartTV platforms.

Consistent Across All Devices.

The checkout functionality works with all mobile devices. The URL code is an SMS message that concertgoers use to purchase tickets to concerts and sporting events. goers and use to purchase their concert tickets or sporting events.

Same Code Base Applied Throughout

Responsive Web design is a design and development approaches that responds to the user’s behavior and environment based on screen size, platform, and orientation.  The responsive design consists of flexible grids and layouts, images and well-defined CSS media queries.

As the users switch between their TV, iPad, smartphones to their and laptop, the application should automatically change and accommodate for the different screen resolution, image size, and settings across various devices.  In other words, the technology should respond automatically to a user's preferences. Therefore, this eliminates the need to design and develop different applications for each device and platform.

1

Simple Grid System

Simple Grid is a CSS grid for your website. It's lightweight, responsive and simple.

2

Stacked Columns

This involves Stacking stacking elements one over the other in a fluid or responsive layout for multiple screens.

3

Layout Respond to Devices

Responsive web design is an approach which makes web pages render to a variety of devices, window or screen sizes.

Pulling it all together

Working with the Creative Director, we spent many hours experimenting with the visual mockups in Illustrator trying to capture the right visual design aesthetics. We used the wireframes I quickly put together and did a quick digital prototype, using powerpoint, to show the interaction and natural user flow through the new Ticketmaster purchase process. By taking screen grabs of the wireframes, I wanted to show the minimal clicks the user would make to locate an event, venue and purchase their tickets.