End-to-end application for adult recreational soccer leagues

TARGET USER 
Adult soccer players looking for a way to manage their daily play

ROLE
User Research, Interaction Design, Visual Design, and UI Design

THE CHallenge

Design a new application to help adults who participate in recreational soccer leagues to find and sign up for various leagues in the NYC area. The app should expand upon the capabilities of and create a more seamless experience than the current offerings in the marketplace. 

THE OUTCOME

The Soccer Search app cuts through the noise by providing aggregated information on soccer leagues around NYC. A player can complete a full transaction from initial app registration through game search all the way to payment. A new user can join an open game on a whim while an experienced one can manage their full schedule. 

Discovery

The discovery process for this project was especially important due to my personal connection with the end product. I knew that if I wasn’t careful then I would use my own personal experiences to influence what I thought users needed. Since this application was focused on the NYC area, I began my research by looking for all the information I could find on the adult soccer recreational leagues in the city. My secondary research included online research, newspaper ads and word of mouth. I followed this up by interviewing experienced rec soccer players, and those that had been involved in adult rec leagues whether they were related to soccer or not. 

Persona

The persona that won out in this project was the “dedicated player” persona. An experienced player moving to the city for the first time would be more likely to turn to this application for help, and then continue to use it in order to manage the leagues and games that they would play in. 

empathy map

The empathy map below came out fairly close to the way I expected it to. The notable differences were focused on the reasons why people played. The interviews revealed the issues they normally experienced as well as how recreational sports was intertwined with who they are as a person. For some it was not only their form of exercise, but it also provided the foundation of their social networks.

Define

At this point in the process it was time to start to synthesize the information from the research phase. The key insights combined with the empathy that I gained from the interviews could now lead the way to help define the main social features to be designed. Below is a high level overview of the larger takeaways from the discovery process.

Research insights

Needs

  • Proximity was the #1 value users were looking for 
  • #2 was specific times to play during the Weekday/Weekend
  • Being able to do everything in the app (sign up, pay, league info, etc.)
  • Friends are important to get users onto a team/into a league
  • Option to walk on to team/participate in games while traveling

Nice to Haves

  • App should be fun because majority of users are playing for social reasons
  • Management system for team managers is important for established folks
  • Provide an easy way to find out if games are on as scheduled
  • Easy way to check to see if teams need players (leagues with player minimums)
  • Highlight places to be social after games (grab drinks, watch games, etc.)

Other

  • Casual users were worred about their skill level
  • Most users preferred Co-Ed Leagues
  • Cost is less important to those new to a city
  • Charity was more of a side benefit rather than a driving force for people to get involved in a league

Problem statment

Now that I had gleaned many insights from the research, it was time to create some meaningful and actionable problem statements. For this part of the process I turned to “How might we” questions.  I tried to make sure these were mostly human-centered while being broad enough to foster creativity, but also narrow enough to not let the thought process become unweildy.  

Statements

  • How might we make an “off the cuff” decision to play a game easy?
  • How might we show users available games near their current location?
  • How might we make it easy for people to find out where to go and what they need for a game?
  • How might we make it easy for users to complete the whole transaction in the application?

user flow

This user flow demonstrates a new user’s journey from opening the application to confirmation of signing up for a game. While the journey is fairly routine for signing up to participate in an event, there are multiple ways to search, filter, and view results to provide a truly customized experience for the user. 

Design

The design of this application was especially exciting because it was the first time I was being tasked with fully conceptualizing a product from start to finish. The extensive research, problem statements and user flow helped focus the project to ensure that the end design would provide the desired result. The constraint of the smaller screen size was as much of a hindrance as it was a boost to my creativity. As you’ll see below, I had to take advantage of some smartphone gestures in order to simplify the game filtering process.

sketches

Below are some of the sketches that I created throughout the design process. The first few pack as much visual design as they do notes that provided the basis for how the app would function. The second two show more detailed representations of what the final screens would look like along with notes on the side that describe the benefits of each screen. 

delivery

After the high fidelity mockups were created, I user tested this with as many of the interviewees that had already been involved as possible. I was also able to recruit brand new folks that hadn’t been involved in the project in order to get a fresh perspective. These tests revealed all sorts of problems from color issues, counter-intuitive actions, to questioning why some features had been added at all. In the end, the experienced recreational soccer players that reviewed the product felt that this would be an app that they would use. They even asked if I could take the capabilities a step further to work in additional cities and towns so they could use it wherever they were. 

UI Kit

High fidelity mockups

Load Screen and Initial Options:

Sign Up Screens:

Filter for Games:

Game Selection & Credit Card Process

Reflections

There’s a part of me that chose this project because it was a product that I wish existed. While I would be a customer for this product, I wanted to make sure that I stayed true to the overall user base. What if my needs and wants were vastly different from the main users that I would be designing for? What if I didn’t ask the right questions or dismissed ideas because they didn’t fit with my initial model. Coming at a project with clear and unbiased eyes was far and away the most important lesson I learned through this venture. Well, that and learning how to design an end-to-end product confined to a screen the size of my hand.