National Heavy Electric Corportaion

The brief was to create a website for NHEC, a company that deals in the sale and purchase of generators in India, that resonates with their clientele and is visually appealing.

Project overview

The product

NHEC (National Heavy Electric Corporation) is a specialist in embedded power generation. operating in INDIA, as an authorized distributor and service provider for a variety of generators and services.

Project duration

Target audeince

Role

Responsibilities

3 weeks

People looking for generators in India

UX Researcher & Designer

User research, wireframing, prototyping & iterating

The brief

NHEC specializes in a variety of generators. With a growing demand for their products, they needed a brand-new website to effectively showcase their products, improve the user experience, and boost online sales. The goal was to create a clean, modern, and intuitive website that communicated the value of their generators while offering a smooth and engaging experience for potential customers.

The goal

This project aimed to design a user-friendly, modern website for NHEC that effectively showcases their range of generators. The website aims to improve customer experience, drive online sales, and enhance the brand’s digital presence. Key objectives include creating an intuitive interface, providing easy access to product information, making it easy to reach out to the company, and ensuring mobile responsiveness for a seamless browsing experience across all devices.

User research

User Interviews

I conducted interviews with potential customers and existing users to uncover their pain points when browsing websites for generators.

Pain Points included:

Difficulty navigating through product categories.
Lack of clear product comparisons.
Slow loading times and complicated contact process.

Competitive Analysis

I analyzed several competitors in the generator and energy sectors to identify best practices and gaps in their websites. Key findings included:

Many competitor sites had cluttered layouts that made it difficult to quickly find product information.
A few sites offered limited product descriptions or lacked comparison features, which often left users unsure of what they were buying.
The most successful websites prioritized clear, easy navigation and showcased product features effectively.

Initial homepage design

I took inspiration from companies outside the energy sector, such as Apple and Dropbox, for their clean design and intuitive user experience. These websites focus on simplicity, high-quality imagery, and effective product presentation, which I sought to emulate for NHEC’s site.

The homepage serves as the first point of contact for most visitors, so I carefully crafted a layout that would draw users in and guide them towards making informed decisions.

Wireframing:

I began by sketching wireframes to outline the homepage structure. The wireframes included placeholders for images, product categories, and CTAs, with a focus on simplicity and a streamlined user experience. Several iterations were made to fine-tune the user flow based on feedback from stakeholders.

First wireframe draft of the homepage

.....

Color

Colour, elements and typeface of the website

.....

Homepage design decisions:

I decided that the homepage should:

Showcase the Products: High-quality images of NHEC’s generators immediately catch the user's attention, with a clean, simple layout to display the product categories.
Highlight Key Information: The homepage provided easy access to essential product details, service details, what the company stand for, comparisons, and technical specifications.
Encourage Action: Prominent call-to-action buttons, such as "Get a Quote" and "Learn More," were placed strategically to lead users through the purchasing funnel.

I also added the sustainability sections to showcase company values: Consumers are more aware of environmental and social responsibility. A Sustainability section allows the company to demonstrate its commitment to eco-friendly practices and highlight any initiatives related to reducing carbon footprints, promoting renewable energy solutions, or environmentally conscious manufacturing processes. This builds trust and shows that the company is not just selling products but is aligned with global sustainability goals.

Finally, I added the "Subscription section" to help build a lead database, increase customer engagement, boost sales through targeted offers, and establish brand authority. It also enables personalized communication, fosters loyalty, and drives repeat visits.

First draft of the homepage
....

Client Feedback

The client felt the green wasn’t used enough in the first design and didn’t like white as a background because he found it stark and uninviting. He also felt the newsletter sign-up wasn’t prominent enough and that it wasn't highlighted enough. He was happy with the font "Arial" and kept it modern and simple.

For the second version, I introduced cream as the main background colour and added green where appropriate. I also added the newsletter sign-up box after the Why NHEC to break up the blocks of products and information.

I also realised that the "PRODUCTS" headline felt very vague, so I decided to add much more trusted and catchy language.

When working on the header, I realized it's the second thing the user sees and should contain important information and leading links, buttons etc. I added the logo, products, applications, power, service, and media, one CTA button and a search button.

Later, I decided to add career, contact us, language and about NHEC so a user doesn't have to scroll to the footer.

Newsletter color and layout variations

Products display before and after

.....

Header variations

.....

Products page design decisions:

For the products page, I decided to keep it minimal and made sure the language used was easy to grasp for first-time users.

Product page included-

Product image with a name
About the product
Product's output range
CTA

First draft of the product detail page

.....

Iterations

After some feedback from the client, I realised the product page was missing a re-direction for the user, "What should be the next step after going over the product detail" was mentioned. So, I decided to add 3 more options for the user - Get Support, Request a Quote and Contact Us. This will not only help users contact or get quotes from NHEC's team without having to leave the current page but also help in increasing NHEC's sales and conversions.

Final draft of the product page

.....

Final UI Design

Final screen

Accessibility considerations

Used icons and a menu to help navigate through the website and app.
Keeping the target audience in mind, I made sure to use appropriate 22px for the body text and 26px for the heading. Text-based content had a colour for better visuality.
Used simple and easy-to-understand language.

Going Forward

What I learned

There were numerous difficulties in managing a challenging project by myself because NHEC is the first professional web design project I have completed.

I discovered when designing the NHEC's website that the first concepts and presumptions represent only the start of the process. Each version of the website's design is influenced by usability studies, research and feedback.

Additionally, the design process was greatly simplified by research and usability studies, ensuring that every decision was made while putting the user front and centre. Focusing on users, considering their stories, emotions and insights I’ve gathered about them.