On The Water
A website that promotes and educates safe boating on the water.
By Natalie Evans, 2020
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 documents that outline rules and regulations are dense, incredibly dry, and extremely difficult to remember.
Some sites have added audio books as a way for people to learn without reading a whole bunch of content.
Mobile apps however are far more innovative with their use of 3D-animations, that allow extreme user interaction.
Some ways to achieve this would be use real life examples, easy to remember tips and tricks, a challenge that follows a choose-your-own story style.
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.
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.
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.
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.
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.
Something that breaks down all the rules so he can remember them.
Something easy to use, and customizable to his needs.
It can’t feel like he’s actually learning, he likes online games.
Dry, lame content (so basically he hates collision regulations).
Warm beer and slow loading times.
Loses focus quickly.
Breaking Down the Design
- Copyright Research.
- Asset Collection.
- Gather reference from internet, Coast Guard, and past courses.
- Organize References.
- Create SVG Assets.
- Copyright research.
- Gather intell from Coast Guard, internet and past courses.
- Organize content into each page, post and section.
- Simplfy all the content, break it down for accessibility.
- Wireframes (Low-Fi and High-Fi).
- Interactive Prototype.
- Research Theme Development in WordPress.
- Install WordPress Site and Download Underscores Starter Theme.
- Upload Content and Assets.
- Style Templates Using CSS.
- Initial User Testing with Prototype.
- Inital Revisions.
- Final Testing using Tree Testing, and Observational Testing.
- Revisions as Needed.
- Testing For Bugs.
- Fix as needed.
- Continue to add accessibility, and support for different browsers, and users.
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.
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 Site Map
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 pertaining to 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 out into multiple posts, 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.
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.
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.