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.
