Final Homepage

Here’s a sneak peek of what the redesigned home page looks like!

👨‍👦‍👦Who are the users?

• Intentional buyers: These users have a specific product in mind when they visit the Namhya Foods website. They are looking for a quick and easy way to find what they need and make a purchase.

• Window shoppers: These users are browsing the Namhya Foods website to learn more about the company’s products. They may not be ready to make a purchase yet, but they are interested in what Namhya Foods has to offer.

Our goal for this redesign is to boost two essential business metrics. 

1. Increase Conversions of Namhya Foods - When Namhya's website clearly communicate what the company does, what products it offers, and how those products can benefit users, then visitors are more likely to try Namhya's products, which will lead to more conversions.

2. Easy Navigation-We have redesigned Namhya Foods navigation bar to make it easier for users to explore their website and find what they're looking for easily.

🔥Let’s get started!

“Now, I’ll walk you through the step-by-step process of how I’ll arrive at this solution.”

🔍Audit of the Current Website

At first, we started with doing the Audit of the current website of Namhya Foods. We did the Heuristics Evaluation of the website to find the Usability issues & we also reviewed the basic structure of a homepage, as recommended by NN Group research.

Competitive Research

Before starting the design of a new Homepage, we did a competitive analysis to Identify existing design patterns. We studied the Homepage of some of the leading health, Beauty, Self-care, and e-commerce websites to understand the decision-making factors of a user, in a better way. Some of the websites were:

 Nyumi 

Nish Hair 

Cosmix 

Broomees 

Winston 

There is a Common pattern and structure in most of the websites on which we have done our research. So, after doing competitors & secondary research we came up with a structure that it mentioned below with heading "Page Structure".

📄Secondary Research 

We did some Research on E-commerce Best practices and also to find out how all the Usability issues & other problems we find on the Current Homepage of Namhya Foods will affect its business. 

📟Page Structure

After analyzing competitor websites and conducting secondary research, we identified some common patterns and questions that first-time visitors have about business, products, credibility, and customer reviews. Here are some of the questions that first-time visitors have:

We took inspiration from our competitors' homepages and the latest e-commerce trends Based on & some other research to create a new homepage structure that is sure to be effective, User friendly, Easy to Navigate and Most Importantly tell users what Namhya foods is all about when they just land on their website.

✅Wireframes & Iterations 

When We started approaching the design problem, we sketched out some options for how we could improve the existing design and resolve the above-mentioned problems.

⚡Final Solution

Now I will show you the Section-by-section Changes we made to the website.

1. Navigation Menu

Problem

• Too Cluttered Users are not able to easily scan its contents and have problems with what they are looking for 
• The Names of Labels in the Navigation menu is not as per what users generally see and what Competitors are Using. 
• Too many choices for users to choose from which will lead to decision paralysis for a user.

Solution

• Use of customer-focused language. Label sections and categories according to the value they hold for the customer, not according to what they do for the company. 
• Every Page on the website is highlighted Properly and linked in the Navigation Bar as in Current website "About Us" and Blogs page is missing.
• Search Bar- According to our Research Users generally Look for the Search bar on a website. If they Don’t Find any their general Perception is the website doesn’t have a search Feature.

2. Hero section

Problem 

• For a first-time user, there is no context about what the website is about.
• There is also no information about what Namhya Food is and how it will benefit users. 
• Use of Exclamation Mark- We literally have no clue as to why they have used exclamation mark on their Hero banner.
• Inconsistent spacing between icons on the hero banner.

Solution

• We created a new hero section banner for Namhya Foods that includes a one-sentence tagline that Concisely communicates what the company is and how it can benefit users.
• We added brief overview of Namhya Food and its benefits to users: Users will learn more about Namhya Food and why they should choose Namhya's products over Competitors.

3. Why Choose Us Section: 

Reasons for adding this section:

• We added a section on our website to highlight the unique benefits of Namhya Foods and how it differentiates itself from its competitors.
• This section helps first-time users get to know us better and understand why our products are worth trying. 
• This Give first time users some solid reasons to why buy from Namhya Foods and not from its competitors.
• With this we are giving our customers questions answer of how I can trust Namhya.

4. Bestsellers Section: 

Problems 

• Cards are Inconsistent in the text, Layout, and Images and also cards are not going with the overall theme of the Website. 
• CTAs of the Bestsellers should be given more emphasis as the current website includes both the price & buy now option in the CTA which makes CTA buttons text-heavy and cluttered. 
• Also, there is no arrow that will tell users that there are more cards in the bestsellers section. 

Solution

• Introduced new cards & images which are Consistent and going with the overall theme of the website.
• Changed the CTAs as the existing ones are too text heavy and they kind of looked like a bit of messy & cluttered.
• Changed Images background and keep them consistent so that each and every product got highlighted properly and get users attention.

5. Explore More Products 

Reasons for adding this section:

