Falling through cracks in UX design

An evaluation of my experience buying a concert ticket online

A few months ago I saw one of my favorite DJs, STWO, play a live show in San Francisco. Although he and the accompanying DJs put on a praiseworthy show, I’m writing about the tricky process of buying the ticket online.

I was inspired to pen this in part by UserOnboarding. However, instead of breaking down a single app’s onboarding, I want to guide you through my experience across multiple sites. I measure everything by how easy — and how frustrating — it made the entire process.

“Don’t make me think” -Steve Krug’s first law of usability

Many common computing tasks we perform on a daily basis are not easy and straightforward. Yet, the best user experiences are those that reduce cognitive load, allowing you to quickly and intuitively make your computer do what you want it to do.

The tickets were in the computer

In the case of buying tickets, the most fluid experience (with current consumer technology) might go like this:

  1. I ask Siri to buy me a ticket for the show.
  2. I confirm the show’s date, price and location.
  3. I’m notified that a ticket has been bought and can be found in my Passbook (known as Wallet in iOS 9).

Ideally this would take less than 30 seconds. Can you believe that it took me about 5 minutes?

When it comes to user experience, generally, less is more:

  • Less time > more time
  • Fewer steps > more steps
  • Less thought > more thought

In this case study, I identified two overarching issues:

A. Too many steps

I navigated through 4 different websites and a total of 12 screens from beginning to end:

  1. Google search
  2. Google results
  3. SoundCloud: artist page
  4. Songkick: the artist’s events page
  5. Songkick: the event page
  6. Eventbrite: order page
  7. Eventbrite: finalize order page
  8. Eventbrite: home page
  9. Eventbrite: login page
  10. Eventbrite: home page
  11. Eventbrite: finalize order page (refreshed)
  12. Eventbrite: order complete
A child in the midst of a bad UX

Moving through all these screens is taxing and bad for business. It introduces the possibility that I might not actually purchase because the process is circuitous. It’s well documented how e-commerce sites have a hard time closing sales. And it’s not a stretch to attribute part of this problem to the experience being too complex, or taking too long.

Buying tickets affects me initially, but it has implications for the artist, venue and organizer too. If I get stuck and give up, everyone loses. But if I do make it through, and the experience is unpleasant, this might subliminally affect how I feel about the artist or venue.

B. Too much thought

Most of the time when people use the Internet, they’re scanning the screen for the link or bit of information that will advance them in their quest.

From the start (my Google search), there was no clear way to buy a ticket, so I fell back on my ability to navigate through web pages.

When you’re a meme

There were cases where a sites visual hierarchy slowed me down, or their interface elements didn’t properly convey expectations.

It’s worth noting that I consider myself a fairly advanced computer user, and have prior experience with these sites. Some of my analysis comes from thinking on behalf of less experienced users, and the problems they might encounter.

Below are screenshots of the pages I navigated through. I recorded my initial thoughts and have done my best to recreate the flow, as it happened.

1. Google Search

You’ve probably done one of these before.

2. Google Results

These are the same results I got on the day of purchase

I’ve used SoundCloud before and knew that it supports listing Songkick tour dates on profiles, so I chose that result.

However, another user without my prior knowledge may have tried a different link. As it turns out the only other viable option shown here was Facebook, whose “Tour Dates” link was hidden away in a menu. Twitter and Bandcamp were dead-ends if you wanted a link to show dates and/or tickets.

Looking back, I may have had more success by Googling something more specific, like “STWO tickets”. On the other hand, I’m wondering if a result to the ticketing site could have shown up near the top of the page. Google has the capacity to serve up time and location based results, and it would have saved me a few steps.

3. SoundCloud: artist page

Because I know what Songkick is and can recognize their logo, it only took a few seconds for me to pick out where I needed to click on this page to move forward.

However, for someone without this knowledge, this screen doesn’t present information in a way that makes it easy to find tickets. The Songkick section should be afforded more visual weight since it can convert listeners into paying fans.

