Heroes on the Water
Heroes on the Water is a volunteer-run organization that helps our nation's veterans decompress from the stresses associated with combat by using the therapeutic qualities of fishing from kayaks. Through a partnership with the AT&T Veterans Employee Resource Group and HOW, my team competed with other intern teams across AT&T offices nationwide to pitch a management tool web app and complete overhaul of HOW's current website. Our work, spread across 20% each week for six weeks, won the national intern coding challenge grand prize. Our work is slowly being rolled out to replace HOW's current website.
First and foremost, HOW needed a web app to facilitate management of their organization by keeping track of events they host, attendees and volunteers who help put together the events, and the physical inventory required at each event. Managing these aspects of the organization through spreadsheets was becoming less feasible as the organization continued to grow in size. An example use case is as follows:
1. Organize a kayak trip on Aug. 27 with notifications beginning 2 weeks prior to the event, set up by a chapter manager.
2. Manage signups or assignments for 5 volunteers and 5 participants.
3. Confirm available inventory to support event and manage inventory end-to-end.
4. Ensure event communications reach all users.
5. Collect donor contact information for those interested in funding a kayak trip.
Our management tool extended this basic use case with the ability to manage full directories of participants and inventory as well as send directory-wide communications. The presentation below shows our initial wireframe concepts for functionality of the management console.
In addition to the management console designed for organization and event managers, the Heroes on the Water participating website was in dire need of a redesign. First-time visitors had to click through multiple links to get to event descriptions, which did not present very useful information. Those who wanted to participate had to call or email the listed chapter manager contact to find out more about each event and RSVP for it. The objective of our re-design was to put the message of the organization at the front and make it easy for newcomers to find ways to learn about the organization, find ways to get involved, and participate in HOW events. Events are now organized in card format to facilitate glancing of the most important details as well as give users a way to RSVP to an event. We also aimed to reduce navbar clutter significantly. Rather than allow users to access all of the website's content from the top of the page, each page's buttons created natural paths for users to follow. Access to all the content can still be found through the sitemap at the very bottom.
The re-design makes use of responsive elements in a way the old site did not. Content used to overlap and fail at different screen sizes and was not conducive to mobile use. The new site gives mobile users the ability to operate the site easily. An extension of the management tool functionality could include a mobile check-in site to give event managers a way to easily track arriving participants.
The code written for this project was developed on a MEAN stack. I am responsible for all of the front-end graphics and UI design. The project more or less also taught me how to use Angular as well as Sails/Express. It is currently being worked into Heroes on the Water's official website re-design. Our mission in this re-design has been to help drive users to donate, give them an easy way to see event and organization information so that they’re more likely to get involved whether volunteer or veteran, and finally, provide managers and admins a tool to help them manage the organization by eliminating the need for spreadsheets and redundant work. We pitched our work "shark tank"-style to AT&T and Heroes on the Water management and came out as the grand prize winner.