Project Brief

Exploring designs for an MVP buyer checkout experience to purchase additional items (like hoodies, vinyl, parking pass, after-party pass, etc.) while buying tickets to an event.

MY ROLE

User Research, Ideation, Prototyping, UI/UX and User Testing

Background

Introduction to the Platform

Universe is the world's destination for finding and creating experiences. It is an event platform where event organizers can use tools to help manage their events and attendees can find and create memorable experiences.

The platform host events ranging from, festivals, and live shows to workshops to conferences and have worked with clients like TedX, TechCrunch, and Red Bull, selling millions of tickets all over the world.

Internship Overview

From mid-April to mid-June 2018, I had the opportunity to intern at Universe as a product designer. Throughout my internship, I worked closely with Tammy Kitt, the lead designer on this project, and my product manager, Irfan Ibrahim, and my team to help explore and create design concept prototypes for an MVP version of the buyer checkout experience for selling add-ons on the Universe platform.

During my eight weeks here, my responsibilities for the project included, understanding the current checkout experience for ticketing, finding opportunities to sell add-ons, iterating on designs to add this new feature, user testing to validate my prototypes, and delivering design concepts to my team for further development.

This internship gave me the opportunity to closely collaborate with designers, product managers, and engineers in my team, while also getting weekly feedback from design team critiques. Under the supervision of my design director and product manager, I also had the chance to prepare a facilitator script for setting up user interviews and putting up prototypes for user testing to validate my assumptions, iterate on feedback, and present my final solution for future iterations.

Understanding
the Problem

During this process, I brainstormed with my team in understanding the challenges that buyers face when purchasing add-ons.

Our team started with market research by interviewing the past, existing, and potential Universe clients, and doing some competitive analysis to gather insight into the problem.

Let’s start with understanding the problem scope for the two different target audiences:

Event Organizers

Event organizers currently sell different additional items for ticket buyers such as CDs, T-shirts, food tickets, parking, workshops, and after-parties. Currently, organizers have been solving the problem in a variety of ways:

Selling add-ons as ticket types
Hosts are currently selling add-ons as ticket types. This method can get confusing for ticket buyers may end up purchasing a parking spot for the wrong day.

Using other e-commerce websites for sales
This method has resulted in low sales because of multiple purchases and the hosts also have to reconcile data across multiple systems.

Relying solely 100% on onsite sales
Hosts selling additional items only at the event onsite to avoid having to use a separate system.

Creating a separate Universe event
Hosts have created a separate event just to sell add-ons, this has low discoverability, and low sales results because of multiple purchases.

Managing availability per-event
Hard to keep track of what add-ons are popular for different event types, in order to make sure event organizers have stocked their inventory.

Buyer / Event-Attendees

Some of the main problems that buyers face when purchasing add-ons for an event:

Have to make multiple purchases
If organizers set up two different accounts, buyers have to make multiple purchases making them less likely to buy add-ons.

Not knowing if the event is selling add-ons
If the event is selling add-ons elsewhere, there are chances that the buyer would miss the fact that the event is even selling add-ons.

Carrying cash to purchase it on site
For events that only have a cash-only option for add-ons (like concerts and festivals), it reduces the chances of buyers making a purchase onsite.

Risk of no availability onsite
Having to wait until the last minute, the buyers run into the risks of items being unavailable, sold out, and running out of desired sizes or options.

Unable to properly plan for the event
Allowing to buy add-ons like, parking passes or workshop passes, allows users to plan their events in advance.

User Discovery Insights

To further understand the motivation, preferences, and goals of our buyers, I prepared a list of questions and set up a survey on usertesting.com to get some qualitative insight. This survey was really helpful in understanding what people think of add-ons and what drives them to buy add-ons for an event. Some of what these interviews uncovered were:

About 80% of the users preferred to purchase physical merchandise on-site, on the day of the event (especially any sort of clothing item or wearables). They described purchasing add-ons as a part of the event experience. Although most of them referred to concerts and festivals, Universe hosts many other types of events.

"It's more like a part of the event, like something you got there rather than something ordered online and had before (before the event)."

"You can't tell from the picture if it'll look good on you or if it will fit well."

“I feel like I avoid like shipping or extra fees when I buy it in person.”

Only about 26% of the users showed interest in purchasing physical merchandise online, before the event (in advance). Some people have experience in purchasing bundled tickets that come with add-ons, in the past.

"I'm always looking for parking before I go to events and googling the actual one you were in checking it out and getting tips. I like to be prepared, so yes, I have purchased additional products for an event that I have attended in the past."

About 84% of the users showed interest in purchasing additional products (like parking, campsite, workshop pass) online, before the event (in advance). Where about 10% of these users have purchased parking in advance for the events they attended in the past.

"Would definitely get them beforehand. Not being able to get one of these can interfere with your plans."

"I'm always looking for parking before I go to events and googling the actual one you were in checking it out and getting tips. I like to be prepared, so yes, I have purchased additional products for an event that I have attended in the past."

The Opportunity

Design Challenge

Simple

How might we add the ability for buyers to purchase add-ons in the current check-out experience that is intuitive and simple to follow?

Efficient

How might we allow buyers to quickly assign an add-on to a ticket holder?

Transparent

How might we provide a more transparent experience that allows buyers to clearly see different taxes that are applied to tickets and add-ons in their order?

