Designing a web application for
Crummock Oil and Gas

Early in 2014, I had a privillege to join Crummock as a lead UX/UI designer. It was a long-term contract to design and develop a web application for a global offshore security firm and its 3 sister companies. www.crummockoilandgas.com was the first product that we launched last year.

Crummock Oil and Gas

"www.crummockoilandgas.com"

The brief

Crummock is a well-respected, multidisciplinary construction and offshore security company with a growing multi-million pound turnover. It is made up out of 4 umbrella companies each serving a different market:

In 2014, Crummock decided to rethink their digital strategy by hiring a UX/UI designer to conceptualise, design and develop a responsive web application. One of the main deliverables for the project was a consistent interface design that works for all brands and possible future ventures.

Crummock Oil and Gas was the first product to be deployed using the newly built application.

Research

It is no secret that oil and gas industry holds a corporate feel for all of its digital products. We see tons of text and large navigation systems that hide context deep within.

Crummock Oil and Gas had to break this pattern and strive for a better balance between corporate and user friendly experience. Early in the process, I worked alongside Marketing Director David Duncan to analyse user research data.

During this stage I have relied on several sources: the internal research and Google Analytics data of their old website.

Crummock research

The research set a strong foundation for information architecture as I have identified two core strategies applicable for every Crummock sub-brand:

The above strategy maximizes a number of entry points to the app.

Information architecture

Reducing a structure to its core elements was a challenging task to accomplish, especially when managing different expectations.

In the process, I have rendered a consistent information architecture for all 4 products. There were 5 categories established, with the option to include relevant subcategories.

With IA map at my hand, I went on to analyse various scenarios and started wireframe production.

Wireframes - Macbook view Wireframes - iPad view Wireframes - iPhone view

"Selected views of www.crummockoilandgas.com"

Graphical user interface

Clear communication was the key when dealing with a large number of decision makers. After the planning stage it became evident, that high fidelity prototyping is the best way to progress forward. This workflow can be a time consuming, but once deployed - such approach proved to be very effective.

Prototypes have been coded from the ground up using HTML5, CSS3 and Javascript and tested both internally and with end users.

Prior to prototyping phase, I introduced UI structure and a visual language to the stakeholders.

iPad screen 1 - GUI iPad screen 2 - GUI iPhone views - GUI

"Selected screens of www.crummockoilandgas.com"

Product launch and A/B testing

With the first product version deployed, there was a noticeable amount of traffic coming from the non-supported browsers. It did not take long to refine the code and make the site compatible with IE7 and IE8 browsers.

To finalise the product, I used Peek User for A/B testing. Having a video of customers using the product and performing different tasks was very helpful in making final adjustments:

Developing the framework

The last phase of the development cycle was to design a back end framework that enables high level functionality over the app. I have chosen Concrete5 as a foundation and integrated the front-end code of the prototype.

Upon the completion, I documented the process on how to manage the app and ran several workshops for managing personnel.

Crummock Oil and Gas has been successfully deployed and running online. The company is now planning to launch Crummock (Scotland) Ltd using the new framework.