Responsive Web Design for E-commerce Platform - GreenGoodsco.

Sargun Singh

Web Designer
UX Designer
UI Designer
Adobe Illustrator
Figma
G Suite

The Design Brief

GreenGoods Co. is a new and innovative company that specialises in producing and selling eco-friendly and sustainable products. They offer a range of environmentally conscious items, including reusable household goods, biodegradable packaging, and renewable energy solutions. The client seeks a compelling landing page design that effectively communicates their commitment to sustainability and encourages visitors to explore their product offerings.

Overview

The product

GreenGoods Co. is a new and innovative company that specialises in producing and selling eco-friendly and sustainable products. They offer a range of environmentally conscious items, including reusable household goods, biodegradable packaging, and renewable energy solutions.

The problem

GreenGoods Co. faces the challenge of effectively communicating its dedication to sustainability and encouraging visitors to explore its eco-friendly product offerings through a compelling landing page design. The current lack of an engaging online presence fails to capture the attention of environmentally conscious consumers actively seeking sustainable alternatives.

The goal

Our goal is to create a visually captivating and user-centric landing page design for GreenGoods Co. that effectively communicates the company's commitment to sustainability and encourages visitors to explore its eco-friendly product offerings. By incorporating compelling visual storytelling elements, we aim to convey GreenGoods Co.'s dedication to eco-friendliness, positive environmental impact, and sustainable living.

User Research

The target audience comprises environmentally conscious consumers who are actively seeking ways to reduce their ecological footprint. This audience may include eco-conscious individuals, sustainable lifestyle enthusiasts, and those interested in adopting greener alternatives. My user research highlighted common challenges faced by environmentally conscious consumers seeking sustainable alternatives. These findings underscore the importance of designing a user-centric platform that addresses these pain points while fostering community engagement and promoting sustainable lifestyles.

Pain points

Limited Time for Research and Comparison: Many environmentally conscious consumers face time constraints due to busy schedules, making it challenging to thoroughly research and compare sustainable options.
Difficulty Finding Curated Eco-Friendly Stores: Users struggle to locate nearby stores offering eco-friendly products, hindering their ability to conveniently access sustainable alternatives.
Struggle to Find Budget-Friendly Sustainable Options: Individuals pursuing eco-conscious living on a budget encounter difficulties in finding affordable sustainable products that align with their financial constraints.
Desire for Connection with Like-Minded Individuals: Many users express a desire to connect with others who share their passion for sustainability, seeking a platform where they can share insights, experiences, and recommendations on eco-friendly living.

User Personas
User Personas
Competitive Audit
Competitive Audit
User Journey & Sitemap
User Journey & Sitemap

Wireframes & Low fidelity Designs

In this phase, I meticulously crafted the blueprint for GreenGoodsCo.'s digital realm. Here's a glimpse into my process of conceptualization, refinement, and iteration.
Sketching Ideas: From initial brainstorming sessions to rough sketches, I explored various concepts and mapped out user flows.
Defining User Experience: Through wireframing, I focused on structuring content, prioritizing features, and optimizing usability.
Crafting Visual Foundations: Low fidelity designs allowed me to experiment with layout, hierarchy, and visual elements, ensuring alignment with brand identity and user expectations.
Iterative Refinement: Continuous feedback loops and user testing guided me in fine-tuning details, enhancing clarity, and improving overall user experience.
Mobile app wireframes
Mobile app wireframes
Website wireframes
Website wireframes

Usability Study

In this phase, a usability study with low-fidelity prototypes[mobile] was conducted to cement the core functionalities of the eco-product marketplace app. The low-fidelity prototype connected the main user flow of accessing the product listings and completing the ordering and checkout process so that it could be tested on the first group of testers.

Research goals

The primary goal of this research is to evaluate the usability and user experience of the low-fidelity eco-product and services app. Depending on the research results we may decide to tone up the customization functions to give more accessibility to users or to dial down to make it a more simplistic approach.
The research aims to answer the following questions:
How easy is it for users to navigate and understand the low-fidelity app prototype?
What are the pain points or challenges users encounter when interacting with the prototype?
Does the prototype effectively meet the information and product needs of users in the context of users looking to make eco-conscious lifestyle decisions?
How do users perceive the overall usefulness and value of the prototype in their daily tasks?
What are the key areas of improvement for the prototype based on user feedback?
The following key performance indicators (KPIs) will be used to evaluate the usability and user experience of the app:
Task Success Rate: The percentage of tasks completed successfully by participants.
Efficiency: The time taken by participants to complete specific tasks.
Conversion rates: How many user engage in account creation to continue using the GreenGoods app.
Satisfaction(SUS): The overall satisfaction rating of users with the app compiled with the help of a System Usability Scale.
Usability study observations
Usability study observations
Affinity Map
Affinity Map

Insights gathered

Based on the theme that: [Participants want to be able to edit their cart and procured item on the fly], an insight is: [The Cart overlay should have options/buttons to edit added items].
Based on the theme that: [Participants want to be made aware of delivery arrival before order confirmation], an insight is: [Customers should be presented with full delivery information and options before they opt in for confirmation].
Based on the theme that: [Participants could not perceive which part of the app the participant had navigated to due to lack of proper subtext or indicators]. an insight is: [There should be a more prominent search feature and appropriate indicators and labels need to be implemented for some users to affirm where they are on the user journey].
Based on the theme that: [Participants were overwhelmed and faced difficulties in navigating the homepage as there were no subtext included and screen reader support]. an insight is: [There should be optimised icon subtext and alt text for screen reader users].
Based on the theme that: [Participants had a negative impression of the lack of accessibility features]. an insight is: [There should be more accessibility features implemented for users as their lack thereof leads to a limiting user experience].

High fidelity Designs

Responsive Website breakpoints
Responsive Website breakpoints

Dark mode variants

Responsive website (dark mode)
Responsive website (dark mode)
Mobile app (dark mode)
Mobile app (dark mode)

Mockups & Style Guides

Impact & Takeaway

All in all the designs conceptualized for GreenGoodsco. not just met but exceeded expectations by directly addressing the pain points identified earlier. My journey involved a deep dive into user needs and preferences, leading to streamlined navigation and cleaner content organization. By proactively integrating intuitive design systems, such as establishing color variables and tokens, I ensured seamless transitions between light and dark modes, catering to diverse user preferences effortlessly. Moreover, a commitment to user-centric design has resulted in captivating visual narratives and compelling CTAs, fostering deeper user engagement and loyalty. It's been a journey of transformation, turning challenges into opportunities, and ultimately delivering a digital platform that resonates with users on a meaningful level.

Gallery

Partner With Sargun
View Services

More Projects by Sargun