EcoRoots
E-commerce website for eco-friendly small business to help customers find sustainable homeware products.
Project Type: End-to-end responsive website
Role: UX/UI designer + fullstack developer
Industry: E-commerce, Lifestyle
Tools: Figma, Django Python Framework, VS Code
Duration: Dec 2023 - Jan 2024
Read
More
Introduction
Project Overview
EcoRoots is an e-commerce website dedicated to offering a curated selection of eco-friendly Beauty, Home, Kitchen & Pet products.
The site aims to provide users with a seamless and enjoyable shopping experience whilst promoting environmentally conscious consumerism.
Completed as a student project as part of a Level 5 Diploma in Web Application Development.
Understanding the Industry
Before diving into design and development, I focused on truly understanding the user experience and how users interact with an e-commerce site. I wanted to make sure the site’s goals were shaped by the needs of it's users, not the other way around. For me, a great e-commerce design is all about keeping things simple, intuitive, and responsive. At the very least, users should be able to browse products effortlessly, add items to their cart, and move through a secure checkout. Beyond that, incorporating features such as product reviews, wishlists, contact forms, and blog posts would create a richer, more engaging experience that feels both functional and authentic.
Site Goals
- Promote Sustainable Living: Encourage and facilitate a more sustainable lifestyle by providing eco-friendly alternatives for everyday beauty, home, kitchen & pet products.
- Curate a Thoughtful Product Selection: Create a carefully curated selection of eco-friendly products that meet high standards of sustainability and environmental responsibility.
- Provide Transparent Information: Offer transparent and detailed information about products to build trust with consumers and foster informed decision-making.
- Enhance User Experience: Provide a user-friendly and intuitive online shopping experience that makes it easy for customers to find, purchase, and receive eco-friendly products.
- Continuous Innovation: Stay at the forefront of eco-friendly trends and technologies, regularly updating the product range to incorporate the latest sustainable innovations.
Persona A
Emma, a marketing professional living in Cardiff, is passionate about sustainability and actively engages in reducing her ecological footprint. She values transparency, authenticity, and
seeks products that align with her eco-friendly lifestyle.
Emma’s Goals:
- Sustainable Living: Emma's primary goal is to live a sustainable lifestyle, aiming to minimise waste, choose eco-friendly alternatives, and support companies with responsible practices.
- Conscious Consumerism: Emma wants to make informed choices when purchasing products, she looks for ethical sourcing, fair labour practices, and renewable materials.
- Convenience: Emma values convenience, she seeks a user-friendly online experience that allows her to quickly find, purchase, and receive eco-friendly products.
How the Site Can Help Emma:
- Curated Selection: The website can provide Emma with a carefully curated selection of eco-friendly and sustainable products, helping her discover new and innovative items aligning with her values.
- Detailed Sustainability Information: Emma values transparency. Providing detailed information about the company's product sourcing and ethical practices, helps her make informed decisions.
- Easy Checkout Process: A streamlined and secure checkout process is crucial for Emma. Offering multiple payment options and efficient shipping ensures a hassle-free experience.
Persona B
Alex, a parent of two young children living in Bath, is a teacher with a strong commitment to raising environmentally conscious children. He is focused on creating a sustainable lifestyle for his family
whilst juggling a busy work and personal schedule.
Alex's Goals:
- Sustainable Family Living: Alex's primary goal is to integrate eco-friendly practices into his family's daily life. This includes choosing sustainable products, reducing waste, and teaching his children about environmental responsibility.
- Convenience: With a busy schedule, Alex values efficiency, wanting to find eco-friendly products without having to browse through extensive lists.
- Discover New Products: Alex is looking for innovative and eco-friendly products within the home & kitchen categories to help teach his children about sustainable living.
How the Site Can Help Alex:
- Product Bundles: The site can offer product bundles catering to family needs, such as an eco-friendly kitchen or home essentials package.
- New Products: Alex can find new products easily from home page, helping him discover new and innovative items that can teach his family about sustainable living.
- Easy Checkout Process: A streamlined and secure checkout process is vital for Alex. Offering multiple payment options and efficient shipping ensures a hassle-free experience that fits into his busy schedule.
Figuring Out the User Journey
Since this was my first time designing an e-commerce site, I wanted to really immerse myself in the user’s perspective
via a user journey map, visualising how someone would move from discovering eco-friendly kitchen products to becoming
a loyal customer. Mapping this out helped me spot not only the key touchpoints but also the frustrations and opportunities
that could make or break the experience. This exercise gave me a clearer picture of how design decisions directly affect
user trust, ease of use, and overall satisfaction—and it became the foundation for my prototyping phase.
Key Findings to Carry into Prototyping
- Add a search bar so users can quickly find the exact product they want.
- Introduce a wishlist and comparison feature to make it easier to evaluate similar products.
- Use clear error notifications and form validation to reduce failed payments or order processing issues.
- Create an easy-to-read order tracking page with all necessary details.
- Set up email follow-ups and a marketing funnel to encourage reviews and highlight new product additions.
With a clear understanding of the user journey, I moved into Figma to start bringing those flows to life. I focused on mapping out the key experiences: product discovery, checkout, and account management, since these are often where users feel most confident or frustrated. Prototyping in Figma allowed me to experiment quickly, test different variations, and visualise how each interaction would feel in practice. I shared these flows with users and gathered feedback, allowing me to spot small friction points I hadn’t noticed myself, and iterating on their input gave me confidence that the final design would feel intuitive and seamless before moving forward with development.
A Daunting Site Build
The site build was especially daunting, as it marked my first experience working with SQL and a relational database system. This had a steep learning curve, designing schemas, writing queries, and ensuring data integrity across multiple tables.
Despite the challenges, I gradually built confidence and successfully integrated the database to support dynamic content and user interactions.
This site build was also my first experience coding with Python and Django. At first, navigating the framework felt overwhelming, understanding how models, views, and templates all connected took some trial and error.
But as I built out the features: user authentication, product management, and checkout functionality, I began to appreciate the structure of Django. It gave me a powerful way to connect my database with the frontend
while keeping everything organised and scalable. Each successful feature felt like a small breakthrough, and by the end, I not only had a working e-commerce platform but also a solid foundation in a framework I was excited to keep building with.
The Final Solution
The EcoRoots website provides a streamlined and engaging e-commerce experience that makes it easy for users to browse eco-friendly products,
add to and adjust their shopping basket, make secure purchases, and manage their own account. The design emphasises clarity, intuitive
navigation, and sustainability-focused messaging, helping promote environmentally conscious choices while delivering a polished,
user-friendly online shopping experience.
Alongside the frontend, customer-facing side of the website, there is an easy-to-use backend of the website where store admins can tailor
what is listed on the website. They are able to add, update and remove product listings, product categories, product reviews, as well as update
user accounts.
