top of page

HIMALAYA HERBALS

Revamping the e-commerce website and standardizing the design system

Group 168 (2).png

Overview

Himalaya Herbals, a global leader in organic herbal products, underwent a website redesign in 2021 due to poor sales and high dropout rates post-product pages.

My Contribution

  • Laid the foundation for the brand identity and design principles of future redesign.

  • Prototyped wireframes and conducted usability testing to validate hypotheses.

  • Implemented the updated design system and facilitated the handoff to developers.

Duration

6 months (August 2020 to Feb 2021)

My Team

Me (Senior Product Designer)

1 Senior Designer (III)- Mentor

1 UX Researcher 
1 Product Manager

Problem

How do we consolidate content from Himalaya Herbal's several category-specific websites into a unified platform while maintaining the brand's identity? 

Sub Question

How can we maintain relevance across a diverse global audience with a product portfolio exceeding 300 offerings?

A walkthrough of the old website

Solution- Himalaya Herbals underwent a complete revamp, merging multiple websites into a single unified corporate and e-commerce platform, highlighting the brand's diverse portfolio under the theme of "Goodness of Nature."

A walkthrough of the new website

3457440.jpg

So how did we get here?

Evaluating website’s problem areas

The Problem

Key issues affecting the website's user experience included unresponsive design, cluttered content, outdated UI, lack of a unified design system, and multiple regional websites.

I used various research methods to fully understand the problem, blending quantitative and qualitative approaches. This enabled me to pinpoint patterns, discover user's pain points, and efficiently prioritize areas for improvement. My methods included:

Heuristic Evaluation

Conducted Heuristic evaluation to weed out design problems and Accessibility issues.

Usability testing

Conducted 8 usability testing sessions to observe how users interacted with the website.

Competitive analysis

Studied competitor websites to benchmark against industry design standards.

Analytics Review

Analyzed website data to track user behavior, such as page views, bounce and conversion rates. 

Identifying user pain points through UX audit

Group 169.png

"The website is not responsive and the homepage has multiple banner images that don't make much sense to me. It doesn't look very trustworthy"

Group 169.png

"There is so much text to read and very less visuals. I want to see product from different angles, read reviews about it etc. but its not there."

Screenshot 2024-03-10 at 9.49.29 PM.png
Screenshot 2024-03-10 at 10.10.00 PM.png
Group 169.png

I want to see products that can be used together, here it doesn't show it and I have to manually search what other skin care to buy with it.

Quotes from participants during usability testing of the website

Website doesn't convey the brand's image and value

The website failed to effectively communicate the brand's identity and value proposition. Its design elements and overall aesthetic do not align with the brand's image of a "natural, organic premium brand". 

75% of users expressed distrust in the authenticity of products.

Over half of users expressed distrust in placing orders due to outdated website appearances. They mentioned issues like poorly formatted content, limited product visuals, and absence of user reviews, contributing to their hesitation.

56% users struggled with finding the right website

56% of users struggled to find the right Himalaya Herbals website due to existence of multiple website across product categories. This reflects poorly on the brand's online presence and overall organization's image.

Defining our focus

Redesign goals and target audiences

Defining the project's primary goals

Because of the extensive scope of the project, we segmented our design objectives into multiple cycles, prioritizing the most pressing issues initially and systematically addressing all concerns over time.

  • Optimizing the website's  user experience to increase  visitors traffic by 20%.

  • Reduce website's bounce rate by 25% 

  • Increase website's engagement rate by 20% 

  • Get product specifications, and high-quality images along with smooth checkout process.

  • Get tailored recommendations based on browsing history and preferences

  • View user-generated content like reviews, ratings, and testimonials

Group 170.png

UX

USER GOALS

BUSINESS GOALS

CONSTRAINS

New design guidelines and system should be scalable to accommodate the current 300+ offering and future growth and expansion

Defining our target users

The brand targeted Gen Z, focusing on individuals aged 18-28 who value personal care, prefer organic products, and prioritize body wellness.

