Wayfyndr Map Mobile Screen

Take me out to the ball game

How I helped guide fans around the stadium

Wayfyndr is an all-in-one solution for the ultimate sports fan. The product is used to help users efficiently navigate a stadium. It shows users what they need from vendors to seats to landmarks. At first, it started as a task to update the UI of the product for another sport team, but it quickly changed into a UX problem after dissecting the first iteration.

While at Harlo Interactive, I was the lead product designer for Wayfyndr and worked with other stakeholders on our sports fan's problem: how might we help fans make the most out of their game-day experience? It required a lot of testing and research, but my team and I create something accessible for all sports fans and scalable for other stadiums. It helped fans pre-plan their game day and kept them returning for more. After completing this redesign, more stadiums have become more interested in adopting Wayfyndr.

Getting familiar with the first version.

Before we dive into the details, the initial request was to reskin the product for another team, LA Galaxy. However, after becoming familiar with the requirements and experimenting with the first iteration, I identified some areas that could be improved.

Mobile screens of Wayfyndr version 1

Initial Concerns

Multiple mobile screens of Wayfyndr version 1 annotated

Time-out. Who is using Wayfyndr?

To make sure who I needed to get a second opinion from, I had to figure out who were my users. After getting more context from the co-founder, there were two main audiences that we Wayfyndr wanted to focus on: the sports fans and seasonal ticket holders. I had to make sure that it was easy enough to onboard first-time sports fans, and at the same time, be a place that fans wanted to come to and continue to use.

Unpacking the 1.0

After dissecting the first iteration, I wanted to see what sports fans actually needed. I did some quick-and-dirty user tests with a couple of users. When doing these, I tried to determine if they could get the information they would need if they were at the game and the information, they would need to pre-plan their game day. There were some commonalities that surfaced across the different participants.

  1. Content cards usually offered users no value regarding whether key policy information or venue guidance
  2. Feeling frustrated with the map filter and how it only allows users to add one item at a time

However, what stood out the most was that:

Fans are often led away from their experience, whether it is from the web-app or the actual sport game.

So then, we thought...

How might we help fans make the most out of their game day?

After unpacking Wayfyndr, this was its main selling point. The first iteration was able to do this, but not in the most efficient or accessible way. There was also no reason to return to the site except for the event day. So, my team thought about how we can make the game day experience as seamless as possible. After sharing all this information with stakeholders, this quickly shifted our focus and became the main priority.

Competitive analysis

Learning from the successful.

Before diving into explorations, I tried to learn from other way-finding services. For a reference, the co-founder mentioned the Disneyland app was their first inspiration for the first Wayfyndr version. I then looked at other similar popular amusement park apps: Universal Studios and Legoland. This was mainly because they already built out a comprehensive wayfinding system and were recognizable to a larger audience. So, using some similar patterns could be used to our advantage since onboarding users should be intuitive. I found that each experience had its strengths and areas of opportunity.

I tried to apply their different strengths and pay close attention to their areas of improvement when building Wayfyndr's information architecture.

A competitive analysis table between amusement park mobile apps
Ideate & Iteration

We talkin' about practice?

To give me some guidelines, I wanted to focus on three different areas that were identified by my team and stakeholders after looking at my testing results: This home page would house everything from game day coupons and discounts to updated policies and parking lot closures

  1. Pre-planning the game. I want to give fans an entry point to the stadium and the web application. So, I introduced a home page that guided users on what they should do first. From game day coupons and discounts to updated policies and parking lot closures, this home page would house it all.
  2. Making navigating as easy as 1, 2, 3. To do this, I created a bridge between the filter and the map. I added a horizontal filtering list displaying all available categories for the map markers and content cards that would appear on the screen when a map marker is selected. Also, it was important to include a fleshed-out filtering system that would further give users more control to curate what they see. All of this would help users quickly identify different key locations.
  3. Assigning relevant information for destinations. It was key to create a refined "product detail page" for the stadium vendors and landmarks. Specifically for food stands, I added their different menu items and created a CTA where people can order. I tried to build more value to the service that's offered at the venues, which also addresses the modal issue in the first iteration.
