Evan Palangio.

Fanxchange is a ticket marketplace. Their maps are the heart and soul of their user experience.

Responsibilities

Content Provisioning, Prototyping, Interaction Design, UX.

Company

Fanxchange

Contract UX Designer
Timeline

Six Months

04.18 - 09.18

Fanxchange wanted to develop and build fully interactive 3D maps for every venue in North America.

New Maps

Fully interactive, seat value/prices displayed on map, branding used, 360 Seat views, 3D venue views, Hell yeah!

Old Maps

Static, clunky, no seat prices shown, no visiable brand identity, no context, no good.

But first we had to try and
understand what was wrong.

Myself along with 2 front-end devs, 1 content strategist, another designer and 2 software engineers were the main team involved with building Fanxchange's new maps. The first step was reaching out to our Customer Service team and trying to come up with a list of consistent complaints from our customers. We read, listened and reviewed hundreds of customer concerns about our maps. These were some of the most frequent things mentioned:

“The tickets I bought were in a much different spot than I thought they were going to be.”

“The tickets I bought made me think I was going to be much closer to the stage because of your maps.”

“Why was the price I thought I was going to pay different at the end?

“The map on your website is missing sections from the real venue.”

“I bought what I thought were the cheapest tickets but after I bought my tickets I found cheaper ones.

Once we knew what was
wrong we began to fix it.

We needed to reflect both the User and business wants and needs. So we set some goals:

1. Design a reliable and easy to use interface that does not try to confuse or "trick" users.

2. Incorporate new company branding to strengthen Fanxchange’s image.

3. Lead the industry by creating the most seamless ticket purchasing experience.

So here’s what we did...

Consumers want context when they’re buying tickets.

Through numerous CS calls and interviews we learned the number one driving factor for our customers was seat value. Of course customers want the best seat available at the best price point. They also want this info to be easy to find.

More Context

Many people told us that the seats they bought were not what they had expected. We added individual row drill downs to give the user more information about their desired seats.

More Interactions

Being able to mouse over and zoom in on sections, allows for quicker selection and decision making. Comparing prices on the fly is easier when the user has full control.

More Transparency

Users shouldn’t be shocked when they get to the final page of a checkout. We made the purchasing process as transparent as possible. We added a toggle that lets users see EXACTLY what they will pay once they arrive at checkout.

So how do we ensure consistency when every venue is so different?

After a busy year discussion and research, the conversation about how to build and deploy our new maps was nearly finished, Myself, two front end devs, another designer and a content strategist put the finishing touches on what would become our game plan for the next 6 months.

Illustration & Drafting.

I spent a lot of time at this stage of the process ensuring that the necessary row and section data was present in the maps. Confirming seat by seat that the geometry for rows and sections reflected what was true to life was of the up most priority.

Labeling & Output.

After ensuring all the data was correct, the maps were run through a script to be labeled. I aligned some of the labels manually and then added any necessary corrections before applying styling. Along with our Content Strategist, we would meet one last time to double-check everything was absolutely perfect before sending the map into production.

And we did struggle! But we learned a lot through all of this.

Familiarness needs to be
in every interaction.

Every single map we worked on had a separate set of mini instructions and required lots of individual attention. Rows, sections and VIP areas all needed to reflect what was true to life.

Not Real Life

While the above image may only reflect a small change to the map in the mind of the customer, this change had huge effects on how our users went about buying their tickets.

Real Life

Numerous complaints from users mentioned that the maps we were using did not actually reflect the real venue. We fixed that by shaping all the section and row geometry to be true to life.

Context, context & more context.

Small interactions that could add more context were the most powerful. What if users could choose the sections or rows they were most keen to purchase and be shown the cheapest option of all their selections? What if they could see where they were going to sit before they got there?

360 Seat Views

One of the most chanted complaints from users was that their purchased seats were not what they expected. By adding 360 seat views we could give context and more importantly, control to the user.

Price Compare

Another major complaint from users was the inability to compare seat prices quickly and easily. We added a function that allows users to select sections or rows and be shown the seats with the best value available.

Feel like this wasn’t enough for you? You can read my full case study on Medium.com.

Local Eyez

Way finding mobile application for Europe's displaced nomadic refugees.

Read More