DeepOcean case story image

DeepOcean

Case story: Design and implement a new website, with an up-to-date feel and functionality based on a new brand identity. Migrate from Wordpress to Webflow.

When: 2021-2022

Challenge: Design and implement a new website, with an up-to-date look and feel and functionality based on a new brand identity. Migrate from WordPress to Webflow.

Role: UX Design UI Design, Webdesign and implementation

Client: DeepOcean – a world-leading ocean services provider, based in Norway with offices worldwide. (Commissioned by Graphiq)

Link: www.deepoceangroup.com/

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.

Navigation is key

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

Home page(live link)

DeepOcean website screen shot

Highlighted features

Live updated job posts with TalenTech API integration.

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.

See the Open positions page live.

Interactive chart showing ESG priorities

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.

See the interactive ESG chart live.

Interactive ESG chart

Overview and direction with contact page maps

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.

See the live Contact page.

Full specification access inline with PDF preview

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.

See the live Vessel information page.

Inline PDF preview.

See more Webflow case stories here.

Other work

See all

Slow Adventure

UX Design, Webdesign and implementation, Webflow, e-commerce

ForskningNu

Strategy, Visual Identity, UX Design, UI Design, Implementation

ALT ANDET LIGE

Concept Development, Visual identity, UX Design and UI Design.

Digital Annual Report Concept & UX

Concept, UX Design, Editorial Design

Conferize

Co-founder and Product Director. Global event platform, Registration, Networking.

KLIMANYT

Art Direction, Webdesign and implementation, Community building.

True Energy

UX Design

Services

Editorial Design

Editorial Design

How do we create a great reader experience that preserves and builds upon the best from both traditional print publications and digital media?

Product Design

Product Design

Let’s build an awesome product! It’s based on solid concepts, world-class UX, and clever information architecture, solving real problems.

Stories Without Endings service icon product management

Product Management

To make sure that the right product is being built, and that the product is being built right. That is the right way to go.

Webdesign and implementation

Webdesign and Implementation

Get going with a new website in a few days, or let’s build something big. I work with Webflow, Bubble, Squarespace, Wix, WordPress etc.

Let’s work together!

Tell me about your idea or project and let’s talk!

I’m available for freelance work and consultancy. Short term and longer term. At an hourly, daily or weekly rate, or with a project based agreement.

I’m based in Copenhagen, Denmark and open for remote work and travelling.

jesper@storieswithoutendings.com

+45 2193 9196


Subscribe to newsletter

Get case stories and projects updates

Follow on LinkedIn logoLinkedIn and Facebook logoFacebook.