• To increase sales of non-bestselling products: By making it easier for visitors to find and browse all of Namhya's products, we try to increase the chances that they will find something they are interested in.
• To improve the customer experience. By making it easy for customers to find the products they are looking for.
• To increase brand awareness: By making it easy for customers to browse all of Namhya's products, we are trying to increase their awareness of Namhya and its Products.

6. As Featured on

Problem

• It is squeezed tightly between two Section, leaving no room to breathe. Users cannot be able to find it in one go if they do not focus on this thing particularly.
• As featured on section deservers more attention and space since it plays a crucial role in establishing trust & credibility with the customers of brand and its Products.

Solution

• We gave proper space on the redesigned homepage as in the current website it is tightly packed between two sections, which will get low or no attention from users.
• In redesign we gave it a lower place in hierarchy on Homepage as it is not the most important thing or task that user need to find on any Homepage.
• We changed its name from "As seen on" to "As Featured on" because most of our competitors doing so and users also aware of that, "As seen on" must be something new for them that why we changed it.

7. Customer Reviews

Problem

• Cards are too text heavy: As it is an Ecommerce website users want to see what others have to say about product & business, but they don't have too much time to go read such a text heavy review and these cards are not scannable enough.
• Cards design and layout are inconsistent: These cards are not Consistent in terms of design as two in middle have more text and two on extremes have less text, which kind of making it inconsistent.

Solution

• To make the customer review section more prominent, we named it "1,00,000+ Happy Customers". This bold and attention-grabbing name clearly communicates the purpose of the section and highlights the number of customers who have enjoyed Namhya's products.
• We increased the size of the customer review cards on the new website because this section is especially important for small and new ecommerce businesses. First-time visitors want to see what existing customers have to say about the products and business before making a purchase.

8. Also Available on

Reasons for adding this section:

• We created this section to give users a sense of control and freedom. Some users may be hesitant to create an account or make a purchase on a new website due to data privacy and safety concerns.
• To address this, we offer users the option to purchase Namhya's products through their preferred website or app.
• We placed this section lower in the homepage hierarchy because we want users to make a purchase from our website first.

9. Our story 

Problem

• Text card overlay on the video card: Users are unable to see the entire video content, which can be frustrating and make them less likely to engage with the content. Additionally, the text card overlay does not look visually appealing and can make the website look cluttered.
• Centered content of Namhya brand story: Creates excessive negative space on both sides of the page. This made the page feel unbalanced and cluttered, and it made it difficult for users to scan the content.

Solution

• Try to make it more scannable: By separating the text and video into their own spaces, we have made it easier for users to scan through our story section.
• We want Namhya our story section looks in a way that is authentic, so that users can connect with the brand. This will help us to build brand awareness and create a stronger connection with our customers.

10. Blogs Section

Reasons for adding this section:

• To drive traffic to specific pages on the website: After Analyzing Namhya's Blogs we have found out that blog pages are linked to some Product pages. so, if we keep blogs section on homepage that will help Namhya is products discoverability.
• To improve SEO: Blogs can help to improve Namhya foods website SEO by providing fresh, high-quality content that is relevant to their target audience.
• To attract new visitors: By providing valuable content, we are trying to build trust and attract potential customers. These new customers could become leads in the future, which could lead to sales.

11. Footer Section

Problem

• No proper utilization of page space in current website as footer has a lot of Negative space on both sides of page.
• Why they have kept everything on the page Center aligned the current footer so cluttered because they have not used the space properly and somehow this center alignment of everything on page reduced its Scannability.

Solution

• When redesigning website footer, we used the page space effectively by placing text in prominent areas, making it easier for visitors to scan and understand.
• We have organized all links under clear and concise headings, unlike the current website where they were not under proper headings. This makes it easier for users to find the links they are looking for.
• We also keep the navigation menu and footer browser menu same because it is common practices. so users are already aware of that what they are going to see in website footer.

🎯Reflection and Key Takeaways

During this project, I developed my design process and learned that every project presents its own unique challenges.
I came to understand that product design is a collaborative process that involves a cycle of feedback and iteration
to refine and improve the design.

Through this experience, I gained the confidence to approach any problem with logical reasoning and an appreciation for the various considerations that go into creating a successful and usable design.

📝Learnings 

• An in-depth analysis of the design decisions is really important to make sure that you’re fulfilling user requirements through empathy.
• Each data point holds a different rank in the hierarchy and needs to be identified and conveyed accordingly.
• I understood the common UI and UX paradigms that exist.
• We worked on a lot of iterations to arrive at the right solution. During this process, I realized that iteration is the key to any optimum design solution. There’s no other way around.

I appreciate you taking the time to read this. I hope you have a wonderful day! 😊 I'd be happy to discuss this further on Twitter or LinkedIn. Just send me a message. 📱

I'm a UX designer who worked on both web and mobile apps, and I'm looking for new opportunities. 😇