A world without creativity is like a Harry Potter’s novel without magic. Having been involved in the field of design for over seven years, I frequently embark on a quest to discover new and innovative solutions to the unique challenges that come my way.
By day, I am a UX designer, while my evenings are devoted to my passion for painting. I am currently pursuing a Master's degree in Human Centered Design and Engineering at the esteemed University of Washington in Seattle. In addition to this, I hold a Bachelor's degree in Communication Design and a Master's degree in Visual Design.
Prior to joining the University of Washington, I served as an Interaction Designer with the UX Consulting Team at ValueLabs, and also worked as a Visual Designer with Dorling Kindersley books.
When I'm not engrossed in my work, I take pleasure in traveling, meeting new people, taking photographs, and indulging in my love for food. As a painter, you will often find me engrossed in my canvas, lost in the act of creation.
.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
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
"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"
"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."
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
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.
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.
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
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.
.png)
.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.
Category Specific Icon
Before
Nutritian
Baby Care
Himalaya for Mom
After
Personal Care
Animal Care
Pharma
New Product Specific Icon
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
Final
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
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.
An informative blog categorizing general wellness tips according to different product categories.
Balanced text with visuals, adding photos of the team to showcase the brand's culture and people, which was lacking in the old website.
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.
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.
.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
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.