Happy Ocean logo with mascots

About Happy Ocean

A happy ocean is a clean ocean!

Happy Ocean is an interactive website that addresses the effects of plastic pollution on marine animals. The website tells the story of five ocean animal friends who meet for a beach cleanup party. There are several scenes on the beach that tell stories about the experiences of these mascots living with plastic in the ocean. By interacting with the characters and images in each scene, visitors can learn about the impact of plastic pollution and discover ways to help clean up our ocean.

I came up with the concept for Happy Ocean after learning about the overwhelming amount of plastic pollution in our ocean, specifically, the rapidly expanding Great Pacific Garbage Patch. I felt appalled and wanted to do something about it, but I didn’t know where to start; everything seemed so huge and unsolvable. Fear and anxiety-based imagery and messages were not inspiring to me. Instead, all I wanted to do was hide them when they appeared in my social media feeds. I found that I was far more receptive to news articles and movements that spoke of hope instead of doom. Articles and organizations that presented possible solutions to the crisis of plastic pollution actually inspired me to get involved. Happy Ocean was born out of this desire to proactively engage with and explore the urgent issue of plastic pollution through a lens of optimism.

Happy Ocean showcases small puzzles to solve that are meant to engage visitors and hold their attention. There are elements of silliness mixed with facts and information about all the different ways visitors can participate in cleaning up and preserving our ocean, so that together we can all help these marine animals thrive. The project intends to confront and discuss the seriousness of the consequences of plastic pollution in our ocean in an approachable, positive way. The site and story are intended for all ages.

Design Challenges

The primary design challenge for Happy Ocean revolved around developing an interactive website featuring hand drawn illustrations to tell a story that educates users about the effects of plastic pollution on marine animals.

When branding Happy Ocean, I decided to design characters that represent the five groups of marine animals—whales and dolphins, sea turtles, sea lions and seals, seabirds, and fish—that are currently the most vulnerable and critically endangered by ocean plastic and let them tell their stories in a whimsical, playful, fun way that engages visitors and motivates them to act. These characters can be reshuffled and moved around depending on the intended purpose—e.g., for merchandise or other design applications.

The Happy Ocean website features three core components:

  1. Visual stories about the Happy Ocean "mascots" that users unravel and discover as they interact with the site
  2. The organization and presentation of information about the effects of plastic pollution in the ocean throughout the site, along with a resources page that lets visitors know how they can help preserve the ocean and connect with other ocean cleanup initiatives
  3. The branding of Happy Ocean merchandise such as tote bags, t-shirts, books, artwork, Happy Ocean mascot toys, and enamel pins
Happy Ocean mascots

Process: Illustration

Here is a walkthrough of my illustration process from pencil sketch to final completed scene for the website:

Step 1
Rough Sketches

For each illustration, I would start by creating quick sketches with minimal detail to help envision the idea and composition.

Step 2
Pencil Drawings

Next, I began crafting illustrations by hand, using non-photo blue pencil on paper.

Step 3
Inking

After that, I traced over the pencil with blank ink pens.

Step 4
Digital Conversion

The finished drawings were then scanned, cleaned up, and transformed into vector graphics using Adobe Illustrator.

Step 5
Coloring

The Illustrator files were then colored in Adobe Photoshop and exported for the web as png files.

Step 6
Animation

Animations for the site were also created in Photoshop using a similar process, starting with hand drawn illustrations, converting to vector graphics, colored in Photoshop, then finally exported as GIFs.

Step 7
Coding

Each image, background image, or GIF was hand-coded and placed in the Happy Ocean website using HTML, CSS, SASS, jQuery and JavaScript.

Step 8
Completed Scene

Finally, interactive experiences were developed using HTML, CSS, jQuery and JavaScript to achieve specific results for each "scene" on the site.

Step 8 Continued
Completed Scene Example: Green Sea Turtle

For this scene, the user is meant to perform a virtual beach cleanup by clicking and dragging the garbage items on the beach to their respective recycling/waste containers. The intention is to create more awareness about recycling; specifically, which items can and cannot be recycled and how they are sorted.

Step 8 Continued
Completed Scene Example: Green Sea Turtle

As each item is dragged, a popup appears explaining the category of debris. Once the user has dropped the item into the appropriate bin, all items of the same category are removed from the beach. The user repeats this with each category of item until the beach is clear of trash.

Step 8 Continued
Completed Scene Example: Green Sea Turtle

Once all trash has been placed in the proper bins, an animation is triggered featuring the green sea turtle flying a kite across the now clean beach.

Process: Branding + Logo Design

Here are examples of the different permutations of the Happy Ocean logo from early sketches to final design:

Research and Resources

Inspiration

Before I began the process of designing Happy Ocean, I came across three amazing and motivational initiatives on social media: the 2-Minute Beach Clean-Up, 4Ocean, and Ocean Cleanup Project. These organizations and movements influenced my tone for Happy Ocean, as they each provided some sort of productive solution to the problem of plastic pollution in the ocean. They present a range of participation options from small scale local cleanups to international organizations.

The takeaway for me during my research was that no matter what, with a little bit of effort, each of us can find a way to participate in ocean conservation in ways that play to our individual strengths. You don't have to live on the coast to help keep the ocean safe for marine animals; you can help in whatever way works best for you and still make a difference for the better.

Bibliography

You can view or download a copy of my research references here:

#2MinuteBeachClean website image
#2 Minute Beach Clean

#2 Minute Beach Clean

Individuals perform their own local 2-minute beach cleanups and post about it on social media using the hashtag 2minutebeachcleanup.

4Ocean website image
4Ocean

4Ocean

If you can’t make it to the beach for a cleanup, you can still help by funding their efforts, and get a cool bracelet in return. One bracelet pulls one pound of trash from the ocean. To date, 4Ocean has removed over 1 million pounds of garbage from the ocean.

The Ocean Cleanup website image
The Ocean Cleanup

The Ocean Cleanup

Founded by Dutch inventor Boyan Slat, this international project uses an innovative passive system for collecting plastic (especially microplastics) in the ocean, and expects to eliminate half of the garbage from the Great Pacific Garbage Patch in the next 5 years.

Future

In the future, I intend to work on developing a mobile-friendly version of Happy Ocean. This would involve revisioning a lot of the site due to its current landscape-dominant design. Once a responsive/mobile-friendly version is complete, I intend to share the project across social media platforms and reach out to ocean conservation organizations.

I would also love to create different scenes and scenarios within the Happy Ocean world that will change depending on the user’s time zone—morning, afternoon, evening, and nighttime. I have a lot of ideas about other characters to introduce to Happy Ocean, and I’d like to finish up some of the other concepts that I didn’t get to complete during my Capstone semester, as well as add some additional Easter eggs and surprises to the site.

Eventually, the site will also feature a shop that sells Happy Ocean merchandise such as tote bags, t-shirts, felt Happy Ocean mascot toys, and enamel pins. 50% of all profits will be donated to The Ocean Cleanup. There is a fundraiser planned for The Ocean Cleanup through Custom Ink featuring Happy Ocean tote bags. 100% of the proceeds from this fundraiser will be donated to The Ocean Cleanup.

I want to expand on the Happy Ocean theme and create other websites such as Happy Rainforest, Happy Arctic, Happy Antarctic, Happy Desert, etc., that would become a part of network of sites (possibly called Happy Earth or Happy Habitats) dedicated to discussing ecological concerns such as global warming, pollution, endangered species, habitat loss, using the same interactive elements, engaging style, and overall tone as Happy Ocean.

Happy Rainforest, Happy Arctic, Happy Antarctic, Happy Desert logos

Project Site

Social Media