1. footiemate
the complete digital platform for soccer players, teams, camps and leagues.
MOBILE: Key Flows & Wireframes
VERsion 4 September 2011
1 1 FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
2. PAGE 2
MOBILE WIREFRAMES ...
This document helps explain the concept of the FootieMate Digital system.
Login
Page 3
Team Schedule
Page 5
Check-In
Page 8
Scores
Page 14
Players
Page 21
Coaches Tools
Page 26
2 1 FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
3. PAGE 3
LOGIN
3 1 FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
4. PAGE 4
LOGIN
M1.0 - Header bar
Global header for the site. The header is graphical and can be
styled to suit each team. The title of the team is system text and is
centered in the bar.
M2.0 - Logo
The clubs logo graphic.
M1.0 M3.0 - Name, password and login
Users enter their name and password for their clubs mobile site.
M4.0 - Lost Name or Password*
M2.0 Users who have forgotten their name and password can retrieve it
here.
M5.0 - FootieMate endorsement
This could be used as messaging or link area. Should be able to
change it for each team and club.
M3.0
M4.0
M5.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
5. PAGE 5
TEAM SCHEDULE
5 1 FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
6. PAGE 6
TEAM SCHEDULE
M6.0 - Back
Tapping returns the user the homepage.
M7.0 - Menu
Tapping reveals the main drop down menu.
M8.0 - Month Menu
Tapping the month reveals the games from that month. Tapping the
M6.0 M7.0 arrows reveals the previous and next months. If there was no games
M8.0
in a month we should present a simple message (No games played
this month.).
M9.0 M10.0 M11.0
M9.0 - Next Game
M12.0 Next Game title
M13.0 M10.0 - LIVE GAME link
Each game gets a destination page (URL). The next game is the fea-
M14.0 tured game and the (global) LIVE GAME link will always bring you to
that page.
M11.0 - Check-In link
Players and Coach & staff will be asked to check-in for each game.
Tapping this link will bring you to that page for that process.
M12.0 - Next Game module
This is the next game module. Tapping on it will bring you to the LIVE
M15.0
GAME page. The next game module advances to the next game in
the calendar once a game is completed. The data in the tables is:
• Date. When the game is being played
• Opponents. This is being viewed as if you are the home team.
Title of the opponents appears here.
• H. Home game.
• A. Away game.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
7. PAGE 7
KO. Kickoff time for the game. Should decide where/when is the
best place to ask about which time zone is the default preference.
M13.0 - Previous Games
Previous games are listed in this list.
M14.0 - Previous Games Table
The same data appears in the table as the next game.
M15.0 - Check-In Alert
M6.0 M7.0 An Alert is pushed to players that have not checked into the next
M8.0 game. Yes/No is probably not the correct message.
M9.0 M10.0 M11.0
M12.0
M13.0
M14.0
M15.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
8. PAGE 8
Check-in
8 1 FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
9. PAGE 9
Check-in - Coach
M16.0 - Back
Check-In - Coach Tapping returns the user the homepage.
M17.0 - Profile pic
Users profile pic appears her
M18.0 - Player title
(Player, coach, staff etc.) and position
M16.0
M18.0 M19.0 - Admin
Coachs and possibly other user profiles have access to an admin
M19.0
M17.0 option when they check-in. The page will show the check-in status
for the entire team.
M20.0 M20.0 - Check-in for:
This is the same content as M12.0 (The next game module).
M21.0 M23.0 M21.0 - Map
M22.0 Presents a map and directions to the game
M24.0
M22.0 - Weather
M25.0 Presents the weather for the game location at game time
M25.0 M23.0 - Message
Brings users to the messaging page to send a message to the team.
M24.0 - I’m in
Tapping this declares that the user can make the game. Once
tapped:
• The system will no longer need to serve alerts to ask the user to
check-in.
• It will also show a status on the player profile page that they are
checked in for the game
• Will also update the coaches admin page
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
10. PAGE 10
M25.0 - I’m in
Tapping this declares that the user can not make the game. Once
tapped:
Check-In - Coach • The system will no longer need to serve alerts to ask the user to
check-in.
• It will also show a status on the player profile page that they are
checked in for the game
• Will also update the coaches admin page
M26.0 - Not sure
M16.0 Tapping this declares that the user is not sure if they can make the
M18.0 game. Once tapped:
M19.0
M17.0
• The system will continue to ask the user to check-in as their status
is ‘Not sure’.
• It will also show a status on the player profile page that they are
M20.0
checked in for the game
• Will also update the coaches admin page
M21.0 M23.0
M22.0
M24.0
M25.0
M26.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
11. PAGE 11
Check-in - Coach Admin
M27.0 - Check-In Coaches Admin
Check-In - Coach Admin Coaches tap on the admin button (M19.0) and come to this page.
The page contains an update on all of the players status for the next
game. This gives the coach the ability to send a message to get
players to set their status, and he has an instant view on how many
players can play, and how many of them them a ride (car pool) to
the game.
M28.0 - Attendance
Coaches can tap on this button to get view a seasons worth of data
M27.0 M28.0 about players attendance (M32.0)
M29.0
M30.0
M29.0 - 10 out of ...
Quick view of how many players are available from the full regis-
tered squad of players.
M31.0
M30.0 - Next game module
As defined at: M12.0
M31.0 - Who’s in or out
An alphabetical list of all players registered with the team showing
their status for the game.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
12. PAGE 12
Check-in - Coach DATA
M32-0 - Game Attendance
Check-In - Coach Data Coaches can view a seasons worth of data about players atten-
dance. Short headline pulls in the total amount of games, games
remaining and the date the season began.
M33.0 - Season Attendance
An alphabetical list of all players registered with the team showing
their status for the current season.
M30.0
M30.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
13. PAGE 13
Check-in - PLAYERS
M34.0 - Back
Check-In - Players This is for players to check-in to games. It’s exactly the same func-
tionality as: M17.0 with the exception of the Admin button (For
coaches only).
M34.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
14. PAGE 14
SCORES
14 1
FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
15. PAGE 15
SCORES - Pre State
M35.0 - Back
Scores Home - Pre Scores Home - Pre (Bottom of page) Tapping returns the user the homepage.
M36.0 - Month Menu
Tapping the month reveals the games from that month. Tapping the
arrows reveals the previous and next months. If there was no games
in a month we should present a simple message (No games played
M48.0 M49.0 M50.0 this month.).
M35.0
M37.0 - Live Game
M36.0
Live game title. This
M38.0 M39.0
M37.0
M38.0 - Check-In button
Tapping brings users to the check-in page. Is it possible to not show
M40.0
this link if a player has already logged in?
M41.0
M39.0 - Refresh button
M42.0
This page represents a live game, and I’m assuming it will not auto-
matically refresh to update content. Tapping refresh updates the
pages (and data).
M43.0 M44.0
M40.0 - Scoreboard
M45.0 This is the live scoreboard for the game. This should be a really easy
feature for the coach to update during games, and in some ways is
M46.0 M47.0 a requirement for the system to work. Parents of players and fans will
use the App solely because of this feature.
M41.0 - Last update
Communicates the time stamp for the last update. Whether thats an
automatically page refresh or by tapping the refresh button).
M42.0 - Key Game info
Kickoff, weather and referee information. We could also add league
information here. These fields present key game information (out-
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
16. PAGE 16
side of scores) and should be pulled from the data thats entered as
each game is entered into the system.
M43.0 - Check-in
Scores Home - Pre (Top of page) Scores Home - Pre (Bottom of page)
Players and coaching staff can check-in for the game
M44.0 - Staff
Coaches, back office and possible parents (helpers) are organized
through this page.
M45.0 - Lineup
M48.0 M49.0 M50.0
This feature is published by the coach for each game. He announc-
M35.0
es the lineup, with positions and instructions for players. It’s up to
M36.0 the coach when he wants to publish it (Days or minutes prior to the
M38.0 M39.0 game?).
M37.0
M46.0 - Car pool
M40.0
Not every team will need this, but its primary use is to organize car
pooling (transport) for every game. Not all games are away games,
M41.0 but either way parents might want to car pool for home games. Not
every team will use this feature.
M42.0 M47.0 - Message
Users are brought to their inbox so they can send a message.
M43.0 M44.0 M48.0 - Game Reporter
The Game Reporter tab is primarily used (and the default state)
M45.0 when a LIVE game is on. People who want to add comments, pho-
tos and videos about the game do it through the Game Reporter
M46.0 M47.0
tab.
M49.0 - Coaches Notes
The coach can send a message to the players and team before
each game. It could be a message about tactics or a general orga-
nization note.
M50.0 - Other
Yet to be determined content here, but its likely there will be addi-
tional ideas.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
17. PAGE 17
SCORES - During STATE
Header functionality is exactly the same as the pre-state.
Scores Home - During Scores Home - During (Bottom of page)
M51.0 - Scoreboard
M54.0 Each team’s score are updating in real-time as the game is com-
M55.0 mencing. The coach or staff are using the app to make these up-
REPORT
dates (SMS, Twitter etc.). Scorers and game activity (red cards, extra
time etc.) can also be recorded.
M52.0 - Last Update
Time stamp for the last update. The scoreboard can be updated by
tapping the refresh button.
M53.0 - Key Game info
M51.0 Same functionality as M42.0.
---- The following is if scrolled down the phone.
M54.0 - Game Reporter
Same functionality as mentioned in M48.0. Friends and family who
turn up to watch games will be using their mobile device to tell
M52.0
M56.0
friends about the game. The Game Reporter tab is primarily used
M53.0 when a LIVE game is on. People who want to add comments, pho-
tos and videos about the game do it through the Game Reporter
tab. The more game reporters the better. This should feel a bit like a
live Twitter feed. The coach also has the option to activate a game
clock when the game kicks off, half time, extra time, penalties and
final.
M55.0 - Report & Sort
Tap this button to become a reporter for the game. Sort allows users
to sort the data in several formats (Photos, newest, coach etc.).
M56.0 - Buttons
Same buttons as M43.0+.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
18. PAGE 18
SCORES - POST State
Scores - Post
Scores Home - Post Scores Home - Post (Bottom of page) This is the final state for a game. The scoreboard is frozen and the
check-in and refresh buttons have been removed. The page will up-
date after a couple of days with the next game.
M57 - Schedule
This button goes to the schedules page so users can get the details
of the next game.
M58 - Game Recap
The Recap tab is the default when a game is in post state. The con-
M58.0 tent comes from the coach or a site admin once the game is com-
M57.0
pleted. Users can tap on the other tabs to the Game Reporter.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
19. PAGE 19
Photos & Video Home Gallery Home
M61.0 M62.0
M59.0 M63.0
M64.0
M60.0
M65.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
20. PAGE 20
M66 - Upload
Return to this specific Gallery homepage.
Gallery Detail M67 -
A form of pagination. How many images are left.
M68 - Photo or Video
Full screen view of primary photo or video.
M69 - Description
M66.0 Image description displays on rollover.
M67.0
M70 - Toolbar
Appears when users tap the UI, fades out after several seconds.
Back and next arrows appear to go back and forth though the gal-
lery at the bottom. Trash deletes an image. Action icon allows users
to share, and the star is to add the photo or video as a favorite.
M68.0
M69.0
M70.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
21. PAGE 21
players
21 1
FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
22. PAGE 22
PLayers
M71 - Coaches List
Players Home Player Profile - Top List of all coaches and general staff. Tapping on a row links through
to the detail page.
M72 - Player List
List of all players. Tapping on a row links through to the detail page.
M73 - Player name
Player name and position is the title here
M71.0 M73.0 M74 - Send message
M74.0
Users profiles play a role on how this button will behave. Tapping
M75.0 ‘Send message’ allows you to send a message to this player.
M75 - Profile, Bio, Record, Photos
M72.0 M76.0 These could be tabs. This is the profile page.
M76 - Profile image
Players main profile picture
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
23. PAGE 23
M77 - Profile page
This is the bottom part of the profile page:
• Nickname: Jock Byrne
Player Profile - Bottom Player Profile - Bio
• Height: 5’ 9”
• Weight: 10.10
• City: Los Angeles
• Town: Santa Monica
• Eligibility: U12
•
• Position: Forward
M77.0
• Number: 10
• Game played: 2
• Goals: 0
• Assists: 4
• Yellow Cards: 1
M78.0 • Red Cards: 0
M78 - Bio
You’ve tapped ‘Bio’ and a short player bio has appeared.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
24. PAGE 24
M79 - Record
The players performance record for the current + last season is listed
here. Not sure if this table has the correct table fields yet.
Player Profile - Record Player Profile - Photos
M80 - Photos
You’ve tapped ‘Photos’ and the players photos are pulled in. They
could be the photos that the player is tagged in or from the players
team, or that the player has published themselves.
M80.0
M79.0
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
25. PAGE 25
PLAYER MVP
Players, fans and coaches are given the ability to vote for the best
player after each game.
MVP - Latest game MVP - Leaderboard
M89 - Title
Title and date of last game played.
M90 - Game Report
Links to the game report in Scores.
M91 - MVP Leaderboard
M89.0 M95.0 Records all of the MVP’s across the duration of the season.
M90.0 M91.0 M94.0 M92 - Score
Result from the last game.
M92.0
M93 - Roster
Player roster, with shirt #, name, position and prompt to vote.
M93.0 M94 - MVP Leaderboard
Aggregate list of MVPs for all the seasons games.
• Lead - Leaders
• # - Shirt number
• Name - Player name
• Position - Player position
• GP - Games played
M95
Returns you back to the latest MVP game.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
26. PAGE 26
coaches tools
Coaches will be easily able to create simple wizards/tools to make his job easier. This can
be the kind of feature that we build over time, but the idea is to build something flexible
that allows coaches to experiment and come up with ideas on there on. We offer a few
basic tools, and prompt them to create their own. It’s kind of like letting coaches do a
level of product development on our behalf.
26 1
FOOTIEMATE - The Perfect Web System for Soccer Players, Clubs and Leagues
WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 1 | June 27 2011
27. PAGE 27
COACHES wizardS
Wizard: Car Pool
Wizard: Car Pool Wizard: Laundry Who’s turn is it or who’s able to provide transport for the next game?
M81 - Next game module
As described at M12.
M82 - Roster
The roster of the team and game schedule are listed. The Driver
channel indciates who’s turn it is to drive to the next game. There
could be a scenario were multiple drivers are listed for the same
M81.0
game.
M83 - Driver Status
The check box shows that users have confirmed that they can drive
M82.0 M84.0
for the assigned day. Perhaps we utilize the check-in functionality for
M85.0 users to confirm.
M83.0
Wizard: Laundry
Simple tool that aligns the full roster of players beside the schedule
with a checklist for who’s turn it is to wash the uniforms after each
game. They also need to bring the uniforms to the next game.
M85 - Roster
The roster of the team and game schedule are listed. The Driver
channel indciates who’s turn it is to drive to the next game. There
could be a scenario were multiple drivers are listed for the same
game.
M86 - Washer Status
The check box shows that users have confirmed that they can drive
for the assigned day. Perhaps we utilize the check-in functionality for
users to confirm.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011
28. PAGE 28
COACHES wizardS
Wizard: Lineup
Wizard: Lineup Wizard: Admin The idea behind this feature is to allow coaches to publish the lineup
for the next upcoming game. He can also associate directions for
M88.1 each player.
M87 - Roster
The roster of the team and game schedule are listed. The Driver
channel indciates who’s turn it is to drive to the next game. There
could be a scenario were multiple drivers are listed for the same
game.
M88 - Check-in
The status box shows that users has confirmed what players are
checked-in for the next game. The functionality varies here from the
M87.0 other wizards because the coach needs to go through the process
M88.0 of determining who’s playing, and in what position. Then sending
the lineup to the entire team.
M88.1 - Wizard: Admin
Not exactly sure of the workflow or how we organize the steps within
the UI, but this the order and kinds of steps that a coach would go
through to create a new wizard.
FOOTIEMATE - The Perfect Web System for for Soccer Players, Clubs and Leagues
FOOTIEMATE - The Perfect Web System Soccer Players, Clubs and Leagues WEB: www.footiemate.com EMAIL: FootieMail@gmail.com Version 4 | Sep 2011