top of page
Responsive Web Design
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?
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.
My team and I identified the stakeholders as the league owners, the coaches, and the parents.
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?
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
They understand the importance of communication, but believe that sending updates on an individual basis is time consuming.
The majority believe that current little leagues struggle with a lack of communication, especially when there is a field change or game cancellation.
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.
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.
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.
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.
bottom of page