UI Mockups - SoenCapstone/GameOn GitHub Wiki

a. Personas

Persona 1:

  1. Name: Sarah Mendes

  2. Role: League Manager (Community Sports Organizer)

  3. Problems:

    • Manually coordinating players, venues, and schedules wastes time.
    • Communication is separated through different tools (WhatsApp, email, spreadsheets).
    • Roles and responsibilities in teams are not clear or not managed well.

  4. Pains:

    • Double bookings or miscommunications cause public embarrassment.
    • Players complain about last-minute changes and lack of updates.
    • Burnout from repetition of admin work, especially doing the same work with multiple leagues.

  5. Goals:

    • Run a smooth and professional league with minima overhead that is manual.
    • Build a system that is reliable by scaling across seasons and teams.
    • Focus more on community engagement and less on admin tasks.

  6. Motivations:

    • Passionate about community sports and wants leagues to feel organized and fun.
    • Wants to be known as a capable and trusted organizer in her community.
    • Driven by pride in running well-organized events that players love coming back to.
    • Wants tools that make her role easier without having to need constant tech support.

  7. Desired Benefits:

    • Save hours each week with scheduling and communication that are centralized.
    • Avoid chaos and complaints by having players trusting her systems.
    • Gain peace of mind knowing everything is under control and easy to access.

  8. Objections:

    • Doubts that a new platform will be worth the learning curve.
    • Worries that older or less tech-savvy participants won’t adopt it.
    • Hesitates to switch mid-season due to potential disruptions.

  9. Context:

    • She’s resourceful and tech-aware but not a tech expert.
    • Uses a mix of Google Sheets, WhatsApp, Facebook groups and PDFs.
    • Has tried apps like TeamSnap but found them limited to team-level management.

  10. Triggers:

  • A major scheduling error or unhappy team escalates frustrations.
  • A colleague recommends a new platform that "just works."
  • A new season is starting and she wants to improve the process.

Persona 2:

  1. Name: Jordan Lee

  2. Role: Team Player (Amateur Athlete, Weekend League)

  3. Problems:

    • Often confused about when and where games are.
    • Doesn’t get timely updates when schedules or teams change.
    • Lacks visibility into team communication, performance or responsibilities.

  4. Pains:

    • Misses games or arrives late because of unclear communication.
    • Feels disconnected from team decisions or logistics.
    • Wastes time scrolling through group chats looking for info.

  5. Goals:

    • Know exactly when and where to be for every game.
    • Stay updated on team news, changes and roles.
    • Contribute to the team and feel involved without extra admin work.

  6. Motivations:

    • Plays to stay fit, have fun and bond with teammates.
    • Takes pride in being reliable and showing up prepared.
    • Wants to feel like part of an organized team, not just a body on the field.
    • Motivated by seeing progress, stats or recognition for their contributions.

  7. Desired Benefits:

    • Easy access to upcoming games, team roster and league standings.
    • Centralized updates and notifications (no more digging through chats).
    • Less confusion, fewer no-shows and team coordination that is smoother.

  8. Objections:

    • Won’t use something if it feels like too much effort or another app to download.
    • Avoids platforms that look “too corporate” or overcomplicated.
    • Skeptical if teammates don’t all commit to using it too.

  9. Context:

    • Uses apps like WhatsApp, Instagram and calendar reminders to stay updated.
    • Not heavily involved in team management (just wants clean and quick access to info).
    • May play in multiple leagues or teams, which adds confusion.

  10. Triggers:

  • Misses a game or arrives at the wrong venue because of miscommunication.
  • Coach/Manager introduces a new tool and asks everyone to join.
  • Starts a new season and wants to stay more on top of things.

Persona 3:

  1. Name: Amina Tremblay

  2. Role: Casual Browser (Community Member, Local Sports Enthusiast)

  3. Problems:

    • Hard to find local sports events or leagues to follow or join casually.
    • No central place to explore local amateur sports schedules, updates or highlights.
    • Existing league websites or tools are outdated, clunky, or not mobile-friendly.

  4. Pains:

    • Feels left out of local sports unless she’s already “in the loop.”
    • Gets interested in a league or event too late—after registration or season start.
    • Often finds incomplete or outdated information when searching online.

  5. Goals:

    • Discover local sports leagues and games happening nearby.
    • Learn more about how to get involved as a fan, volunteer or future player.
    • Easily browse teams, standings or game times.

  6. Motivations:

    • Loves supporting local teams and community events.
    • Looking for ways to stay socially connected, maybe join later.
    • Finds joy in casual spectating and being part of a lively sports scene that is organized.
    • May be considering enrolling a child or friend in a league and wants to explore first.

  7. Desired Benefits:

    • Easy and intuitive browsing without account creation or commitment.
    • Clean access to game schedules, team profiles and league standings.
    • Confidence that the info is up-to-date and relevant to her location.

  8. Objections:

    • Won’t engage if browsing is gated or has clunky interfaces.
    • Loses trust if info looks outdated, inaccurate or inconsistent.
    • Avoids platforms that look “too much like admin tools” or too focused on players only.

  9. Context:

    • Stumbles upon GameOn through word of mouth, local event promotion or shared links.
    • Often uses mobile, not desktop, for browsing.
    • May casually follow multiple local sports scenes like basketball, soccer, basball, etc.

  10. Triggers:

  • Sees a game happening nearby and wonders how to learn more or attend.
  • A friend sends a link to check out a league or upcoming event.
  • Actively looking for local leagues to join or enroll someone in.