The secondary user group consists of middle-aged individuals with families interested in herbal products across categories like mother care, baby care, wellness, nutrition, and pharmaceuticals.

-Him_colour_guidelines_Page_2.jpg

Redefining Design Question

How can we modernize the Himalaya Herbal website to blend its rich heritage and traditional values with a captivating user experience that appeals to younger generations?

Mood Boarding
 

In crafting a fresh mood board for Himalaya's website redesign and brand image, we celebrate the use of natural ingredients, sustainable practices, and community-focused initiatives. 

The mood board captures the essence of joy derived from using products enriched with nature's goodness.

Drawing inspiration from this, we aim to cultivate a playful and cheerful vibe in our design approach. Our moodboard features a soothing neutral color palette highlighting the nourishing benefits of herbs and plants. Embracing natural and clean lighting techniques, devoid of harsh shadows, we seek to appeal to a younger audience while honoring timeless traditions.

Anchor 1

Ideation and wireframing

Website's issues and redesign

The website frequently experienced slow loading times, resulting in a subpar user experience.

Before

01

Disengaging product-specific pages

The product-specific page on the website was burdened with excessive text, lacked comprehensive product visuals, and failed to offer an appealing visual experience. It omitted crucial sections such as product reviews and suggested product pairings

These insights are vital for making informed purchase decisions

"

"I want to see real product pictures and user reviews before making a purchase. What if it is not authentic" P1

Screenshot 2024-03-10 at 9.54.35 PM.png
Screenshot 2024-03-10 at 10.09.10 PM.png

After

Overall redesign and introduction of product specific posters

The primary objective of the new product-specific page is to emphasize and elevate the inherent properties of the ingredients utilized in the products, as well as to showcase the unique qualities of each product.  These pages excel in providing comprehensive insights into each offering, emphasizing their advantages and ideal applications. 

Feature

 Introducing reason-to-believe posters,  highlighting each product's unique story, benefits, and organic qualities. The posters also included information like directions for use, long-term benefits etc. with the use of iconography. 

image 3.png
image 6.png
image 5 (1).png
image 9.png
image 7 (1).png
image 8.png
Group 1.png

Reason-to-believe posters

Introduction of Recurring- or subscription model of purchase

Use of accordion menu to tuck away all the additional information

Focus on ingredients used and their properties 

Related product recommendations

Process

Concept development & Wireframing

The redesign prioritized showcasing the quality of every ingredient and product, promoting transparency and building trust between the brand and its customers. A fresh color scheme was developed to enhance the website's visual appeal, with a focus on earthy tones and natural imagery like leaves and fruits. The layout was overhauled to improve intuitiveness, cleanliness, and user engagement. The overall mood of the pages was crafted to be lively, playful, and evocative of natural goodness.

A new color palette was introduced, featuring primary, secondary, and product-specific hues for key product categories.

-Him_colour_guidelines_Page_1.jpg
-Him_colour_guidelines_Page_1.jpg
-Him_colour_guidelines_Page_1.jpg
-Him_colour_guidelines_Page_1.jpg
-Him_colour_guidelines_Page_2.jpg
Category Specific Icon

Before

Group 7.png
LOGO.jpg
Nutritian
Baby Care
Himalaya for Mom

After

Personal Care
Animal Care
Pharma
New Product Specific Icon
icon00.jpg
icon00.jpg
icon00.jpg
icon00.jpg
icon00.jpg
icon00.jpg
Product specific top banner explorations
I explored various styles of top banners to bring more fun to the page along with highlighting the key benefit of the product.  
Product specific reason to believe banner
In our ideation session, I decided to create reason-to-believe product-specific banners, utilizing iconography to emphasize the unique benefits of each product.
Iteration & final design
The clients enthusiastically embraced the concept of reason-to-believe banners and iconography to narrate each product's story. However, feedback highlighted that the increased scroll rate due to multiple banners was detracting from the e-commerce focus of the page. To address this, I decided to convert the reason-to-believe banners and top banners into side posters accompanying each product shot, aiming to strike a better balance between showcasing product benefits and maintaining e-commerce functionality.

Iteration

