GRRR - Creative Digital Agency

The
Ocean
Cleanup

Green / Nominee

Watch

GRRR - Creative Digital Agency

Green

Nominee

We chose WordPress because of its rich editing capabilities, especially when combined with the Advanced Custom Fields plugin. We like to create building blocks instead of fixed templates, allowing the client to create just about any page they want. - GRRR Creative Digital Agency Team

Q: Can you briefly describe your project and the concept behind it?

A: The Ocean Cleanup is a non-profit organization with a mission to develop advanced technologies to rid the world’s oceans of plastic. Main goals of their website are to keep followers and fans up to date, raise funding and help grow their team of highly skilled and scarce to find professionals. We’ve been involved with The Ocean Cleanup for a couple of years. We started out doing only design and front-end work, which was implemented in TYPO3 by a different agency. Later on we became their full digital partner, enabling us to revamp the technical architecture of the back-end.

Q: Talk about your initial prototypes. How did those ideas change throughout design and execution?

A: For an organization with such a clear public mission as The Ocean Cleanup, it's important that your website communicates the right message. Not only by providing the right information to stakeholders, but also by the overall image it conveys. Because the end goal of clean oceans should always prevail above having fancy transitions on your website, the first prototype was a bit more sobre than the current website. The current website still only provides richer content when it serves a purpose that’s in line with The Ocean Cleanup’s main mission.

Q: What web technologies, tools, or resources did you use to develop this?

A: The setup is based on our so-called WordPress Pro setup, which uses Composer for dependency management and Twig for templating. For this project specifically, we've built a static site plugin called Simply Static Deploy. This allows our client to hit a single button to deploy a static version of the website. The site is hosted on Amazon S3 buckets, with CloudFront on top as a content delivery network. Cronjobs are running on the CMS server to gather content from other sources, such as Salesforce and ocean or river systems metadata. Interactive parts are handled by microservices hosted on Amazon Lambda, mostly written in Laravel and NodeJS. Search is handled by an Elasticsearch instance.

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: We chose WordPress because of its rich editing capabilities, especially when combined with the Advanced Custom Fields plugin. We like to create building blocks instead of fixed templates, allowing the client to create just about any page they want. Basically they needed two things which in a normal Wordpress setup are contrarian: a rich editing experience to create rich (and heavy) content and a super fast website that stays fast when visited by millions when launching a new innovation. The concept is ‘the best of both worlds’. Combining the rich content options of a regular Wordpress setup with the seamless user experience of a headless CMS.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

This moment actually came pretty fast: it was the moment we realized we had to design our own custom made architecture to bridge the contradiction we just mentioned. After that, things went pretty fast and smooth. You get that a lot in creating digital platforms. Decision making is the hardest part; if you do that well, constructing can go fast.

Q: How did you balance your creative and technical capabilities with the client’s brand?

A: We use a combination of agile and waterfall working methods, but are not strictly limited to one. The client is very proactive in coming up with new features or ideas, and has good insights into their needs and problems. We then try to come up with solutions along with our client. Design and tech work closely together, and form a team with the client. This collaboration and trust allows us to safeguard the brand, and sometimes improve it on the go.

Q: How did the final product defy your expectations?

A: To develop entirely new technology, The Ocean Cleanup works according to the mantra: “build, test, learn and repeat”, to get to proven technology as quickly as possible. This technological focus is a core part of their branding and is permeating every element of the website, which needs to be accommodating. As a client, your editing options are usually limited because your digital agency is weary of the overall outcome in design and UX. With TOC’s website we’ve clearly found a sweet spot in this sense, allowing loads of freedom to publish content in several ways whilst also maintaining one strong brand image and user experience. Of course it helps that TOC's crew is a tech savvy bunch.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: The amount of design and tech tools and services one can choose from is pretty extensive nowadays. This creates a lot of new opportunities in the way we work and can work. But it's also important to know when to stick to proven and sometimes 'boring' technology. Constantly jumping the bandwagon makes it easy to drown yourself in new tools and frameworks. This can result in increased learning curves and delivery times, inconsistencies between projects and technical debt. We try to leverage new technologies, while maintaining focus on things like progressive enhancement, stability and accessibility. We try to be inclusive. Both towards our users and our existing and new team members.