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.

DOWNLOADS

Presentation Deck

User Requirements

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.

Website Overhaul

 The Heroes on the Water redesign running on a mobile device displaying the extended menu.

The Heroes on the Water redesign running on a mobile device displaying the extended menu.

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.

 Heroes on the Water website proposed home page visual redesign. A strong call to action drives users to watch the promo video. Below, a visitor can immediately find ways to get involved, reducing the number of clicks someone has to make to find where they want to go. A visitor can also perform a chapter search to find the nearest HOW chapter to their location.

Heroes on the Water website proposed home page visual redesign. A strong call to action drives users to watch the promo video. Below, a visitor can immediately find ways to get involved, reducing the number of clicks someone has to make to find where they want to go. A visitor can also perform a chapter search to find the nearest HOW chapter to their location.

 Heroes on the Water website proposed "Who We Are" page visual redesign. Users are able to watch a short video about the organization and read a short description of the organization's mission and goals. From here, a visitor can jump to links to learn more about how the organization is connected, further details about kayak therapy, and who runs the organization.

Heroes on the Water website proposed "Who We Are" page visual redesign. Users are able to watch a short video about the organization and read a short description of the organization's mission and goals. From here, a visitor can jump to links to learn more about how the organization is connected, further details about kayak therapy, and who runs the organization.

Final Deliverables

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.