Icemen 6 Responsive Website

A responsive website for a hockey team where team members can view the game schedule, see the statistics and RSVP for games as well as build camaraderie.

Ability to view the most current schedule and RSVP for any game.

The captain can edit lineups so that all players know their position ahead of time.

Discussion board feature so team members can communicate with each other outside of games.

A sneak peek into the annual Great Puckaroo Tournament in Winthrop, WA.

See Figma Prototype Here

Background

Icemen 6C is a team that plays in the recreational Kraken Hockey League (KHL) in Seattle. Currently, each team uses the main KHL website to view the current schedule and a third party app to RSVP for games.

Problems

The third party RSVP tool is difficult to use and is not mobile friendly.
Current set up makes it hard for the captain to find a team sub or a goalie when needed.
Recruiting team members for the new season can become a cumbersome process as well.
There is no community aspect to the website.

Proposed Solution

Design the Icemen 6C team website with the following features:

Include the current schedule and the ability to RSVP on the spot.
Have the ability to sign up for the next season.
The captain can send emails to the entire team as well as groups, based on their RSVP status.
The captain gets notified if the number of players is low or if there is no goalie.
Have a discussion board page on the website, so team members can communicate with each other in between games.
Showcase the annual Great Puckaroo Roundup in Winthrop, WA to build camaraderie.

Design Process

Step 1. Empathize

Conduct a secondary research to look at various hockey league sites and RSVP tools.
Interview 4 players from Icemen 6 team, including the captain and a goalie.

Step 2. Define

Create an affinity map, outlining all requests from user interviews.
Create 2 user personas, one for a team captain and one for a player.

Step 3. Ideate

Create a site map for the website.
Sketch a few ideas of a mobile site layouts.
Create lo-fidelity models.

Step 4. Prototype

Design hi-fidelity layouts for both mobile and desktop versions.
Build the prototype, including all the interactions between each page.

Step 5. Test

Present the final prototype to team members and get their feedback.
Implement all the doable feedback.

Secondary Research

Analyzed the Kraken Hockey League (KHL) website that the team currently uses and the Rainier Hockey League (RHL) website.

KHL

RHL

What do they do?

Gives information about the entire league, including live schedules, standings, and team details for 140+ teams.

Gives basic information about the league, teams, scoreboards and game schedules for 40+ teams.

Strengths

More advanced and informative than any other hockey league site. Shows all the upcoming tournaments.

Shows live game scores and standings.

Weaknesses

Slow to load, not enough information for individuals. No way for team members to communicate with each other or RSVP for games.

Very outdated interface, hard to read, and hard to follow. No accessibility features whatsoever.

Opportunities

Keep all the good things KHL offers, catering them for one team. Create more features to build camaraderie.

Create a completely new website that's responsive, cutting edge, and easy to use.

User Interviews

Interviewed 4 team players, including the team captain and the goalie. Overall, everyone was very excited about the team website and had many suggestions.

What I users don't like about current setup and suggestions for the web site affinity map

User Personas

After conducting user interviews, I created 2 separate personas, one for the team captain and the other one for someone who is potentially interested in joining the team.

Site Map

The site map for the website.

Initial Sketches

I took the mobile-first design approach to this project. Here are the sketches of the mobile screens.

Home page screen, v1

Home page screen, v2

Home page screen, v3

Team detail with lineups

Home page screen, scrolled down

Home page screen, v4

Hi-fidelity Wireframes

I took the mobile-first design approach to this project. Here are the sketches of the mobile screens.

Home screen, top

Home screen, upcoming games

Home screen, past games

Home screen, statistics

Winthrop tournament, top

Winthrop tournament, about Winthrop

Winthrop tournament, where to stay

Who signed up for the next season screen

Team details w/lineups, top

Team details w/lineups, bottom

Discussion board

Individual chatrooms

And here is the desktop version.

Brand Stylesheet

Icemen 6 already has a logo that they provided for this project. Using the style and colors of the logo, I completed their brand style with a color palette and fonts that work well for sports.

Testing

The team members and the captain went through the prototype of the website and loved the design of it. They left a few minor comments which were promptly addressed.

Give team members the ability to add a topic to the discussion board

In the comments section, where you type comments, add a gif feature, voice feature, and the ability to attach files.

Added gif, attach and voice to text options to the chat.

Instead of just emailing the team members, could we add the option of texting them as well? Sometimes we get updates at the last moment and don't have time to check our emails.

Wanna play hockey?