Alexander D.
Kipphut

Port Buyer Experience

Background & Landsacape

Events invest in unique branded experiences.

An increasing number of events spend considerable resources building dedicated marketing experiences rich with their own branding and personality.
Existing ticketing platforms redirected buyers away from these experiences to templated marketplace sites full of competing branding to complete the purchase – making for a disjointed experience.

The event "marketplace" model is broken.

We learned that event discovery doesn't happen through marketplaces themselves, but by word of mouth (or keyboard).Events are the in-person gatherings of communities. Whether it is a community of fans that come together to see an artist, a community of tech entrepreneurs at a meetup, or a local theater performance; these groups all have pre existing channels of communication.

Square pegs and round holes.

From organizations with once a year productions with a wide variety of ticket types to weekly classes and meetups with only a few and everything in between, no two events are alike.
From setup to sales and payout, there were many inherent software limitations imposed by existing ticketing software solutions forcing event creators to conform to their model and hack together solutions.

port buyer experience
VIDEO overview

UI & Animation with Purpose

VISUAL DESIGN CONSIDERATIONS

Meaningful animations provide a sense of place and direction for the user as they open the overlay, and move between steps in the purchase flow. From ticket selection, to the cart, and on to the checkout the screens; the UI dynamically progresses to help the buyer understand their current step in the process. Staggered elements and eased micro animations are employed to highlight even sublte changes in state.

While it was important to control the variables in the checkout flow, Port was visually designed to maintain a sense of presence and relationship to the host site. The UI was crafted to feel at home living atop a variety of experiences using a module based card system that would adopt some of the personality and compliment the underlying page.

Scripts & Buttons

THE EMBEDDED EXPERIENCE

Just a few required fields

Sellers first needed to complete just three required fields; name, base price, and inventory to create a product. This affords for great flexibility. Optional fields like additional ticket information, order limits, multiple uses, expiration dates and grouping multiple tickets into packs allowed sellers truly granular control over thier ticket offering..

FROM THE EVENT
CREATION FLOW

An Embeddable Experience

After product creation, products being sold together could be grouped under the same embeddable button widget script - the vehicle for Port's buyer experience.

Contained within that button was the full white-labeled ticketing experience; allowing buyers to complete their purchase without redirects to unknown third party services and competing branding.

A Sample SCRIPT

BYO IA

( Bring Your Own Information Architecture. ) Multiple buttons could be placed on the same domain giving sellers the ability to organize their events, tickets and information by date, location, event type, or however best fits their narrative and IA.

These same buttons could then be re-used across a variety of websites, blogs, calendars, social media, and rich emails to natively leverage the event creator's preexisting communication channels. Without being prescriptive, the inherent flexibility of the buyer experience was able to accommodate a wide variety of seller’s unique pairings and offerings.

Experience Overview

User Flow

01. TICKET SELECTION

02. CART

03. CHECKOUT

The Ticket Buyer Overlay

A FLEXIBLE COMPONENT SYSTEM

The module based card system at the core of the Port buyer experience accommodated a wide range of products and ticket types– from the very simple to the very complex. As users began adding optional fields such as additional information, order limits, multiple uses and expiration dates; these variables need to be communicated clearly to the buyer along with any other discounts or conditional price adjustments.

A PARTIAL audit of states
within the experience

Making sure these components and states worked in concert with one another no matter the specific mix of information was of utmost importance. Fine tuning this experience relied on an interactive approach, building against a feature roadmap and strong collaboration between engineering and design.
‍

EXAMPLE Ticket TYPES

EXAMPLE PACKS
(TICKETS sold as a group)

⇠ ABOUT PART II ⇢