Group 4.png
ezgif.com-gif-maker (2).gif

Final

Group 9.png

The website lacks any personal touch, such as introducing the individuals behind the brand, which fails to engage users and pique their interest.

Before

02

Disconnected Storytelling: Hindering Audience Engagement with the Brand

The brand maintained a separate website that provided information about its research, corporate responsibilities, news updates, and mission & vision statements. However, the website suffers from excessive text, lack of interactive visuals, and low traffic due to customers not actively seeking it. It also had minimal integration with the main e-commerce site, creating an information conveyance barrier.

"

"I wouldn't even know that this website existed if not being told. The website doesn't natuarly grabs my attention." P4

Screenshot 2024-03-10 at 9.56.00 PM.png
Screenshot 2024-03-10 at 9.59.02 PM.png

After

Integrated Storytelling: Enhancing Audience Engagement with the Brand

To convey the brand's narrative, we crafted a unified story focused on promoting wellness and joy in every home through herbal solutions. This entailed reorganizing the website with two primary storytelling sections and introducing several new pages to effectively communicate the brand's message. Our objective was to streamline information by consolidating it into a single website, eliminating the need for a separate site exclusively dedicated to the brand's introduction.

Feature

 Introducing blogs and podcast series to encourage audience participation and foster a sense of community and belonging.

The story of Himalaya Herbals' rise to its current market position and vision.

Group 10.png

An informative blog categorizing general wellness tips according to different product categories.

Group 16.png
Group 11.png

Balanced text with visuals, adding photos of the team to showcase the brand's culture and people,  which was lacking in the old website.

Group 3.png

Introducing a biweekly podcast showcasing individuals who have made significant contributions to society and wellness.

Process

Webpages and Information architecture redesign

We revamped the information architecture to consolidate "about us" details from various Himalaya Herbal websites, eliminating redundant pages for a more intuitive structure. This new structure is highly intuitive and effectively communicates the brand's story while accommodating ecommerce requirements more seamlessly.

Before

The previous information architecture lacked an "about us" section and a cart icon, leading to customer confusion about their cart contents. It also primarily only emphasized product categories, neglecting other vital information such as store locators, careers, and CSR initiatives, which were scattered across different standalone Himalaya Herbal websites.

Group 191.png

After

To comprehensively capture the brand's narrative, we've expanded the "about us" section into several subsections, covering the brand's story, mission & vision, milestones, and people and culture. Additionally, we've included leadership profiles and enhanced engagement with podcast and blog sections under the media tab. Furthermore, we've introduced a research tab and a CSR tab to highlight Himalaya's significant contributions to plant medicinal research and its commitment to giving back to society.

Design System to accommodate growth

The Himalaya Herbals design system was crafted to set consistent standards for UI components, layouts, and interactions, ensuring a cohesive user experience across the platform. Our goal was to streamline development, minimize discrepancies, and enhance product engagement and loyalty by offering reusable elements.

Desktop - 7.png
Desktop - 8 (1).png
Desktop - 5.png
Desktop - 4.png
05. Components.png
Component 131.png
Component 139.png
Component 130.png

Impact :  Successfully delivered and launched a user-friendly and informative website redesign.

I seamlessly combined corporate and e-commerce features, streamlining user experience for Himalaya Herbal's unified platform. The redesign preserved the brand's core identity of natural, safe healing products while consolidating the diverse product range. With a focus on inclusivity, our design ensures relevance across various demographics, catering to a universal audience.

2.5x

improvement in user comfort scores when using the website

47%

decrease in bounce rate observed after the new redesigned launch.

5x

surge in online product sales within six months of the redesigned relaunch.

Takeaways & Reflection

The_Himalaya_Drug_Company_logo.svg.png

STORYTELLING IS ESSENTIAL

By purposeful design, a narrative can engage users deeply, using visual elements like typography and color to evoke emotions and guide them through a compelling story.

LISTEN TO CORE AUDIENCE

When designing for a target audience, engaging with users helps identify areas for improvement and gain valuable insights, guiding meaningful design enhancements.

bottom of page