Responsive Web Design

Building A Stronger Team Through Better Communication

The Challenge

Parents are signing their children up for youth sport teams starting from a very young age. Ensuring the kids a fun and meaningful experience on the playing field can be stressful not only for the coaches but also the parents.

On the other hand, the coaches are not only managing the dozen of kids on his/her team, to run a successful team they rely on the parents’ cooperation and participation.


Xitong Deng
Xi Jin
Kevin Seelaus

My Role

UX Research
UX Design
Visual Design


Feb. - Apr. 2018

Solution Highlights

To help the parents and coaches create a better experience for their children, we designed a responsive web APP: TeamHub, a integrated platform for all your youth team communication needs.

Clear Information Hierarchy

When the coach publish a post onto the platform, he or she can choose what kind of message it is. If it is an “Urgent Message” parents would get a special notification through their medium of choice.

For score boards or other updates, parents won’t get any notifications, but they can easily find these updates on their timeline if they open their dashboard.

The "Seen" Feature

For urgent messages the coach can ask the parents to give an active response after they’ve seen the message. This way the coach would know who has seen the update and who hasn’t.

The system provides the coaches a list of the people who have not responded and if necessary with the click of a button the coach can call the parents and make sure the urgent message is delivered.

Last Minute Check

The parents are busy, we know that. So we made it easy for them to do a last minute check before they leave the house and go to a team event. On the event details page we have all the information they need: time, directions, weather, volunteer duties… There is also a notes section where the coach can specify other things such as what color jersey the kids are wearing for the game.

We’ve also learned that parents have trouble navigating at venues, so we allow the coach to upload a pdf for detailed directions for parents to reference when they get to the venue.


Generative Research

We conducted guerrilla research with people who have participated in youth sports as athletes or coaches and contextual interviews with parents we met at youth sport games, to find opportunities that we can improve in the youth sports experience.


Communication is a major pain point for both parents and coaches.

From our research data, we also drew a customer journey map for both the coaches and parents over each football season.

User journey maps for coaches and parents

From this customer journey map we saw that the lowest point for both the parents’ and the coaches’ experience was before each game or practice. And because games and practices happen repetitively, if we are able to improve their experience for each game, accumulatively we would have improved user experience drastically.


After determining our scope we needed to decide on which needs and scenarios we hoped to address with our web app. To do this we did a “crazy 8’s” exercise. Through this brainstorming activity quickly generate 20 different needs and almost 40 scenarios. After some voting and discussion, we were ready to draw storyboards.

We narrowed in on five scenarios, developed them into storyboards, and performed speed dating with potential users.

Ideation Process
Click below to see all our personas
Click below to see all our storyboards
Testing Storyboards With Users


To improve parents’ participation and cooperation

The design solution should be easy to use and inoperative well with the other common productivity tools and the parents’ usual workflow:

  • The communication tool would be a responsive web site. Parents won’t need to download anything onto their devices.
  • Make sure the event calendar can be synced to Google Calendar and iCalendar.
  • Allow the parents to choose their own preferred method of communication.
  • Design the parents’ home screen into a news feed with categorized information, so the user can identify the information at a glance.
  • Event detail page with all necessary information and walking directions for venues that are hard to navigate using Google Maps .


To help communicate last minute updates

Not only we need to design a way for the coach to send out urgent messages, but also a way to tell the coaches that the parents have seen the message and whether they can take action accordingly.

  • A feature that allows the coach to see how many parents have seen the update.
  • Make the parents actively respond to urgent updates, to reinforce their impression of the update.
  • Allow parents to post follow-ups to each update.


In the end we decided to design a platform with 2 different dashboards. From the home page, the user can choose to either log in as a parent or a coach. On the parents dashboard, they will be able to see the event calendar, coach contact information, an archive of all past posts and their upcoming volunteer duties. On the coach's side users would be able to post new announcements and events, check the team's contact information and roaster, manage the archive, access league resouces.

Site Map for TeamHub Website

Coach Interface:

Powerful Yet Nimble

For the coaches, we designed our product to help them feel they have more control over their communication with the parents.

The responsive web design allows them to write posts and updates on their laptops but also edit them on the go. The seen feature allows them to see which parents have got the lastest update and if they need to contact any parents 1 on 1, and focus on coaches.

Parent Interface:

Never Miss An Update

With our design parents will receive updates from the coach in a more curated manner.

For urgent messages, parents can specify through which media they would like to receive them. On their news feed the updates are shown in the order of importance and the last minute check feature ensures the parents can do a final check before the family heads out the door.


What I’ve learned…

On responsive web

This assignment taught us not only about designing for responsive web, but more importantly to be aware of how people use different devices depending on the task and scenario. There are tasks which parents might do on their phones on the go, and other tasks which coaches would want to perform sitting down at a desktop. Understanding these difference helped us empathize with all of our users and create better experiences  for each of them.

On working as a team

During brainstorming we tried out group exercises such a “Crazy 8’s” and “How might we”, which we found to be very efficient. When we started to design a high-fidelity prototype,, we successfully delegated our work: Xitong designed the color scheme and style first, then the team split up rest of the screens and translated them to a compatible aesthetic style. We each had a reasonable amount of work, but also  were able to have a coherently designed end product.