Upped Events Attendee Checkout

Ticket and merch buying process for an event attendee 

iPhone-13

Background

Upped Events is a new event management platform with the goal of serving all the needs of the event owners and event attendees.

fluent_phone-laptop-16-regular

The platform consists of:

  • A master portal for the administrators of Upped
  • A backend portal for the event organizers
  • A ticket embed link that event owners can embed into their business website for event attendees to purchase tickets
  • A tablet that the event staff utilizes for transactions during the event
  • An app for event attendees to use during the event for real-time updates and making purchases

I am one of about ten UX designers. I meet frequently with the product owner to talk through the requirements, and best approaches for designs, and continuously iterate until we feel we have met the needs of the users and business. 

Product Requirement Update for Purchasing Tickets  

This project began as a redesign of the merchandise section for the event-goer as they purchased tickets. 

However, this evolved into: 

  • expanding the ticketing options
  • adding a donations section and round-ups to the end of the order
  • redesigning the merch section with scrolling and the ability to ship to the user
  • expanding the order details/summary
  • updating the UI throughout the flow
  • designing for mobile

Below, you'll see the updated designs related to the features described above. 

Ticketing
fluent_ticket-diagonal-16-regular

Starting Point

The original design for the ticketing page.

Group-1242
tabs-tickets-and-more

Redesign

  • Added a breadcrumb
  • Added tabs for various ticketing types
  • Designed the Order Total section more detailed for the user
  • The user can extend the ticket description "More" or "Less"   

A situation arose where the Event Owner needed special tickets released after certain event-goers logged in.  So we designed for this circumstance.

Newly released tickets are boldened and the event-goer receives a message alerting them they've unlocked special tickets. 

ticketing-extra
Donations
iconoir_donate

Newly Created Donations Section

The idea came about to add a Donations section as the event-goer went through their ticket-buying process. We designed for two circumstances. 

Just-donate-again
The person can donate directly to the organization.
Just-donate-More-Too
The person can donate to the organization and/or contribute money towards someone not able to afford a ticket.
Merchandise
ph_t-shirt-thin

Page Where the Event-Goer Buys Merchandise 

Before

After

  • Changed out the dropdowns to plus or minus for quantities
  •  Added scroll for when there is more merchandise
  • Included the option of picking up merch at event or shipping to person
Donate-and-roundup-scroll-pop-up
Pop-up to Add Shipping Info
If a person selects Ship to Me they’re prompted to add their shipping info at that time
Group-1244
Merch Zoom In
Added the enlarge/zoom-in feature for a person to get a better look of the merch; overlay pops up when clicks on merch image
Discounts
Frame
Payment-Payment-Again
Discounts

Added Various Instances of Discount Code Inputs: Success/Invalid

Order Details and Round-Up
openmoji_overview

Newly Added Order Details Section

The original design had the payment transact once the user selected Confirm Payment on the payment screen and was taken to the Confirmation Screen. 

Frame-179

In order to give the user another opportunity to review their order in detail before confirming payment an Order Details page was added. The user can edit the different order components as necessary. 

Double-check-order-details-again

Round-Ups

Round-Ups are a newly added feature for the Event Owner to add to their event experience. We wanted to make sure this option stood out well for the event-goer during their check out so we highlighted this particular section in the Order Total. 

Before

After

Confirmation Page
codicon_check-all

Confirmation Page Redesign

Frame-169
Before
confirmation-page-again
After

Changed the hierarchy in order of importance:

1. Sharing and inviting (important for business)

2. Downloading the app (important for business) and makes the user experience faster 

3. Sending tickets to others

 

Mobile Design
bi_phone

Responsive Frames

Every desktop screen needed to be designed for mobile as well. These are some examples of desktop frames with their mobile counterpart. 

Ticketing

For mobile, the selected tab is elongated to make it more apparent to the user which section they are currently viewing. 

tabs-tickets-and-more
mobile-ticketingn-tabs

Donations

For mobile, if there are more than two causes to contribute towards, a carousel is formed in order to view the different options. 

Just-donate-More-Too
mobile-donate-carousel

Merchandise

On mobile, the user can horizontally scroll to see the merch. When enlarged the pop-up blurs the background to make it more apparent it's a pop-up. 

Donate-and-roundup-scroll-again
iPhone-13-mini-133
Group-1329

Order Details

When first landing on Order Details, the user sees the details collapsed. If they want to see their information in more detail they can expand the chevron. 

Double-check-order-details-again
iPhone-13-mini-99
iPhone-13-mini-98

Wrapping-up

To reiterate what was redesigned and updated for this user flow:

  • expanding the ticketing options
  • adding a donations section and round-ups to the end of the order
  • redesigning the merch section with scrolling and the ability to ship to the user
  • expanding the order details/summary
  • updating the UI through the flow
  • designing for mobile 

Thank you!