Purchase Path: New Features

Features_Hero.png

Background

Front Gate brought me aboard as their sole UX & visual designer in 2013 to redesign their purchase path experience. Shortly after the successful redesign, the product manager and I started designing and working on new features to add to the buy process.

My Role

  • Design & Competitive Research
  • Whiteboarding & Wireframing
  • UX & Visual Design
  • Production & Developer Handoff

  • TM_PYS.png
  • AEG_PYS.png
  • evenue_PYS.png
  • Notes.png
  • Paramount_PYS.png
  • Alamo_PYS.png
  • 01_BestAvailable.png
  • 02_BestAvailable_Selected.png
  • 02.1_PickYourSeats.png
  • 02.2_PickYourSeats_Hover.png
  • 03.1_PickYourSeats_Hover.png
  • 03.2_PickYourSeats_SelectingType.png
  • 03.3_PickYourSeats_Carting.png
  • 03.4_PickYourSeats_SeatBecameUnavailble.png

Reserved Seating: Best Available or Pick Your Seat Tool

Something a lot of our competitors offered and had become integral to keeping and getting new clients at FGT was a Pick Your Seat tool for reserved seating events. We already offered a Best Available option that would search our system and find the user such based on a couple of types of criteria, but our clients told us that users wanted to be able to poke around an interactive map and choose seats for themselves. So we set out to design and develop our own.

I started by looking at what the biggest two ticketing companies offered in this area, Ticketmaster and AEG. And then also collected some local examples like the Paramount Theater and Alamo Drafthouse (this was before many chain theaters started offering reserved seating even). Then, my product counterpart and I started doing some informal user research by going to a local coffee shop, explaining our plight and asking for some feedback from strangers in exchange for a coffee. We took each person through a couple of these existing competitor PYS processes and took note son their pain points, what they liked and even vetted some of our ideas and hypotheses with them.

From there, I moved into sketching, wireframing and ultimately designing FGT's PYS vs. Best Available experience. I borrowed a lot of influence from things I liked about Ticketmaster's, like the mini map in the corner that shows you what section in the entire venue you're looking at and the hovers that tell you the price range and how many seats are available in a given section. But I also fit it into our existing purchase path templates and tried to make it as clean and simple and easy-to-follow as possible which was something the bigger guys seemed to fail at.

At this time, we do not support Pick Your Seat on mobile due to development constraints.

  • Ticket_Protection.png
  • TP_Tests.png
  • Final_SecureTicket.png

Ticket Insurance aka Secure Ticketâ„¢

I'm proud to say that Front Gate was probably the first independent ticket company (and one of the first US ticketing companies period) to adopt the concept of ticket insurance. This was a great feature for high priced festival tickets because it meant that the patron could get a full refund of their tickets/wristbands if they could not attend due to a covered reason such airline delays, illness or loss of employment, to name a few.

We began offering this for any client who wanted it after A/B testing a few ideas/treatments and settling on the winner. We tested a straight text explanation of ticket insurance vs. one with a small visual element added (an icon to represent ticket insurance to grab the user's eye), and later tested multiple icons for each covered reason in the same space as well as in a forced modal.

Just this past year, I noticed a similar treatment to our final (which was renamed Secure Ticket) on Eventbrite's site by Ticket Guardian/FanShield. And it's true, imitation is the sincerest form of flattery.

  • Comp_Plans.png
  • Research_Payments.png
  • Research_Payments_Mobile.png
  • Layaway_Sketch.png
  • Layaway_Single.png
  • Layaway_Multi.png
  • Layaway_DT.png
  • Scrapped.png

Layaway Plans

Another feature we had to tackle for our buy process was the ability to choose a layaway plan. It was slightly complex because we needed to create one solution for mobile and desktop that could accommodate both festivals that offered only one layaway plan and those that offered a few different layaway plan options.

Among ticketing competitors, I didn't find anyone already doing this well, so I looked to other e-commerce examples for inspiration. I also decided to focus on mobile first since we had noticed mobile traffic exploding on our pages over the last couple of years and just started offering Venmo as an MOP on mobile.

Ultimately I settled on this side-by-side radio button with expandable info section treatment to support single or multiple layaway plan options that was inspired by something I saw on a Wufoo payments template after scrapping a vertical list of infinite radio buttons or tabbed/toggle structure.

View single layaway plan option prototype

View multiple layaway plan options prototype

  • Exist_Acct.png
  • Acct_Sketch.png
  • Rev_SignIn.png
  • Rev_Settings.png
  • Rev_Order_History.png
  • Manage_Layaway.png

Mobile Account Flow

When we first launched the newly redesigned purchase path, I didn't have time being the sole designer to redesign the account features, so the devs carried over the old account structure and just updated its styling (somewhat) to match the new.

Needless to say, the existing account settings and features left a lot to be desired, so I worked on cleaning them up and, much like the layaway project above, I was focused on mobile first.

I divided the account features into two separate paths once the user was signed in: Account Settings (to include your billing/shipping address and stored payment method if applicable) and Order History (to obviously include all of your previous orders and any pending layaway plans). The existing Order History needed a lot of help because it only relied on dates purchased and order numbers (pretty random for most users to remember/identify) rather than the event name or any sort of visual cue. So I fixed that and added links to either view the order details (with each ticket type/event collapsed on initial view) or manage your layaway plan directly on an event with such an option.

  • PP_Redesign.png
  • PP_Comp.png
  • Virgin.gif
  • Print pass.png
  • PP_Exploration.png
  • PP_Final.png
  • FGT_DPP.gif
  • PP_Assets.png

Print Pass Redesign

This print pass redesign was a small thing, and something I didn't dream up on my own before anyone else, but I'm still proud of the change we made.

Print-at-home or Print Pass tickets had been around for as long as I can remember, but I felt ours looked pretty ghastly when I started and wanted to make it so much better. So I looked at our competitor's and started collecting requirements for what ours needed:

  • Needs to support 1D or 2D barcodes
  • Display the same info as a normal ticketface would: event name, pass type, reserved seating assignment (if applicable)
  • Client/Festival branding
  • Print Pass Terms & Conditions (legal)
  • Potential ad space for client or client's sponsors
  • Our logo

I wasn't very impressed with the competition, and while digging for other inspiration online, I found Virgin Airlines' new foldable boarding pass design and decided we must do the same with our print passes. The demographic for festivals is often younger than adults purchasing flights, but the need for something simple and tactile that isn't easily misplaced or lost was perhaps even higher.

So we adopted the folding mentality and I divided the content amongst 4 quadrants and added instructions for the new version in one of those quadrants. This covered all the bases above and still left a whole quadrant for ad space. The client could even utilize two quadrants for ad space if they didn't want to use the default instructions image. So the quadrants break out in this way:

  • Top left quadrant: Ticket face and all pertinent info plus barcode
  • Top right quadrant: dedicated to ad space (or a map if they had no extra advertising or branding)
  • Bottom left quadrant: Defaults with print pass instructions but can be replaced with another big ad image or map
  • Bottom right quadrant: Print Pass T's &C's hardcoded as well as any additional text input the client would like to add.

I explored some different font treatments for the ticket face and text, but we didn't have a lot of dev knowledge on our team who could pull the info from our system into a super customized PDF, so it ended up becoming arial and my dotted fold lines had to be solid. But the important aspects of the idea and UX are there.