Landing Page Re-Design of a Niche E-Commerce Brand

“Amrutam” (a niche e-commerce startup offering herbal and Ayurvedic products).

<aside> 🥴 While Exploring the website, my first experience wasn't as great as I expected. Below are website Landing Page snapshots for reference (taken on 1st Dec 2020).

</aside>

The Hero Section

Double click image to enlarge or select the image and hit space to enlarge

Double click image to enlarge or select the image and hit space to enlarge

The Product Categories Section


Best Sellers and New Arrival Section

Featured In Section


Testimonials Section

Footer Section


The Verdict

<aside> 🎯 In the website shown above, I saw a **Scope for improvements, especially with respect to Visual Design and overall experience. - Scale,

</aside>

The Outcome Design Prototype

Please Wait: While the design loads, it might take a few seconds depending on your Internet Speed.

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FDoshIxaaMrGyvb8Zn5OnFg%2FProject-Amrutam%3Fnode-id%3D464%253A7042%26viewport%3D153%252C681%252C0.0713535025715828%26scaling%3Dscale-down-width

Putting the Design to Test 😬


Test 1️⃣ Clarity

New Design Clarity Score 68% (26% Improvement)

Check the full view here and click on Clarity Tab in it.

Check the full view here and click on Clarity Tab in it.

Old Design Clarity Score 42%

Test 2️⃣ Attention Heat Map

Due to limited access for free users, I could only test a few screens.

Due to limited access for free users, I could only test a few screens.

My Approach to Re-design

🚨 Identifying Issues ~ self-heuristics analysis

<aside> 🔣 Very cluttered hero section and no CTA. Didn’t know what to do except scroll halfway down the page in oblivion.

</aside>

<aside> 🚨 Poor: Visual Balance, Hierarchy, application of Gestalt Principles, and colors.

</aside>

<aside> 🤔 No clarity in the value proposition of the brand. Anchors or points that people can relate to and hold their attention.

</aside>

<aside> 🖼️ Confusing Product Categories and Inconsistent Images Inconsistent in a holistic view and also models used images were changing the focus of the user from the product to the models themselves. Also, a hard time understanding the different categories shown and how they are different.

</aside>

<aside> 🔤 Not Skimmable or Scannable website (very text-heavy website) Scrolling is a reflex action people try to scan and skim quickly. Users perceive the least of what they can understand.

</aside>

<aside> 🥴 The website look and feel didn't make me feel good or motivated about the brand or its offering.

</aside>

🗯️ Re-Design Considerations


Goals


Focus on User Experience