Trevor Byron Design

Team Captain - TB Design


Team Captain App

The Problem:

Organizing a pickup soccer league takes coordination. Players need to quickly know their game schedule, communicate with their entire team, know who is available to play, and make sure everyone is up to date with their league fees.

The Solution:

The Team Captain app functions as a communication and information platform for participants of amateur sports leagues. The app allows users to easily communicate with their teammates, check game schedules, see who is available to play, and manage payment of league fees. Players can update their status to indicate weekly availability, and message the entire team, or individual players.

Persona Boards:

My first step in designing Team Captain was identifying the key users. Based on interviews at a local soccer club, I identified 5 key personas. Below is an example of the team captain persona. I highlight this particular persona because the Team Captain App is aimed at solving mostly his needs.

User Flow Diagram

After I identified the user personas and wrote out User Stories to understand the needs of each user, I put together these diagrams to identify the navigational needs and to audit the amount of steps each story would require.


User Story 1:

I created this User Story to identify the steps needed for a user (George) to check game schedules and send group messages to their entire team. Below I’ve included the steps as well as a visual prototype I built using Flinto.

  1. Logs in

  2. Checks schedule

  3. Sends message to entire team

George Wright checks his team’s schedule to remind himself what team they will be playing this weekend. He is excited to find they’ll be playing the Hammer Heads. He then checks his team’s individual status notations and sees that his Center Defender, Derick, has not yet paid his fee to be a part of the league. He also notices that the majority of his team has not specified if they will be available to play this weekend. George decides to send out a friendly reminder to the entire team to ask that those who have not yet made their payments do so ASAP. He includes a reminder to all player to let him know whether or not they will be able to make it to the game this weekend.


User Story 2:

I created a second User Story to identify the steps needed for a user (Derek) to successfully check their messages, let their team know if they will be available for the upcoming game, and send a direct message to their team captain. I built the prototype using Flinto.

  1. Checks Messages

  2. Changes availability status 

  3. Sends DM to George

Derek logs into his account and receives a notification that he has an unread message. He navigates to messages and sees that his captain, George, has sent out a message to the entire team. He reads the message and remembers he has not marked his availability for this week yet. He is also slightly embarrassed to realize that he has not yet made his payments to play. He navigates to his profile to indicate he is available. He then marks his payment status as paid as he plans to Venmo his captain after closing the app. He then sends his captain a direct message and lets him know that he is sending the money now.