Persona 4:

  1. Name: Carlos Johnson

  2. Role: Platform Admin (System Moderator & User Support for GameOn)

  3. Problems:

    • Has to manually resolve user issues like login problems, abuse reports or data inconsistencies.
    • Struggles with unclear visibility into league or user behaviour across the platform.
    • Receives vague or incomplete issue reports with no tools to quickly trace root causes.

  4. Pains:

    • Constant interruptions from repetitive user tickets.
    • Pressure from both users and stakeholders to keep the platform stable, secure and fair.
    • Lacks a clear dashboard or automated alerts when something’s going wrong.

  5. Goals:

    • Maintain the integrity, reliability and fairness of the platform.
    • Resolve user issues quickly and efficiently.
    • Ensure smooth onboarding, access management and content moderation.

  6. Motivations:

    • Feels ownership of the platform’s stability and user satisfaction.
    • Wants to be proactive by fixing things before they become user complaints.
    • Takes pride in being a “ghost hero” (invisible to most users, but essential to their experience).
    • Enjoys building efficient systems and processes that reduce manual work over time.

  7. Desired Benefits:

    • Access to robust admin dashboards with trails, usage logs and user reports.
    • Tools to manage permissions, deactivate abusive users and resolve disputes.
    • Automation for routine tasks (like verifying accounts, flagging suspicious activity).

  8. Objections:

    • Dislikes platforms with limited backend visibility or no admin tooling.
    • Worried of systems with poor error messaging or vague bug reports.
    • Frustrated by a dev team that deprioritizes admin experience.

  9. Context:

    • Likely a technical or semi-technical person with a background in QA or IT.
    • Collaborates with developers, product managers and sometimes legal or compliance.
    • Uses tools like Slack, Jira and internal dashboards to track and resolve issues.

  10. Triggers:

  • A wave of user complaints about a bug or outage.
  • A serious abuse or harassment report from within a league.
  • A new feature rollout that requires backend oversight and support.

b. Mockups

Team Creation, Post, Overview, Games and Board Page

Associated persona: Jordan Lee (Team Player) & Carlos Johnson (Platform Admin)

Team Management Screens

  1. Teams Page: Shows all teams the user is part of, with quick access to create a new team or league. Acts as the main hub for managing and joining team spaces.
  2. Create Team: Form to set team name, sport, scope (Casual, Managed, League Ready), and location. Allows uploading a team logo and setting visibility for public or private teams.
  3. Team Board: Functions as the team’s communication feed where members can share updates, post results, or comment on matches. Displays user avatars, timestamps, and message previews.
  4. Post Composer: Dedicated screen for creating new posts, tagging teammates, selecting game dates, and adding notes. Streamlined input area for quick in-app communication.
  5. Team Overview: Displays summary statistics such as minutes played, assists, and goals. Offers a snapshot of team and player performance over time.
  6. Games Page: Lists all upcoming and past matches with opponent logos, times, and results. Split into “Participating” and “History” sections for easier navigation through the team’s schedule.

League Creation, Settings, Overview and Roles & Permissions Page

Associated persona: Sarah Mendes (League Manager), Jordan Lee (Team Player) & Carlos Johnson (Platform Admin)

League Management Screens

  1. Leagues List: Shows all leagues the user is in, with quick access to create a new one.

  2. Create League: Form to set the league name, description, sport, max teams, and visibility.

  3. Sport Selector: Pop-up menu for choosing the sport type (Soccer, Basketball, Volleyball).

  4. Standings View: Displays rankings, points, and team stats for the selected league.

  5. Upcoming Matches: Lists upcoming games with teams, dates, and venues.

  6. Teams View: Grid layout showing all teams in the league with their badges or initials.

  7. League Settings: Lets managers edit league info, adjust settings, or delete the league.

  8. Roles & Permissions: Defines what each role (Admin, Coach, Player) can do within the league.

Home Page, Browse Page & Search

Associated persona: Sarah Mendes (League Manager), Jordan Lee (Team Player), Amina Tremblay (Casual Browser) & Carlos Johnson (Platform Admin)

Home and Search Page

1- Home page has two sections: Updates (showing users specific updates) and Spectating (Showing updates from teams/leagues the user is spectating)

2- Globe icon on the top right takes you to the Browse page, where the user can see all teams and leagues, and search through them.

Welcome Page, Login & Create Account

Associated persona: Sarah Mendes (League Manager), Jordan Lee (Team Player), Amina Tremblay (Casual Browser) & Carlos Johnson (Platform Admin)

1- The welcome page is an introductory to the app with a marquee showing the differenct versions of our logo and buttons to sign in and create accounts.

2- A sign in page allow the user to write their email and password to sign into their account.

3- A Sign up page allows the user to create an account by typing their info and setting a password, where they are then redirected to an email verification page.