On the Water

A website that promotes and educates safe boating on the water.
By Natalie Evans, 2020

Full-Stack Development

Web Design

UX/UI Design

Illustration

What is “On the Water”?

This idea came to me in late 2017 when I started my SVOP (Small Vessel Operator Proficiency) course to become certified to skipper a commercial vessel. We were going over the COLREG’s, a document that summarizes an even larger document International Regulations for Preventing Collisions at Sea, 1972, and safety regulations. I found myself struggling to study from the manual and took to the internet to find a more accessible resource. Unfortunately, I didn’t find anything that helped me study then, but it was my inspiration for this project.

When I started volunteering for the Coast Guard, and I realized that I wasn’t the only person who struggled with retaining information that kept them safe on the water. 

The Process

The Problem

The Problem

This idea came to me in 2017 when I was taking a boating safety course. I found myself struggling to study the International Collision Regulations from the manual and took to the internet to find a more accessible resource.

The Competition

The Competition

Most sites that cover COLREGs are very dry. There are existing sites that implement audiobooks and mobile apps. Mobile apps however are far more innovative with their use of 3D animations, that allow extreme user interaction.

The Idea

The Idea

People who generally learn best by watching and then doing would benefit from a practical way of learning. You can achieve by using real-life examples, easy-to-remember tips and tricks, and a challenge that follows a choose-your-own story style.

The Site

First, I had to figure out who would be most likely to use this tool. I did some research and talked to some people that I knew that were into boating to see if they would be interested in using a tool like this. From this, I drew up two possible users.

Willie, 67

Retired

Owns a sailboat down at the marina and is an avid sailor during the summer. He has his PCOC and ROC and is working on becoming a better sailor, and is taking an advanced navigation and skipper course.

Needs

Something to help him study Collision Regulations. The tool must be fairly intuitive.
Must be able to skip parts he already knows well. Must be able to find parts that he needs more work in.

Frustrations

He has a hard time with most technology and will become frustrated and won’t use the tool if he can’t figure it out. Tools that don’t help him get the job done. Stuff that takes longer than it should.

Fred, 32

Commercial Fisherman

Working as a deckhand on a local fishing boat and wants to upgrade his education, so he can work on becoming a skipper. When he’s not fishing for weeks on end, he enjoys the occasional football game, drinking beer, video games, and working odd jobs (usually manual labor) to tide him over.

Needs

Something that breaks down all the rules so he can remember them. Must be easy to use, and customizable to his needs. It can’t feel like he’s actually learning, he likes online games.

Frustrations

Dry, lame content (so basically he hates collision regulations).
Warm beer and slow loading times.
Loses focus quickly.

Breaking Down the Design

Single-Minded Message

Single-Minded Message

Interactive Stimulated Learning

Tone

Tone

Fresh, Playful, Simple and Accessible

User Interface and User Experience

User Interface and User Experience

Section off the information, break it down and keep it simple. Use visual aids and infographics whenever possible.

Work Breakdown

Visual Assets
  1. Copyright Research.
  2. Asset Collection.
  3. Gather reference from internet, Coast Guard, and past courses.
  4. Organize References.
  5. Create SVG Assets.
Written Assets
  1. Copyright research.
  2. Gather intell from Coast Guard, internet and past courses.
  3. Organize content into each page, post and section.
  4. Simplfy all the content, break it down for accessibility.
Design
  1. Moodboard.
  2. Wireframes (Low-Fi and High-Fi).
  3. Mock-ups.
  4. Interactive Prototype.
Development
  1. Research Theme Development in WordPress.
  2. Install WordPress Site and Download Underscores Starter Theme.
  3. Upload Content and Assets.
  4. Build page and post templates using PHP, HTML and Javascript.
  5. Style Templates Using CSS.
Testing
  1. Initial User Testing with Prototype.
  2. Inital Revisions.
  3. Final Testing using Tree Testing, and Observational Testing.
  4. Revisions as Needed.
Maintenance
  1. Testing For Bugs.
  2. Fix as needed.
  3. Continue to add accessibility, and support for different browsers, and users.

Moodboard

I wanted to create a site that was simple, and little playful, but in a way that didn’t detract from the content at hand. I decided that blue and orange and contrasting colors, and have a bit of a nautical feel to them.

