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 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:
- Crummock Oil and Gas
- Crummock (Scotland) Ltd
- Crummock Nigeria Limited
- Allsports Construction and Maintenance
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.
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.
The research set a strong foundation for information architecture as I have identified two core strategies applicable for every Crummock sub-brand:
- Services - use high level terminology. Be technical.
- Case Studies - categorise by the client/project type and use relevant tone.
The above strategy maximizes a number of entry points to the app.
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.
"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.
Prior to prototyping phase, I introduced UI structure and a visual language to the stakeholders.
"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:
- Reduce height and the amount of scrolling by focusing on the top section of the user interface (header + orange section). It showed much higher level of engagement.
- Add more content to ABOUT US section.
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.