4. Songkick: the artist’s events page

NOTE: Because the STWO show has already passed, I am showing the rest of the process with another artist whose tickets were purchasable through the same flow with Songkick and Eventbrite.

This is the same layout I got for STWO on the day of purchase

I initially gravitated to the “Upcoming concerts” header, and I clicked the “Buy tickets” button in this area. This link took me to the particular event’s Songkick page, not the Eventbrite page which — unbeknownst to me at the time—created an extra step in the process.

I didn’t catch this at the time, but Songkick recognized that there was a show near my location and presented the “Tickets on sale near you” section, — very thoughtful! I retraced my steps later and learned that the “Buy tickets” CTA button in this section points directly to the seller — Eventbrite, in this case.

Notice how the copy on the button I chose is misleading—it should say something like “See the event page” since that’s where it actually leads. There should have been a clear distinction between choosing to buy tickets and choosing to view a particular event’s page.

Also, I think the “Tickets on sale near you” section should be styled to stand out more since it’s presenting uniquely relevant information. This could be done with a different background color, a colored border, a larger header, etc. It definitely would have improved my chances of noticing it.☺

5. Songkick: the event page

Here, my choice was easy: one green CTA button in plain sight (you know, green means GO).

6. Eventbrite: order page

I thought: “Cool, another easy one”. I scrolled down the page, clicked the drop down, selected 1 ticket, and clicked the “Order Now” button.

7. Eventbrite: finalize order page

Here’s where I got tripped up.

I saw all the input fields prompting me for my information and froze. I thought: “Wait—doesn’t Eventbrite save your information so you don’t need to enter it every time?”

After a few seconds I figured I was probably logged out of my account. I looked in the navigation bar, expecting to see my login state… but it was empty! The nav contained only the Eventbrite logo. I scrolled down the page looking for a log in prompt—nothing. I still didn’t know if I was logged in or if, for some reason, I needed to manually fill out my information for this event.

Looking back, I got stuck here because I didn’t notice I was logged out on the initial order page — I was too focused on picking out my ticket and moving along.

Still, I have to wonder—why wasn’t there a log in prompt near the “Order now” button? Or above the information fields on the finalize order page? This would have created a choice: either log in now, or fill out the entire form.

I imagine Eventbrite stands to gain valuable information about what events people are into, and would encourage users to buy tickets when they’re logged in. I’m unsure why the navigation bar wasn’t showing my login state.

Meanwhile, a timer was counting down to when my tickets would become unavailable, so I opened a new browser tab.

8. Eventbrite: home page

Ah, there we go—a familiar pattern☺. I clicked the log in prompt on the right side of the navigation.

9. Eventbrite: login page

You know the drill.

10. Eventbrite: home page

After logging in I was redirected to the home page. I closed the tab.

11. Eventbrite: finalize order page (refreshed)

I refreshed the page and found everything filled out for me, as I had hoped. However, the navigation bar still didn’t indicate my login state.

I clicked “Pay Now” and…

12. Eventbrite: Order completed

…got my order confirmation.

Closing thoughts

Clearly, there are things I could have done to reduce the number of steps, like a more specific Google search, or scanning the pages more closely. I realize that getting this ticket wasn’t that hard, but the process had its flaws and could still be optimized in small ways. I think my observations illustrate the importance of user-testing designs with specific flows and goals in mind.

As the major player in Search, I see this as an opportunity for Google. It seems like they’re heading in that direction with Google Now, but I can’t predict how difficult it would be to source links to the ticketing pages for nearby, upcoming concerts related to a search (or if this feature is even a priority).

Even if it’s not their fault, a lot of people will blame themselves when they get stuck on a computing task — which is unfortunate. My hope is that more people will start asking questions when they’re using software: “Why does it work that way? Why is it not like this?”. More conscientious users will lead to higher design standards and, ultimately, more approachable products. Wouldn’t that be nice?

P.S. Looking for a usability consultant with design experience? Or just want to chill and chat over coffee? Let’s get in touch.