Sounder FC App
*Case Study*
Seattle Sounders FC is a Major League Soccer (MLS) club out of Seattle Washington. With one of the most popular and profitable franchises in MLS, it is necessary for the Sounders to have a functioning and intuitive app for fans to use when purchasing and managing tickets.
Role
Duration
Task
User Researcher, Interaction Designer
Two Weeks
Find inefficiencies through user research and restructure the app to comply with current iOS standards
Brand
Seattle Sounders FC is an American professional soccer club based in Seattle, Washington. The Sounders compete as a member of the Western Conference of Major League Soccer(MLS).
Problem Statement
Sounders fans have difficulty finding team and game information, getting real-time updates, and using the ticketing function within the existing Sounders FC app.
Solution Statement
How can we update the existing app with a functional layout that conforms to updated iOS HIG and streamlines the ticketing process and provides real-time gamete updates for a smoother and more engaging fan experience?
Research Methods
Several research methods were used for this project to help us narrow down a user persona and potential areas for improvement within the existing app. These areas include: heuristic analysis, competitive analysis, contextual observation, screener survey, user interviews, and affinity mapping.
Heuristic Analysis
Competitive Analysis
Contextual Observation
Screener Survey
User Interviews
Affinity Mapping
Method 1: Heuristic Analysis
In my heuristic analysis of the existing app I noticed several oddities right away. Noticeably there was lots of information upfront (probably too much) and non pertinent elements (games) that seemed to distract from the main purpose of the app. Visually the graphics and layout seemed to be sub-par from what I expected to see as the current layout doesn't conform to the iOS HIG with a missing tab bar and the use of a hamburger menu in the upper left corner (which is currently more prevalent on Android devices). Additionally, load times seemed to be slow and clunky, or failed to load at all. Upon further investigation I noticed that many of the features were just web pages that were being brought in and cropped to fake (unsuccessfully) a native environment.
While using the lineup function in the app I uncovered another critical functionality mishap. If you tapped in the wrong spot, or reloaded the screen (by using the iOS swipedown method) you were able to move from the field interface all the way to Southern New Hampshire University's webpage. As one could imagine, this presents a huge continuity and potential drop-off problem for users.
Method 2: Competitive Analysis
During the competitive and comparative analysis I examined more heuristics common to different apps competing in the same space as the Sounders App. A common element among all apps surveyed presented that they all conformed to the iOS HIG with the navigation tab bar at the bottom.
I examined four other MLS apps (LA Galaxy, Vancouver Whitecaps, Toronto FC, Atlanta United FC) as well as several other apps from varying sports (MLB, NFL, ESPN, and MLS). Several of the key findings were that:
-
All apps (without fail) used the iOS tab bar and functioned in a smooth and efficient manner.
-
With one exception, they all performed in a native environment without issue.
-
All of theses apps, with the exception of two (Vancouver Whitecaps and Toronto FC) offered some form of gamecast to provide fans with realtime updates (this would prove useful information when I performed the user research on functionality).
-
All apps provided a smooth ticket search and checkout function. Some within a native space, and some through an integrated third party.
Method 3: Contextual Observation
To fully understand the current capabilities of the existing app I had users run through several tasks (ticket purchasing, game finding, news finding, etc) while I watched and took notes on the process. It was quickly evident that navigation within the app was difficult for most users (new and existing). Confusion was most common when navigating int he following areas:
-
Navigating an oversaturated menu
-
Abundance of analogous button names. Options like "game", "buy tickets" and "match pass" were confusing among almost all users
-
Understanding the homepage and where to click to find additional information on certain features
Method 4: Screener Survey
I created a survey to understand a little more detail about who our user was and what they thought about the current app. The questions posed in the survey were geared to get feedback about the current experience (both positive and negative) and demographic information that would help us out later when developing the persona for the apps primary use case. The brief twelve question survey was posted in several Sounder supporter group Facebook pages and proved to be very effective. I received over 80+ responses and were able to use those responses in determining the features our team would improve upon.
From this survey we were able to narrow down who the primary users were by having a screener question of "How often do you watch (either live or on TV) a Sounders match?" Those that answered less than two matches per season were dropped from the survey results. This was done under the assumption that most users would not download an app for only a one time event.
Method 5: User Interviews
From this screener survey we were able to narrow down our pool of responses to 20 users I moved forward into interviewing people on their further experiences with the app. With these interviews I was looking for more qualitative answers (their reasoning and behavior) to truly understand the "why" concerning how they felt and interacted with the app. These interviews gave great insight as to why and how our users expected the features of this app to function. The following quotes seemed to give us the greatest insight into our users motives:
"When I come to an app like this I expect that it will be on brand. That when I go from the website to the app I should almost wonder if I actually made the transition because the look is so on point."
"I need to be able to follow the Sounders when I'm on the road. Getting the game on TV is hard enough when I'm in town, but when I'm away for work it's virtually not an option. I'd like to be able to follow along when I'm off on the east coast somewhere."
"Honestly? It's just a confusing app. I thought I would click on "games" to but my tickets but then I somehow ended up playing some puzzle game. Why is that even in there to begin with? Just confusing."
From these few quotes we can see that Sounders fans expect a lot from their team's official app. They feel personally invested in their team and want a seamless and fluid experience.
Method 6: Affinity Mapping
Taking the learnings we gained from the aforementioned methods I put them into an affinity map. From here I was able to drill down to who our who our user was and what they needed from this app. Areas that showed the most need for our user and that could be improved within the app included:
-
Basic app layout
-
Ticket purchasing
-
Realtime game highlights
-
News and highlights
Creating a Persona
From the data gathered from the six research methods listed above I was able to create a robust persona that guided or team when moving forward. The persona created narrowed down the demographic, attitudes, behaviors and needs of the typical Sounders FC app user.
Persona
Josh Bridger | Male | 46 years old
Josh is a married male in his mid to late 40’s. He works long hours at his tech job in the city and relishes any distraction that helps him follow his favorite local sports teams. In particular he enjoys following the sounders. He attends their games any chance he can get and usually watches or attends between 20-30 matches a year. He enjoys a good deal when he’s at the game and takes full advantage of any promotions he can. When he can’t attend games he usually receives updates about the game via various social media feeds on his phone. When not at the game, he also loves connecting with his fellow fans at a local pub.
Interaction Design
Losing a member halfway through our project, my partner and I decided to split the interaction design, both taking on different features within the app. This initially presented a problem with continuity of design between our two sections of the app. Having two different designers with two different visions of how each feature would look and work within the app was one of the biggest challenges of this project. To overcome this we first decided that we first needed to have the same vision. We worked together to decide on a basic layout of the app and then settled on daily half-day meetups where we would share our designs and get feedback from the other.
Looking back on the project we both decided that, while we were please with the work we produced, in the future we would settle on one interaction designer and realign our group in other ways to share the load better.
Initial Sketching
When creating my initial sketches I kept Josh (the user persona) in my mind and how he would like to flow through the app. Particularly I was in charge of designing the ticketing process for managing and purchasing tickets. Sketching out the flow provided for an understanding of how one would typically go through a process and what potential pitfalls they may encounter. With only a defunct current process to work from, I took inspiration from other app ticketing systems that had great reviews through the Apple app store.
Prototype Testing
From the sketches I created paper prototypes that were tested with several individuals. These prototypes were received well for the most part but did reveal a few elements that needed adjusting. Mostly this included ticket layout adjustments and affordances to let the user know where they were in the process.
I made several minor adjustments and went through two more rounds of paper prototype testing. With my initial sketches I ended up going through three rounds of testing with four different users each round (12 unique users / tests total).
Wireframes
After the three rounds of testing I felt that I had enough feedback to move forward with initial wireframes. These proved to be more useful when testing and revealed more elements that needed adjusting.
A major affordance that I added was when a user had selected and paid for a ticket a star would appear in the upper right hand corner of the game card. Initially I wasn't sure that users would understand this slight change, however, when going through process it seemed very intuitive for them. To make sure of their understanding I added a simple clarifying question at the end of the survey to check for understanding. With only one user out of the eight I tested could not identify the meaning when asked right away.
This first wireframe shows a list of matches that you are able to purchase tickets for on the 'Purchase' tab. The 'star' at the top right of the card indicating that tickets for that game have already been purchased.
When on the 'My Tickets'tab you can notice that both matches have been pulled in and the star in the top right corner of the cards have remained in their place to further indicate their meaning.
If you were to click on the 'Colorado Rapids' card then it would take you to the SeatGeek ticket purchasing interface.
After moving through the SeatGeek flow you would be pushed back to the native app to the 'Purchase' screen. A star would then appear in the top right of the Colorado rapids card, indicating that tickets for that match have been purchased.
If you were to click on to the Portland Timbers card it would move you on to the ticket screen that would have info regarding seat selected and a barcode to be scanned for entry into the event.
I went through three rounds of edits in these low fidelity wireframes and several critiques. This process helped with the flow and consistency of the app.
Throughout this process I worked closely with my partner to make sure that we maintained a continuity of design between our respective sections.
Synopsis
Through user research I was able to identify the Capuli Club customer persona. Enveloping several methods (screener survey, user interviews, and observational research) that included collecting both quantitative and qualitative data I was able to identify key attributes, behaviors, buying patterns and price points that the typical Capuli Club customer has. The findings report was able to help our team combined our discoveries into one succinct document that we delivered to the client and could then be distributed to stake holders within the Capuli Club network.