A Cutting-Edge Adaptive Website
For a B2B Company

Client

nGenue Solutions

My role

User research, prototype,
UX design, Visual desidn

timeline

Six months

tools

Figma, photoshop, Miro
Illustrator, Zeplin
Redesigned Website
Old Version Website

nGenue is a best-in-class software solution purpose built for
Natural Gas that fully supports every aspect of natural gas
transportation and distribution.

View live website

About Project

The organization intended to redesign the complete website of the company from scratch and even to include the new implementations and services of the company in the new website with an adaptive design.

My Contribution

To build the website, I worked collaboratively with the CEO, marketing team, and developers as the only designer on the team. My responsibilities include research, prototype, visual design, and testing. It was even necessary for me to design features for a possible future platform expansion that had been excluded from the main roadmap.

Problem Statement

Since two years ago, nGenue solutions have yet to be able to onboard new clients. Furthermore, most customers visiting the website stay for only a few seconds and do not even request a demonstration.

Research

Initial
Research

As part of my initial research, I conducted team discussions to understand the company's expectations and requirements on the website. To move forward with the project, I have collected stakeholder requirements to establish project priorities and timelines.

Qualitative
Data

To make data-driven decisions, I have conducted user interviews with the business's
primary customers and even those associated with the natural gas industry to gain
insights and identify the user's needs, goals and pain points.

Competitor
Analysis

To better understand the natural gas industry and market, I have analyzed multiple competitor websites and how they are trying to acquire customers. After analyzing the competitor's website, I have identified that both websites lacking user engagement. In addition, they need to give importance to the visual designs to understand the information better.

Define

User
Persona

Interviewing the business's primary customers helped me better understand for whom
I am designing the website and their needs, goals, frustrations, and behavior. Creating
a persona enabled me to focus on a user-centric experience rather than being designed
with a generic, one-size-fits-all approach.

The person below displays all my findings about the users I will design the website.

Key Research Insights

Combining customer
needs with business
objectives

  • The website design should be an adaptive.
  • Company services and new implementations should be included in the new website.
  • All the nGenue desktop application features should be contained on the
    website with pieces of information.
  • The website should have a user-friendly interface and a visual storytelling element.
  • Users should be able to access the company's success stories and case studies.

Ideate

Site Map

User flow is essential in the design process because it helped me ensure that users can achieve their goals smoothly and intuitively. It encouraged me as a designer to think about the targeted audience for the business, identify their needs and wants, and create a journey that allows them to accomplish their objectives quickly and easily. User flow also helped me to avoid creating dead ends, ambiguous
calls-to-action, and other usability issues that could lead to user frustration and abandonment.

Prototype

Low Fidelity
Wireframes

I typically begin the prototyping process by creating paper sketches of the website's user interface.
The paper prototypes helped me test user flow, navigation, and interaction. In addition, prototypes
have been presented to stakeholders for their feedback to make iterations on the user interface
hierarchy and the information structure.

High Fidelity
Prototypes

After finalizing the low-fidelity prototypes with the stakeholders, I started designing high-resolution prototypes of the website. Based on the existing design guidelines of the organization, I was able to simulate the website's user experience by developing high-resolution prototypes. When I work as a designer, I prefer to use high-fidelity prototypes as they provide me with an experience close to the
final product without having to build a full-scale working version.

Home/Landing - Page
Solutions -Page
About - Page
Blogs - Page
Blog - Page
Mobile - Version

Takeaways

My Learnings
from the project

  • One of my key learnings from this project was the importance of prioritizing accessibility guidelines and carefully choosing visual elements for the user interface, especially when designing products for Gen X.
  • I have honed my skills in finding a balance between visual elements and dominant elements in user interface design.

  • Most importantly, I've realized the importance of being a good team player when working with people from diverse ethnic backgrounds. This involves being open-minded, respectful, and willing to listen to different perspectives and ideas.