Content Provisioning, Prototyping, Interaction Design, UX.
Fully interactive, seat value/prices displayed on map, branding used, 360 Seat views, 3D venue views, Hell yeah!
Static, clunky, no seat prices shown, no visiable brand identity, no context, no good.
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.”
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
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.