Natural Gas World: small changes, great impact

Make was tasked to improve the experience of an online energy publication.

Overview

Natural Gas World is a specialized independent online publication that provides daily coverage and information about global gas matters.

The target market for NGW is comprised of major stakeholders affiliated with the energy, oil, and gas landscape such as government institutions, law, consultancy firms, suppliers, academics, and scientists.

Goal

Our task was to improve the overall experience of the Natural Gas World website, as well as improve the aesthetic design which will result in more page visits, user engagement with articles, and sales through subscriptions.

Objective 1 — UX

By improving the user experience of the website Make accomplished the following:

• Increase paid membership subscription sign ups
• Enhance navigation through primary & secondary content
• Polish the subscription process

Objective 2 — Brand alignment

Along with the user experience, by refining the messaging of the brand, we set out to:

• Establish NGW as an essential, credible and reliable source for global gas insights and analysis

Analysis

Before brainstorming our approach and sketching the designs, we developed a general audit of the current website to determine the overarching pain points.

Presentation of content

One of the major challenges for the site was the presentation of content in the layout, spacing, color, and typography. Although we saw a distinct look for the visual identity, content presentation needed fluidity.

Here are some cases that we saw while auditing the site:

Case 1: Content above the navigation can be easily missed and disregarded because of the placement, color, and layout.

Case 2: The layout for the profiles have different designs and there’s a lack of negative space for breathing room.

Case 3: Article content is cut off therefore disrupting the reading for potential subscribers.

Inconsistency in navigation

Navigating through the site proved to be a challenge. Links were leading users away from the site and call-to-action buttons were unclear.

Since we want to increase the number of subscriptions and gain traffic within pages, we would want to enhance the navigation to ease up the onboarding process for potential subscribers.

Case 4: The “Subscribe Options” under the “Subscribe” navigation has the same function as “Subscribe” call-to-action at the top creates redundancy.

Case 5: Footer links don’t look actionable and the links don’t have enough contrast from the background.

Case 3: Going to the “NGS Magazine” link under the “Magazine” navigation leads users to another page but goes back to the main site when they click on “Subscribe” making a loop in navigating through the site.

Process

After auditing the site and determining the pain points, we invited users to test the current sight to gather initial feedback and we based our designs on the insight we received.

Testing

Since this is an information-heavy website, we revolved our test scenerios around readability, legibility, and ease of use. Some questions that we asked were:

• Do you find the content readable and legible? Why?
• What were the things you noticed when navigating through the pages?
• If asked to Subscribe on the site, were you able to succesfully Subscribe to the site?

After our initial feedback from test cases, we processed the information, validated our observations in the audit, and started to sketch and draft our designs.

Design

We created a platform that updated the look and feel while still preserving the NGW persona. We introduced new fonts and formalized the color palates.

Sample Style Guide based on the current brand

After creating the initial bits and pieces of the identity, we made some samples of the elements that will be used repeatedly such as the article content, article cards, and buttons. This is to lessen the amount of work that will be done creating elements and focus more on playing around with the layout and placement of elements.

Sample Components based on the guide

Output

We built a system that kept the identity of NGW consistent while modernizing the look and feel of the site.

Home Page — Old design (left) vs. new design (right)

Article Page — Old design (left) vs. new design (right)

Cleanliness and Consistency

The new platform delivered a clean and modern approach while still maintaining brand alignment.

Our goals for the design include:

• Creating a cleaner look that still highlights the brand
• Improving the readability and legibility of the content
• Creating reusable components throughout all pages
• Emphasizing and contextualizing navigations and links

In Summary

All in all, by implementing the proper design thinking process, and conducting UX audits, data-driven research, as well as including consumer and client insights, we were able to improve the overall look and experience of the Natural Gas World website for its intended users.

If you want to check out the live design, check it out here.