Setting Goals for MVP

For the MVP version of the buyer experience, our team listed down the core goals that we wanted to focus on. This was helpful to plan my next step for breaking down the current checkout process and iterating on prototypes to user test.

My main focus for designing the MVP flow were:

• View and purchase add-ons in the same transaction as a ticket.

• Be able to assign add-ons to a ticket holder.

Current Checkout Flow without Add-ons

Understanding the constraints

To better understand the core user needs, our MVP product goals and the development constraints, I started with listing down a couple of questions to ask my team. These questions helped me get a deeper understanding of the flow and guided me through the iteration process.

• Should we call them ‘add-on’ or ‘product’? Do people know what add-on means? (In my prototypes I call them products but we later decided to use add-ons).

• What would be the most effective way to showcase the add-ons in the checkout flow? Should I show them along with tickets (same screen) or after ticket selection (next screen)?

• Currently, buyers can assign tickets to other attendees, how can we leverage that allows the buyer to assign add-ons to other attendees as well?

• Like ‘Ticket Information’, how and where would buyers input additional information for add-ons, like size, colour, etc? Do we want to focus on that for our MVP or keep it simple?

• Do we show images for add-ons? If yes, what would we use for something like a parking pass or a workshop class? Can we design a generic icon to showcase non-photo add-on item?

• How are we showing the breakdown of taxes? Are the taxes applied for add-ons different from tickets? How can we make that clear and transparent in ‘Your Order’ section?

Iterations

After research, I started with iterating different layouts to display add-ons. During this stage of the process I was tackling the UI and UX challenges on how to best display add-ons under the constraints of the current checkout flow. The add-ons section would only appear on the checkout flow if the event organizer is add-ons in addition to tickets. In version 1, I was trying to iterate on:

• Where in the flow should ‘Select Add-ons’ be placed?

• What would add-ons with photos look like? How can I show add-ons with and without a photo?

• Where do I ask for additional information?

In the design below, I was thinking of how can users expand the image and learn more about the add-on. Here I iterated on a two-step process to view add-ons at an individual level.

The reason why this solution didn’t quite work was because it required a lot of back and forth if a buyer is browsing multiple products. The interaction is also complex since we are in modal, can get confusing for users to navigate. The layout also wouldn’t work for add-ons with longer names or no images.

In the left iteration below, I wanted to explore the option of merging the tickets and add-ons in one screen. The tickets and add-ons are collapsible. The solution didn't quite work as if the host has a large number of tickets and add-ons, it would make the scroll very long and it would be hard to paginate the content.

In the right one, I was exploring to condense the options and use the dropdown to show more info on each product. Here I was trying to reduce the image size to make the buttons smaller. This layout didn't quite work for products that don't have an image.

For the iteration below, we decided to separate the add-ons after collecting ticketing information and using the ticket information filled out for each person (name and email), and allowing users to assign add-ons for each individual attendee. I also explored a no-images version of the prototype.

We felt confident with this UX, so I further developed this prototype, refined the UI, and prepared it for user testing to get validated.

Final Deliverable

After multiple different iterations, user testing, and iterating, this was my final deliverable for the project. I handed over my design to my lead designer who continued to iterate on flow after I left. During my eight weeks here, I was able to analyze product problems, find opportunities and design a feasible MVP solution for my team. The add-ons flow is now live and the team decided to use no images to simplify the MVP.

User Testing

After prototyping a couple of iterations, I had the chance to set up multiple user tests on usertesting.com and validate my final iteration. This step of the process was really exciting to see the results and see how people navigated through the checkout process.

• Overall, most users used the following words to describe their complete checkout experience - excellent, simple, straightforward, clear, intuitive, quick, and easy.

• Users that were able to complete the flow generally liked the assigning feature and found that it could be a very useful feature. And liked how it was pre-filled for them and was also mentioned on the order summary so it helped them understand what item to remove when making a decision.

• Multiple users assumed that after selecting all the drop-downs on the 'Select products' page the product would automatically get added to the cart (like we have for tickets). They didn't press the 'add to cart' button. There is a slight learning curve. Once they figured out how to add the first item, they were able to add all three items to the cart successfully.

Additional Projects

During the internship, I also had the opportunity to work on some exciting extra side projects with the Universe marketing team. I followed the established design guidelines and visual design layout set by the lead marketing designer, Juan Beltran, and assisted in designing the following two landing pages.

Next Steps

My experience at Universe was really rewarding and educational. It was my first time designing for real users, I learned a lot about agile design workflow, thinking about business goals, feasibility, and technical constraints when designing a product, research-driven design, rapid prototyping, and time management. It was really exciting to work on a real product and help make a small contribution to the final design of the checkout experience. I am really excited to see how the product develops and advances in the future.

For version 2.0 for add-ons, I envision some of these areas to become a more robust product in the future:

• Incorporating photos for add-ons and creating a scalable solution that helps address edge cases (like add-ons that don’t require images, for example, parking passes).

• Allowing more than one custom option for each add-on. So currently a host can only set one custom option (let’s say size), So the organizer has to make multiple listings for all the same t-shirts but different colors. But if we had two custom options, a user could set one as size and the other as color and it would reduce the number of listing and organization.

• Allowing users to input additional information (like size, color, etc) for each item during checkout.