top of page

Responsive Web Design

Little League 

Year

Fall 2018

Team

Corey Emery

Sasha Meng

Tasks

Research, User Mapping, Ideation, Persona Creation, Storyboard/ Speed dating, User Testing, UI Design

How Can We Use Design To Help Little Leagues Improve Their Communication During Emergencies?

Background

Project Description

For my Interaction Design Studio 1 class, I worked in a team of three to design a responsible mobile website to alleviate pain points in youth Little League. 

The Stakeholders

My team and I identified the stakeholders as the league owners, the coaches, and the parents.

Research

Goals

1. What's so bad about the current level of communication?

2. What are the negative consequences of poor communication?

3. How aware are people about this pain point?

Background Research

We learned that a lot of the frameworks that exist today aim to help coaches with registration and team management, but struggle with group contact, coordination, and notifications.

Guerilla Research | Stakeholder Interviews

Coaches:
They understand the importance of communication, but believe that sending updates on an individual basis is time consuming.

Parents:
The majority believe that current little leagues struggle with a lack of communication, especially when there is a field change or game cancellation.

League Owners:
All believe that communication breakdown is a real issue, and believes that the root of the issue is that alerts can come from many sources, such as text, email, or on the website. 
​

Knowing The Users

Customer Journey Map

The customer journey map allowed our team to visualize where the customer experiences pain in their experience. We saw that the customer experiences the most joy when they arrive at the field, so we knew that our solution needs to allow the customer to arrive at level of joy consistently.  

Personas

From our research, we created a persona each stakeholder. Each persona needs to have a specific goal, which helped keep us focused by prioritizing the persona’s needs and avoiding elastic users. Personas also aided in the creation of realistic scenarios and storyboards.

Scenarios & Storyboards

By including contexts, problems, solutions, and resolutions on our storyboards, we illustrated how our responsive website can help our stakeholders. We drew simple images in small grids to make sure that we don't have too much detail, which can confuse testers. 

Initial Work

Screen Map

Our group created a screen map to helps us avoid a complex layout for our website that can potentially create friction in helping our users accomplish their goals.

Low Fidelity Wireframes

Our main goal was to figure out how to position the major components within the screen to maximize their visibility or accessibility. Starting from mobile web pages, we established a website that was mainly focused on notifications.

Medium Fidelity Wireframes

Our main goal here was to further flush out components and features of the screens that we created wireframes for. 

Final Designs

Notification Screen

This notification system is for emergencies only, so when parents see a text message from the little league, they know it’s urgent and will not ignore it. We chose a lot of drop-downs to limit the coach’s freedom on what they can do, and drop-down menus are faster than text fields.

Push Notification Design

The push notification screen just contains the subject, week, and time to effectively communicate only the vital information that a parent needs to know during an emergency. We made the message content all caps to draw the users attention, and we underlined the entire message since to communicate that it's a link to a more detailed page about the emergency notification. 

Desktop Page Design

The design of our homepage was optimized for external users, such as grandparents, so we placed a large amount of emphasis on changes to game times and cancellations. We also decided to add the red warning bar to the top of the page to ensure that any status changes would not be missed by users visiting the site. For the game notification bar, we added a stamp that intentionally cover team logos to any games that were delayed or cancelled. To handle multiple changes to game times/locations, our idea was to add a second warning bar at the top of the page where the various messages would be displayed in sequence, with a fade-in/fade-out transition between different updates. 

The first revision that our team would make to our design is to eliminate the share icons at the end of the new notification screen. These icons were too confusing with the league’s social media icons at the bottom of the page, and were also not relevant with our solution centered around notifications.


Moving forward, we would also remove the redundancy and provide our users clearer desktop web pages. Moreover, we could consider the personal needs of potential users such as color-blind friendly and low-vision friendly.


Finally, there is still room for improving our visual design and making the web pages more intuitive. For example, we could use flashing colors to indicate the most recent game plan. Being radical, we could also add functions which support conversational UI so that users can get the information through a different way.

Future Work

Design Improvements

bottom of page