Site Overlay

Ocean Shock: Website Review

Climate change is a widespread international issue. A lot of the damage being done to our earth we may not even be aware of because we cannot see it. For example, the effects of climate change on marine life and the ocean. However, thanks to an extensive investigation project called Ocean Shock done by Rueters, an international news organization, you can now have a better understanding of how climate change is effecting our oceans and the life within them.

Ocean Shock is a 2019 Webby award winning website for Best Navigation/Structure, which in my opinion was well deserved. The project/website was started by sailor and journalist Maurice Tamman who saw fish from the south where they are not usually found. He began wondering why fish were doing this unusual migration. After doing some research he found these fish were escaping the warming sea temperatures. Ocean Shock goes in depth about the sad effects of rising sea temperatures and the large marine life migration. They hope to teach their audience about what they refer to as the “important story of the climate change crisis beneath the waves”. They use data from many reliable sources like Rutgers University and the U.S. Coast Guard along with personal stories from those affected by climate change to educate their audience.

Website Content/Layout

When you get to the landing page for Ocean Shock you are immediately met with a short animated graphic of fish swimming around the title and some additional text. It is a simple yet nice and welcoming animation to start your immersion into the readings about the ocean. After the graphic plays the website automatically scrolls down for you where you find 5 sections, each including two links to different information about the effects of climate change on the ocean and marine life. Under the “menu” is a ‘About The Project’ including a link to tell some extra information about how the project began and crediting the large team that worked on this website.

Screenshot of the "menu" section of Ocean Shock showing five sections with links underneath them.
The 5 sections on the Ocean Shock "menu"

 Each of these 5 sections include two links to two different articles relating to the sections title, with the exception of the first link for “Undersea Science”. This link brings you to graphs which show the rising temperature in the ocean and the migration patterns of marine species through the decades. Each article linked to the sections are relatively lengthy. However, the articles are well written not just giving you information but putting meaning behind it with personal stories. All of the articles also include pictures and sometimes videos to help the audience understand the content better. Since these are very long reads and this website is about climate change, the target audience is environmentalist and people like fishers who will be directly effected by something like this. My guess is someone who does not believe in climate change does not want to go out of their way to read these long articles, so why cater to them on your website?

After reviewing this website I am in no way surprised it won a Webby for Best Website Navigation/Structure. The structure of the website is super simple and straight forward but yet still a little innovative. Besides clicking on links to get to the next article, most of what you’re doing on this website is scrolling. You can’t get “lost” within pages of clicking on links. In fact, when you scroll to the bottom of each link the “menu” reappears making navigation to the next article super easy. There is even a “Next” button to take you to the next listed article. I cannot recall ever seeing a website with the menu at the bottom once you’ve scrolled down which is what makes me believe this is some innovative design. The menu feature at the bottom also works super efficiently with the website’s content since its mostly articles you have to scroll through anyway. The only time I ever stopped and wondered how to continue navigating the site was for a split second while reviewing the first link with the graphs. It does not tell you to keep scrolling through the page for information, however, I quickly saw the scrollbar on the of the window was not at the bottom of the page. This is something someone who is familiar with the internet will easily figure out but an older person might not realize there is more to that page. It was just that one single link though, everything else was super straight forward, even without a guide to tell you what to do.

I really like that they have the website structured so that you just have to scroll through the links. Although it is still a beautifully designed website it is not complex at all and shows that they want to focus more on the content of the website, than the aesthetic. Despite being message driven the articles use of illustrations at the top and images throughout the text still make it aesthetically appealing. It also makes it super easy to fully comprehend the information since there is nothing flashy distracting you around the website and you have all the articles already in order.

Accessibility and Responsiveness


 Unfortunately Ocean Shock is not the most accessible projects/websites for those with audio or visual disabilities. After running the landing page and some of the articles through I found no alternate text for images and a large variety of other marked problems including a lot of contrast issues especially on the landing page. Not even the menu section is accessible and videos within the article also do not include subtitles.

All the accessibility errors on one of the articles from Ocean Shook
All the accessibility errors on the article 'The Great Lobster Rush'
Screenshot from showing all the alt text errors on the Ocean Shock "menu"
Screenshot from showing all the alt text errors on "menu"


As for the responsive design, the already existing site layout of the scrolling sets up an easy responsiveness on a mobile device. The animation of the text on the landing page does not seem to fit my phones web page and there is a consistent play button blocking some text. However, everything that was on the desktop version of the website is on the mobile. The only real difference is on your phone there is a menu button in the top right corner not only at the bottom of the page. Since you’re mostly just scrolling anyway on the desktop website it makes the mobile version almost the exact same user experience.

Example of too large text on mobile website
Example of too large text on mobile website


I learned a lot from reviewing this site, not only about good website navigation but also about climate change effects on the ocean. The message is clearly laid out. The articles do well in presenting information and making meaning from that info, they also do a good job at relating it back to regular people and not just fisherman and those close to the ocean. 

You can tell they spent a lot of time on this project and they did a wonderful job with it from information to design. The straight-forward design is effective and makes me think about my own sites navigation and how I could improve it by incorporating less clicking around. However, I do really wish they had made this site more accessible to everyone! 

I really enjoyed my experience while reviewing this website and would strongly recommend it to anyone who wants to learn more about climate change.

Check out Ocean Shock for yourself here.

Leave a Reply

Your email address will not be published. Required fields are marked *