Wayfyndr Wireframes
Design System

Putting on the uniform.

To prepare for more rounds of testing with our 2.0 version, I revamped the initial design system. But before starting, I had to figure out what Wayfyndr had envisioned for this product. They emphasized making it 'sexy.' Honestly, it was a little broad, so I created different mood boards of what that could mean. Then I asked them a series of questions to understand what 'sexy' is with the mood boards as visual aids to help identify aspects they like and don't like. I found that they wanted something minimal, sleek, and clean.

Moodboard for Wayfyndr

So, then, how do we apply this design with the branding of different team stadiums? To solve this, I ended up keeping the integrity of the design of Wayfyndr, but using the LA Galaxy team brand colors as accents to help make it feel like it's an extension of the stadium.

Wayfyndr LA Galaxy design system
Final Designs

Plan, explore, and enhance in one product

Based on the first iteration, fans loved the idea of having a pocket interactive map handy to navigate at sporting events. However, they struggled to find concessions or landmarks efficiently.

I set out to explore three aspects of our larger idea to give the fans the experience they're looking for. We stress-tested these ideas with a mix of casual sports fans and seasonal ticket holders. People loved our new approach to game day planning and touring stadiums digitally.

The result is a product that elevates the fan experience from pre- to post-game. In turn, this helped the fans find what they're looking for, while keeping them immersed in the action.

Interaction of Wayfyndr
Two mobile homepages of Wayfyndr LA Galaxy
01.

Before the kickoff.

With the home page, users are welcomed to the stadium. It provided content cards with information that's valuable to the user, like about events, deals, and more. It also alerted users when there were policy changes or any other immediate need-to-know information.

As a result of our test, we found our user needs more actual game information. So, we added the team schedule in the forefront, along with the latest-home match with its date and start, gate, and kick-off time

This page was a great way for users to get familiar with what's available in the stadium.

02.

Finding the right vendor.

This is what Wayfyndr is all about, navigating the stadium to find what they're looking for. The best way to do this was by leveraging the stadium map to give an overview of everything and providing filters alongside to orient users. However, this looks a little different from my initial idea.

After learning about our limitations with implementing a horizontal filter list, I had to refine our filter page. When clicking on one of the filters and a map marker, a content card would appear on the screen. This was an essential feature because it gave users more control to curate their search. It, ultimately, helped fans efficiently identify key locations and take them where they want to be.

Mobile filter page and map page of Wayfyndr LA Galaxy
Annotated product detail page for Wayfyndr
03.

Keeping fans immersed & informed.

I found that users needed to be informed of the destinations they were visiting, so I created a vendor page that was filled with details. It provided all menu items and a CTA to an external link where users can order online.

After testing, users expressed that they didn't like the fact that the third-party link to the vendor was taking them out of Wayfyndr. This was what we were trying to avoid. However, due to some limitations, we couldn't add a feature where the user could order directly from the app. To combat that, we added an estimated-wait-time feature and some other information, such as price, location, and more.

After some additional tests, we found that this was enough information for the user to go get a drink or snack during the most optimal times without missing more of the game.

Result & Learnings

The endgame.

Overall, we were successful in solving our challenge of keeping the sports fans engaged. All of these improvements are bringing in positive gains for the fans. The LA Galaxy organization have experienced a consistent rise in platform adoption and engagement since partnering with Wayfyndr, with an average of 2,000 views per home match and 5.5 pages viewed per user during the first season alone.

Looking back at it, there wasn't a lot of user research coming into this process. As I worked on this project, I learned that it stressed the importance of usability testing, not just once, but multiple times. It may pt additional time and resources, but it is worth it to see an idea being validated through users' feedback.

Although this experience was a success, I'd love to come back to explore the inline filter even more to reduce the browsing time for the next vendor. This is to build an even stronger connection between the map and the filter. Additionally, taken from one of the notes from our user tests, I want to explore the estimated wait time information concept so that users can place an order from and not be taken to another site to order. Lastly, I think continuing to explore the idea of how users would use Wayfyndr post-game could give them a 360 experience from beginning to end. It would be nice to wrap up their time with a nice little bow by either giving them a highlights reel of their evening there.