freelance digital designer

brief

Client: Large Oil & Gas services company

Microsite for
oil and gas company

Working with an agency in Bristol, I had the opportunity to develop a marketing platform for this new Artificial Intelligence software application.

Visualising a new AI software platform for the oil industry required a quick but in-depth discovery, research and iteration of design and content structures.

Utilising user research from another project for the same client I quickly sketched out some wireframes. Two options were taken forward and this is a realisation of one of the ideas.

Trying to tell a technical story through an interactive long-scroll and highlighting the USPs of this exciting new, first–to–market AI product, I wanted to keep the visual design quite simple and monochrome.

The aim of the site was a contact to a sales team to discuss the software further in the user’s context.

UX

wireframes
UX Wireframe Oil and Gas Microsite
UX Wireframe Sketch Oil and Gas Microsite

UX

mobile menu iteration ideas
UX Wireframe Mobile menu
UX Wireframe Mobile menu
UX Wireframe Mobile menu
UX Wireframe Mobile menu

UI

Visual Design & interactions

Initially I had a few technologies that I was toying with – WebGL and SVG animation. WebGL was quickly dropped as we felt it would be too complex and potentially confusing for the introduction. SVG animation soon followed, so a lot of effort went into making the user experience as slick as possible.

An initial design placed the content onto seperate canvases so the site felt like it was made of five pages sat side by side which would have allowed animation to flow between pages. For budget and time constraints we went with a long scroll.

A simple UI allowed the user to focus on the key messages we needed to include, whilst the design pushed the brand but stayed within guidelines.

Oil and Gas Microsite
Oil and Gas Microsite
Oil and Gas Microsite

Interaction design

The responsive site was led by a user first approach. Research had led us to believe that mobile traffic would be dominant so an app feel to the user interactions would help boost the experience. Subtle tweened animations with feedback throughout the site for both the navigation and content.

The animation was led from the mobile version and adapted for the desktop version.

selected work