Employing more than 1.000 people worldwide it was a bit of a daunting task to create the new website for Norwegian offshore service provider DeepOcean. Apart from getting to organize a lot of pages and information, which I obviously love :), the project allowed me to dive into quite a few interesting features, such as designing an interactive ESG chart, integrating live updated job posts via API, and implementing some nice looking Mapbox maps.
Working with a highly efficient marketing one-woman-army who were able to give clear and prompt feedback on likes and dislikes, and a newly updated brand manual with a clear art direction and great photos, the task of establishing the visual direction of the design, giving the brand and identity a breath of new air, was quite a pleasant process. Away with the big boats and men in overalls. In with a new softer and more human look and feel reflecting the company’s journey towards a sustainable future based on inclusion and diversity.
I structured the designs on a simple, solid navigation structure, following basic principles of wayfinding, using breadcrumbs and orientation indicators. I created a range of recognizable shapes and feature blocks based on the brand manual. I made a range of simple icons for the key interactions, a nice readable format for the news articles and case stories, and a range of dedicated overview pages featuring tools and services. Coming from WordPress with a huge back catalog of units, vessels, tools, and article pages, we needed to find a good way to make everything easy to find once migrated to the new design.
Finally, I softened the end-user experience with a few subtle loading animations and animated transitions.
In total, I designed and implemented more than 30 pages for the project All fully responsive working across desktops and mobile
Here’s a flat view of the home page. See the live site at www.deepoceangroup.com
As much as I enjoy being able to organize and utilize data in the designs with the Webflow CMS abilities, sometimes it’s simply easier for a client to not have to update something in multiple places. DeepOcean uses the platform Talentech for HR work and job applications. So I coded an API integration, fetching the newest posts at all times and displaying them in the custom design made for the website.
Adding interactivity to complex graphical elements and illustrations, not only gives you the ability to establish space and focus in a design. Most often a subtle playfulness of interactions and being allowed to explore and discover in the user’s own time, make messages stand out and stick.
Mapbox is a brilliant tool for creating highly customized, branded map experiences. I designed and customized the maps, and integrated them with Webflow adding the external map service links for each office to ease the ability for getting specific directions to the visiting addresses.
Allowing the user full access to specification documents and material is very helpful when needing to browse through multiple units to get the full picture. Embedding PDFs can help with this along with the option of direct downloads.
.webp)
