EarthNest – Ethical and Inclusive E-Commerce Product Page

Open full project

Project Rationale

The goal of this project was to design a desktop product page for a sustainable e-commerce platform that prioritizes ethical practices, inclusivity, and a seamless user experience. I wanted the design to reflect EarthNest's mission: offering eco-conscious, stylish fashion while being accessible to everyone.

Design Decisions

1. Highlighting Sustainability and Transparency

Sustainability is at the heart of EarthNest, so I made sure to emphasize this throughout the page:

  • A Sustainability Highlights section directly under the product description lists key eco-friendly features like:
  • 🌱 100% GOTS-certified organic cotton
  • ✅ Ethically sourced materials
  • 🌍 Carbon-neutral shipping
  • Certifications like Fair Trade Certified™ and Climate Neutral are prominently placed in the footer. These details build trust and reinforce transparency.

2. Inclusive Design

Creating an inclusive experience was a priority:

  • Diverse Representation: The product imagery includes models of different body types, genders, and skin tones to make all users feel seen.
  • Accessibility Features Badge: I added a small badge near the color selection to highlight features like adaptive sizing, screen reader support, and high-contrast visibility. A tooltip provides additional details without cluttering the layout.
  • Size Inclusivity: Sizes range from XS to XXL, paired with a clear Size Guide to make finding the perfect fit easy.

3. Ensuring Accessibility

To make the design accessible to everyone, I focused on:

  • WCAG-compliant contrast: Buttons, text, and tooltips all meet the required contrast ratios for readability.
  • Readable Typography: Fonts are clean and legible, with a minimum size of 16px for body text.
  • Tooltips: Adding a tooltip for the Accessibility Badge ensures users can get extra context without overwhelming the design.

4. Usability and User Experience

I aimed for a clean, intuitive layout to help users navigate easily:

  • The product page has a clear visual hierarchy, with the product image as the focal point.
  • Call-to-Actions like “Add to Cart” and “Buy Now” stand out in green, aligning with the brand’s eco-conscious theme.
  • In the Reviews section, I included a simple prompt—“Help others by sharing your experience!”—to encourage more user engagement.

Final Thoughts

This design balances sustainability, inclusivity, and usability while maintaining a clean and modern aesthetic. By emphasizing EarthNest’s ethical values and ensuring the page is easy to navigate for all users, it delivers a shopping experience that feels both trustworthy and welcoming.

Let me know what you think! I’d love your feedback.

EarthNest – Ethical and Inclusive E-Commerce Product Page 1

Reviews

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pret

Seems good although it's not clear what the behaviour of the side bar is upon scrolling since the elements below the page fold merge over the content.

Thanks for pointing that out! I actually disabled the scrolling behavior of the sidebar and intended to implement a fixed navbar instead. It was an honest mistake on my part—I'll fix it to ensure the layout works as intended. Really appreciate your keen eye!
31
Claps
Average 3.9 by 8 people
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Ethical and Inclusive Design for E-Commerce Service project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>