~ An Overview

The Problem

FanThreeSixty offers data-driven solutions to create the best possible experience throughout every aspect of a sports fan's journey.

50% of the fans who were new to the Sporting Kansas City app would install it, but after the first or second game, they would delete the app resulting in continued user drop off and loss of capital for Sporting Kansas City.

The Challenge

Due to this, I was asked to be part of a summer associate team focused on creating a solution to improve user engagement and preventing new user dropoff.

We were asked to focus on sharing the newer features and options in the Sporting Kansas City app with new users. We kicked off the project using the following problem statement:

How might we improve user retention by enticing Sporting Kansas City fans to use the app during and after soccer matches?

Pausing for Clarity

1.   Researching the Problem

A Cognitive Walkthrough

Before diving in, we wanted to understand how fans used the Sporting Kansas City app. We began the project with a few cognitive walkthroughs from new and current app users, then interviewing them.

We learned that new users were dropping off of the app for two main reasons:

• New users couldn’t find what they wanted to see because of the multiple avenues of content
• Most new users were primarily focused on matchup stats not scanning tickets or ordering food

A Competitive Analysis

To better understand how we could improve the app, we analyzed similar apps that helped share soccer content with users, such as the LA Galaxy, Sounders FC, and New York City FC apps.

We found that in comparison to other apps, the Sporting Kansas City app was a bit challenging to use. There were plenty of features, but there was a lack of clarity for finding and using the features.

2.   Ideation

Understanding the Fans

After honing in on the pain point we wanted to solve, we sat down and created a user persona and discussed what we could do to help new fans better understand the app. Our primary ideas were targeted communication cards and simple notifications.

We discussed our ideas and decided on targeted communication cards since they would provide a more straightforward approach to helping each user learn and understand the app’s features.

Dissecting the User Journey

We looked at the Sporting Kansas City app's current user journey to understand why new users were missing key aspects of the app.

As you can see below, users struggled to find different content within the app because they were hidden or not straightforward.

Sketches

The team and I discussed the potential approaches for onboarding new fans. I made a few sketches of the app’s home section. This helped us to visualize our design decisions before wireframing and testing.

Wireframing

Once we had a key idea of our users and the best approach for the app, I created a few wireframes showing what targeted communication cards could look like.

This helped the team and I iterate on the onboarding options and hash out the look of the prototype for testing.

3.   Prototyping & Testing

Designing the Prototype

Using the sketches and wireframes, I designed the initial prototype for testing. I used Sketch to design and InVision to prototype because of the ease of understanding and lack of a learning curve for my teammates.

Interviewing & Testing with Users

The team and I tested our prototype with newer users of the Sporting Kansas City app to understand how targeted communication cards would help them understand and become familiar with the app’s content.

Testing helped us improve our design and gather unbiased feedback from each user we tested with. We heard the following:

"I’m not sure where I need to tap and how it makes the app any better. I wish there was a way to know where it would take me before tapping."

"I like how it shows me what features are in the app and explains them. It’d be nice to see more of an explanation for each area, though."

4.   The Final Design

Redesigning from Feedback

By utilizing the feedback we gathered when testing, we understood what parts of the design needed improvement. We understood what parts of the design that would benefit each fan’s experience and what hindered it, helping us easily refine the design.

We made the calls to action clearer and added a description for each communication card. Our goals were to help new users clearly understand the app while making it easier to explore the app’s features and content.

Testing the Final Design

The team and I tested our changes with a set of users that hadn’t tried the app and a set that we previously tested with.

We learned that the new changes helped bring more clarity to each part of the app. Through targeted communication cards, new users better understood the app’s features and felt the cards would help them use the app more often.

"The text and buttons are much more helpful. I feel like I know what to expect when tapping on each area.”

"As a newer user of this app, I feel relieved that there’s some guidance at the start. I didn’t know what I was doing with the original app.”

The Final Designs

We shared our findings with the design team and explained how targeted communication cards helped draw users in while learning more about the app's features.

      ➤ Take a look at the final prototype

Pushing to Staging

Our designs were pushed to the staging app before release, and we saw how they would populate for new users of the app. Unfortunately, Sporting Kansas City and FanThreeSixty parted ways before our designs could be pushed to release.

5.   Reflecting

Looking Back

This project was an incredible experience that was full of firsts. This was the first time I worked in a company setting and on a small team tackling a problem. I learned many different approaches to the design process and the importance of working with multiple people on a team. However, I also dealt with a few struggles throughout the project, which helped me grow as a designer.

What I Learned

As the sole designer on a small team, I learned how important it was to communicate with my team members who didn’t know much about the design process.

This ensured that we kept the user in mind each step of the way during the design process. Clearly sharing my findings when interviewing users helped solidify our decisions when we struggled to move forward.

What I Would Do Differently

Throughout the course of this project, I relied on my understanding of the design processes a bit too much. Occasionally, I was hesitant to reach out to other design team members or associates who could help.

While it took me a bit to move forward because of this. I realized that it wasn’t the right approach, and it doesn’t hurt to ask for a bit of help or guidance when needed.

Since this, I’ve changed my approach when working on projects and ask for guidance when I get stuck in similar situations.

Thanks for Reading!

I appreciate the time you’ve taken to read through my case study to get an understanding of my process. If you have any questions about my time at FanThreeSixty, please reach out! I’d love to discuss it with you!

Back to All Projects