Maps at Fanxchange
Over the summer of 2018 I was lucky enough to have Fanxchange invite me back to work on their new interactive venue maps.
I got hired at Fanxchange as a Jr. Designer in April of 2017. During my first stint between April — August 2017 I worked heavily on designing assets and copy for email marketing campaigns as well as occasionally getting to design elements for Fanxchange’s new UI. In April of 2018 I returned to Fanxchange to help them roll out their brand new interactive venue maps. I was responsible for drafting, illustrating, editing and ensuring each map was marketplace ready before sending them off to engineering and QA.
Problem: Our current maps were clunky and outdated.
Goal: Develop and build fully interactive 3D maps for every venue in North America.
Team: 1 product manager, 1 content strategist, 2 front-end devs, 1 iOS developer, myself and a Sr. designer.
What was the problem with the old maps?
Simply put…these maps just kind of suck. This sort of became the mantra adopted by essentially the entire company because well…they do. The challenge was to create our very own assets with our own branding to take place at the forefront of our user experience. But what was so terrible about these old maps you may ask.
- The maps are static, there was absolutely no way that the user could interact with these maps.
- Through our own research, we know that one of the driving factors for consumers is value in regards to how good a seat it is. These maps don’t display pricing.
- Buying tickets without knowing exactly where you will be sitting in a section or row is frustrating — you should get to see where you’ll be watching from before buying.
Solving these issues
After identifying major headaches with the current maps we began to blueprint exactly how we could fix these roadblocks.
1. Interactive maps
Of course these things had to be interactive. We did research by looking at how other industry leaders like Ticket Master, Seat Geek & Stub Hub have created their venue maps and then wrote down what made each experience good and bad. One of the main obvious things we noticed was that all of these companies maps are interactive, so making ours interactive as well would be the bare minimum. We wanted to keep up with our biggest competitors as well as introduce our own flair and brand to the marketplace.
2. Seat Value
We solved this issue by immediately showing the cheapest ticket available upon opening up an event listing. On the left side of the screen tickets are displayed lowest to highest. Furthermore, users can hover with their mouse or tap on a specific section of the venue to be shown the cheapest available tickets in that part of the venue. This helps to inform the user and to help them get the best price currently available.
3. 360 Seat Views
After choosing their desired section and row the user is presented with a fully interactive 360 degree seat view that shows them what the view is like from that specific seat. This is also an important part of the purchasing experience since it gives more control to the buyer. The user should always be able to see what they’re buying before they actually buy it.
Drafting, Illustrating & Output
When I left for school in 2017 the conversation about new maps had just begun, I was around for some of the early stages of deciding how to tackle this enormous problem. When I arrived back in April of 2018 work was well underway and I was brought up to speed quickly by a couple of the front end developers and designers. I worked closely with a content strategist and we ensured that every stadium we pushed out matched our CMS so that our inventory could populate onto our new maps. Usually for me the process looked a little something like this…
What I learned and the assumptions that stumped me.
After the process was refined it was all about pushing these things to market. We managed to complete nearly every map for the main major sporting associations (MLB, NFL, NHL, NBA, MLS & more). I personally completed over 100 venue maps during my time over the summer. Over the span of this project we had to adjust our approach multiple times. The main reason was because each venue map came with a new set of instructions. Myself and our content strategist had to be very careful since no two venue maps were alike. Each map had thousands of data points with their very own section numbers, row numbers, accessibility sections, suites, VIP areas, standing room only sections, etc. We spent hours ensuring every label created perfectly matched for seamless CMS mapping and that the shape of each polygon reflected what was actually present in the venue itself. In a case like this there is no room for small error, every row, section, and label needs to be exact to ensure that the user is getting exactly what they’re buying. Here’s some more images for your viewing pleasure.
Here in this drilled down view the user can pick and choose from the individual rows in a section. Upon selecting a particular row the user is rotated into the 3D view where they can then get a better idea of what their event experience may actually be like.
In this mode the user can now begin to imagine themselves at the actual event. On the left of the screen is the 360 degree seat view. By clicking and dragging the user can look around to get the sense of how good those seats may be. They’re also presented with some other important information like what kind of ticket is it (digital, mobile, hard, etc.), seller notes and perhaps most importantly, the Fanxchange guarantee. This is the information that ensures that the buyers tickets will arrive on time for the event.
Bonus — Heres an SVG loading animation I made during my time at Fanxchange as well, sadly it did not end up getting picked as the loading animation for use on the live site but I’m still proud of it none the less!
Getting to be a part of the extremely talented team at Fanxchange is something I will never forget. Getting to be a part of an extremely large and intricate project such as this taught me a lot about planning and just how important it is when executing big ideas like this. Multiple times we had to change our approach to how we would launch these things. We assumed that a lot of the data would be similar between venues, this was an enormous assumption that led us to having to fix our process multiple times. In the end however, we figured out that working on these maps one at a time and treating them all like a brand new task was the way to go. What we ended up with were some beautiful maps that all reflect how each of these venues actually look in real life. A huge thank you to the entire Fanxchange team and special shoutout to the product team for being so great to work and learn along side. All the best!
And of course if you’d like to see this work live and in action you can click this link here and go to any event for any major league sporting team! :)
(also, why not buy some tickets to see your favourite band or sports team while you’re at it…couldn’t hurt right?)