Purchase Path Redesign

Old v New.png


Front Gate brought me aboard as their sole UX & visual designer in 2013 to redesign their purchase path experience. Armed with previous experience working on Dell and the Microsoft Store's e-commerce experiences and a 140+ page PDF from the Baymard Institute on e-commerce usability standards that I read religiously, I went to town working on this with a product manager who was so talented, he went on to be our first ever Director of Product at Front Gate.

My Role

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

Research and Wireframes

I began my process by collecting examples of competitor's flows/screens, establishing a sitemap and flow for our own, and sketching and wireframing with the product manager on new design and UX.

  • Ticketfly_Flow.png
  • Queue_Flow.png
  • See_Flow.png
  • Sitemap.png
  • Wires_CU.png
  • Wires.png
  • Flow.png
  • Sketch.png
  • Dork.png

  • 01_Event_Listings.png
  • 02_Event_Details copy.png
  • 03_Searching_Modal.png
  • 03.2_Failure_Modal.png
  • 03.3_Success_wReccos.png
  • 04_Cart-1.png
  • 05_Sign_In.png
  • All Screens.png

Final Design: Event Listings Through Sign-In

The above screens were the final redesigned experience for finding and selecting tickets at venues and festivals, including:

  • Event Listings Page
  • Event Details Page
  • Success and Failure Modals
  • Cart
  • Initial Sign-In Process (before delving into the checkout process)

Important to note that Front Gate's previous purchase path was not mobile optimized and pretty difficult to use on a device, so our dev team was able to achieve more mobile friendliness by building the new site out in Bootstrap (because we didn't have dedicated front-end and mobile focused developers at the time).

View Emo's Current Event Listings Page

  • Old_Checkout.png
  • Accordions.png
  • Accordions_2.png
  • 06_Accordion_Delivery.png
  • 06.2_Accordion_Payment.png
  • 06.3_Accordion_SecureTicket.png
  • 06.4a_Accordion_Confirm.png
  • ThankYou.png

Final Design: Checkout Accordion

Next up was the checkout flow for once a user had made their ticket selection and signed in. The existing checkout was super clunky with very little information hierarchy and quite behind the times at this point, so we (Product and I) started looking at non-ticketing sites for how they handled checkout and gravitated to the idea of an accordion because we needed the user to select their desired shipping method and input their address (or will call name) to serve up the correct shipping rates to add to the total from our backend. So the step-by-step process became:

  1. Delivery Method
  2. Payment Info
  3. Secure Ticket
  4. Review & Confirm

This new checkout accordion we created reduced checkout time from 9 to 4 minutes!

Asset Guide and Examples

The purchase path was designed to be skinned for each client's branding/look & feel, so I kept the idea of this template in mind as I designed around the flow. Once that was set, I also helped design the tool in our backend that users would use to upload the client's asset as well as an official asset guide that was sent out to each new client we acquired before we could build out their "label page" aka site.

  • Examples.png
  • AssetGuide_1.png
  • AssetGuide_2.png
  • AssetGuide_3.png
  • AssetGuide_4.png
  • Backstage.png

  • Fest_Site_Example_1.png
  • Fest_Site_Example_2.png
  • Fest_Site_Example_3.png
  • Refresh_ByType.png
  • Refresh_ByDay.png
  • Refresh_ByDay_QuickCart.png
  • Refresh_EDP.png

Latest Design Iteration

As of the summer of 2019, we are looking to iterate on the purchase path because we've shifted our focus from venues, artists and promoters to festivals, yet have still been relying on this one solution for everything that I designed 6 years ago.

The most important change to me was to make the event listings page much more visual and less of a list. Most festivals have 5 or less "events" or pass types to select from versus a Stubb's (or club) who has an infinite list of events always.

I also explored two different ways to present tickets/passes/etc: 1) By Type: GA, VIP, Platinum or 2) By Day(s): Friday Passes, Saturday, Weekend, etc. and incorporated this idea of a "Quick Cart" feature from the event listings for users who already know exactly which days and pass types they would like and can skip the Event Details Page for faster processing through a high volume onsale. At this time, this work is not prioritized or scheduled for development yet, however.