Work/Eventbrite

03 · Eventbrite · Commerce · 2014–2015

Buyers moved to phones faster than checkout did

Mobile visitors bounced far more often than desktop visitors. With most listings free, every extra checkout step cost attendance as well as revenue.

Checkout comparison: the proposed mobile flow above the current flow

The problem

Mobile share of traffic grew from 13% to 19%, and mobile visitors bounced at 71% against 52% on desktop. Over 70% of listings were free events.

What we did

We stopped extending the desktop flow and rebuilt the attendee and organizer experiences responsively, starting with mobile checkout, on a new design system.

Results

Checkout: responsive, with 40% fewer required steps. Homepage: orders that started on the redesigned homepage rose 450% from July to September 2014.

Role: Senior Director, Design and User Experience, 2014–2015
Owned: Attendee and organizer experience design and research
Team: 17 in design, research, visual design, and brand
Partners: VP of Product (reporting line), engineering, marketing, go-to-market

The mandate

Phone and tablet visitors bounced far more often

Engineering had set a responsive rebuild. I led attendee and organizer design and research through it, starting from these numbers.

Bounce rate by device

Desktop 52%

Tablet 66%

Mobile 71%

13% → 19%

mobile share of traffic

70%+

of listings were free events

Baseline: site analytics through early 2014, the problem the team inherited.

The diagnosis

With most listings free, friction cost attendance

The insight

Phone and tablet traffic was growing, and those visitors bounced far more often than desktop visitors. With most listings free, every extra checkout step cost attendance as well as revenue.

The decision

We stopped extending the desktop flow and rebuilt the attendee and organizer experiences responsively, starting with mobile checkout.

Tradeoff

My leadership decision was to make the rebuild the design organization’s priority, even though my own team strongly resisted because we were not fully ready for all the mobile decisions it required. We had a heated debate, but I paused almost all other design work, embedded designers into their corresponding engineering squads, kept one team advancing our emerging design system, and protected only a couple of critical customer initiatives already in flight.

Getting the team behind it

I chose checkout as the first journey, because every event, free or paid, runs through it. We mapped every desktop and mobile checkout screen for free and paid events, put the flows on the walls, and walked them together. The complexity became obvious, and the team came back with a much simpler approach.

Explore the first-ticket journey research

Research

The journey behind shorter free-ticket checkout

We mapped the first-ticket journey across desktop and mobile, from referrals and invitations through registration, confirmation, and ticket access. This analysis informed the shorter free-ticket purchase flow on mobile.

Eventbrite first-ticket journey research: desktop and mobile screens from referral to ticket access, with historical entry and exit annotations. — Original journey-analysis artifact. Desktop above, mobile below. View full-size map ↗

Leadership and delivery

A 16-week overhaul: shorter checkout, busier homepage

What shipped

Responsive mobile checkout with 40% fewer required steps, on a new design system.

16 weeks

for the responsive overhaul across attendee and organizer experiences

The design system

One system for attendee and organizer products

The rebuild ran on a new design system. We defined components once (buttons, form fields, selection states, and loading) and applied a refreshed palette across attendee and organizer products, so both looked like one product on any screen. Stakeholder research had asked for brand consistency, a shared asset library, and clearer usage guidance.

After checkout, we extended the system into search, event, and venue pages and, working with the VP of Marketing, brought the new brand into the product.

Eventbrite component sheet with button states, toggles, form fields, dropdowns, and a loading bar — **Component sheet.** Buttons, toggles, form fields, selection states, and loading, defined once.

Outcomes and learning

Checkout lost 40% of its required steps

Two parts of the overhaul, measured separately. Checkout is measured by its required steps. The redesigned homepage is measured by the orders that started there.

Checkout

40%

fewer required checkout steps

Homepage

+450%

homepage-driven orders, from about 0.1% to about 0.5% of orders, July to September 2014

See the research and design gallery

Gallery · Research to release

From journey research to a new visual identity

Research, checkout comps, and visual design from the rebuild. Select any image to open it full size.

Research

Map the journey before cutting steps

Where buyers arrived. Referrals, invitations, event pages, and organizer profiles, annotated with historical traffic.

First-ticket journey map, exit half: registration, order confirmation, confirmation email, and My Tickets on desktop and mobile — **Where buyers left.** Registration, confirmation, the confirmation email, and My Tickets, annotated with historical exit rates.

Organizer flow map with screen thumbnails arranged in sequence — **Organizer flows, 2014.** Every organizer screen mapped in sequence before the responsive rebuild.

Decision

Cut free-ticket checkout to what buyers needed

Before: six phone screens of the existing mobile checkout, from event list to confirmation — **Before:** the existing mobile flow, with separate ticket details, a timed registration form, and a confirmation screen.

After: the proposed mobile checkout, from event list to order complete and a share sheet — **After:** buyers choose a ticket and register from the event page, then land on a confirmation with an offer to share.

Checkout comp, 2014. The responsive checkout shipped with 40% fewer required steps.

Design system

Updating Eventbrite’s identity alongside the product rebuild

The same palette and components carried across product screens, attendee and organizer apps, and campaign materials. These examples show the range of work my organization covered during the rebuild.

Two color palettes: the legacy palette labeled Old and Busted above the new palette labeled New Hotness — **Color, before and after.** The legacy palette above the brighter palette that replaced it.

Style guide: color. Brand orange, the UI and text palettes, and the full Brite palette, with values for every swatch.

Two app icons: an orange gradient E for the attendee app and a blue neon E for the organizer app — **App icons.** Orange for attendees, electric blue for organizers.

Green and blue campaign banners in several sizes reading Find hundreds of free events in SF — **Campaign banners.** Event photography under a color overlay, sized for every placement.

Orange and pink campaign banners in several sizes reading Get off the couch, get out and do — **The same banner system in orange and pink.**

Eventbrite homepage comp with a photo header and a grid of events — **Attendee web.** The new homepage, led by event photography.

Organizer event dashboard with ticket sales, a sales chart, and an orders table — **Organizer web.** An event dashboard with sales, tickets sold, page views, and orders.

Attendee app: a San Francisco event feed with a festival photo card — Attendee app: events near you

Organizer app: live event dashboard with gross sales, tickets sold, and an hourly sales chart — Organizer app: live event sales

Design comps by the Eventbrite design team, 2014–2015. All figures and names are sample data.

The team

The Eventbrite design organization

The designers, researchers, and brand team behind the attendee and organizer experiences. Designers worked embedded in engineering squads during the rebuild, research mapped the first-ticket journey, and the brand team built the new identity.

Tom
Erik
Lauren
Evan
Josh
Dan
Kirstyn
Lumen
Jessica
Anthony
Chris
Kyle
Jason
Jeff
George
Kristine