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.

The initial ask was straightforward: reskin the product for the LA Galaxy. However, after analyzing the first iteration and diving into user needs, it became clear that this was more than a UI update—it was a UX challenge waiting to be addressed.

Mobile screens of Wayfyndr version 1

Initial Concerns

Multiple mobile screens of Wayfyndr version 1 annotated

Time-out. Who is using Wayfyndr?

To inform the design process, I identified two key user groups: sports fans and season ticket holders. The goal was twofold: create a seamless onboarding experience for first-time visitors while building a platform that seasoned fans would find valuable and return to.

Unpacking the 1.0

To better understand user pain points, I conducted quick user tests focused on two key scenarios: accessing game-day information and planning ahead. Common themes emerged:

  1. Content cards lacked relevance, offering minimal value to users.
  2. The map's filtering system was cumbersome, allowing only one item to be added at a time.

The biggest insight?

Fans were being pulled away from their experience—both on the app and during the game.

This led to our guiding question:

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

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 best.

To guide our redesign, I examined successful wayfinding apps like those for Disneyland, Universal Studios, and Legoland. Their strengths—intuitive onboarding and comprehensive navigation—provided a foundation for crafting Wayfyndr’s updated information architecture, while highlighting areas for improvement.

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

We talkin' about practice?

After synthesizing user feedback and stakeholder goals, the team focused on three main improvements:

  1. Pre-game planning. A new home page served as an entry point for users, housing everything from game-day coupons and policies to parking updates and schedules. This provided fans with key details upfront to ensure a smooth start to their experience.
  2. Making navigating as easy as 1, 2, 3. We introduced a refined filtering system, integrating it directly with the map. A horizontal filter allowed users to explore categories quickly, while content cards offered detailed information on selected locations. These enhancements made it easier for fans to find what they needed in real-time.
  3. Enriching destination details. Vendor and landmark pages were redesigned to include menus, pricing, and an estimated wait time. While third-party ordering integration wasn’t feasible, we ensured users had enough context to make decisions without missing game highlights.
Wayfyndr Wireframes
Design System

Putting on the uniform.

To prepare for testing and scalability, I developed a new design system aligned with Wayfyndr’s goal of being "sexy." By collaborating with stakeholders and leveraging mood boards, we landed on a minimal, sleek aesthetic.

Moodboard for Wayfyndr

Custom team branding was incorporated as accent colors, maintaining the platform's consistency while adapting to individual stadiums.

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 put 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.