The various shades of blue would allow for semi-realistic waves. As an accent I would use orange and yellow, their contrast to the blue would grab the viewer’s attention immediately.

As for fonts, I generally lean to a san-serif font because of its simplicity and it’s easier to read on a screen, I decided to use a bit more of a casual san-serif, in the hopes that it would make the content it was conveying a bit less dry and uninteresting.

Starting with Wireframes

While designing this site I was always thinking about the users, and how to best layout the information so it would easily be learned and retained. I kept my past self in mind and based most of my elements off of things that I would have like to have access to back then. Most people like myself are visual and practical learners, and it’s so valuable to have relatable content, even if it’s from a normally dense government document.  

By simplifying the information, and breaking it down, and giving the user lots of space to digest the information as they continue along their learning journey.

The Prototype

Once I got feedback on my wireframes, I moved on to creating an interactive prototype. This prototype outlines what the general design will be on my site. I found this design changed as I developed the live site and that some of the design choices made were no longer a viable option and I went in a different design direction. 

The Sitemap

This diagram outlines the structure that I used when creating this project. It outlines the templates created for each page and some of the content that is present.

It also walks through a bit of how I created some of the content. For example, for Learn and Review, I created custom post types for each, and a slider template, called Page-Slider-Learn.php or Page-Slider-Review.php. These custom post types, along with an additional one for Challenge made it possible for me to separate the content accurately and keep my WordPress back-end well organized.

For Challenge, the game is separated out into 3 different stages, Start, Questions and Conclusion, each with their own stages. Upon landing on the Challenge page, you go through the first 2 stages. Once finished, a cookie is created storing your character type and you move on to the Questions state. This state is on a page using the template page-questions-challenge.php which calls up some repeater fields from Advanced Custom Fields Pro. It allowed me to separate out my questions and answers into a database of sorts, each question having their own row. 

Making the Site

First, I installed WordPress and set a starter theme using Underscores, I decided to go with Underscores because it had some accessibility and structure already started, taking off hours and hours of code. I created three custom post types in functions.php called Learn, Review, and Challenge. These would be used to separate and organize my posts about each section. 

I started populating those post types with all of the simplified rules, and regulations that I had written, along with all of the visual assets I had made in Illustrator.  For some of the longer rules, I decided to separate them into multiple posts, and break the rule down, point by point, so there isn’t an overwhelming amount of content on each post. I added categories to each post, depending on the page, and section so they could be easily called up in the future.

After populating the posts types and the rest of the pages I moved onto functionality. I created a slider in Learn using Slick Slider, By Ken Wheeler and called the slider into my template, page-learn-slider.php, and using PHP conditionals, added the logic that would display the right posts with the right page. This meant that users could click through all of the posts individually, minimizing scrolling, and keep content down to a nice bite-sized piece to learn.   

I added a similar structure to Review, but I used the Quiz and Survey Plugin to create my quizzes, this allowed me to choose exactly what I wanted, and prioritize the Challenge functionality, which was proving to be a beast of its own.

With the Challenge section, I set up the questions using an Advanced Custom Fields Repeater Field. I had some functionality issues to work through initially, the first being that WordPress uses mainly PHP to customize and call functions. PHP is a server-side language and I needed something that would make my site more dynamic, so I turned to Javascript. 

After a lot of research, and testing, I finally found a solution that worked for me, that had the dynamic aspects that I needed, called the right question and allowed me to customized every part of that Challenge section.  I ended up using a combination of PHP to call all the rows, the CSS to hide all of then but the first question, then Javascript to apply classes dynamically so the challenge section had the illusion of reloading a question every time.

So What’s Next?

I’m so happy where this project is right now, but I am definitely going to keep working on it. This site is a project that I am really passionate about, and it has some real potential. When I started this project I had no idea of how I would get to where am know, it has been such a great learning experience. 

The next steps for this project is to make it more interactive, animate the visual assets, and make use of some javascript libraries to really push this project into a new level of user interaction. 

I also want to move this project into a mobile app. I’ve also been considering sectioning out the website further into a pleasure section, a commercial section and a Search and Rescue section. Each of those would be sectioned out further depending on the complexity of learning that the user is looking for. For example if someone wanted to study for their PCOC (Pleasure Craft Operator Card), they aren’t looking for the same information that someone studying for their 60-ton ticket would be looking for.