Eco-Goods Co. Website Design
Eco-Goods Co. is a conceptual digital storefront offering sustainable products to environmentally conscious shoppers. This project allowed me to merge my passion for eco-friendly living with UX design. My goal was to design a responsive website that not only appeals aesthetically but motivates users to choose eco-conscious products.
Project Overview
The Product
A digital storefront offering eco-friendly products, with a focus on easy navigation and trustworthiness.
The Challenge
Design a visually appealing, user-friendly website that educates users about sustainability and highlights eco-conscious products across all devices.
The Goal
To create a responsive web design that simplifies eco-friendly shopping while educating users about sustainability, ensuring a consistent and engaging experience on laptops, tablets, and mobile phones.
Understanding the User
To understand the needs of eco-conscious consumers, I conducted market research, reviewed competitor websites, and analyzed social media and forum discussions. This indirect feedback revealed key trends in the sustainable product landscape.
Key Pain Points
Trust and Authenticity
Users had trouble finding reliable eco-friendly products with clear sourcing information.
Community Engagement
Existing eco-commerce sites lacked community features, leading users to feel disconnected.
Navigation Issues
Competing websites were often difficult to navigate, with unclear paths to product categories.
Persona: Emily
Problem statement:
Emily is a environmentally aware professional who needs a reliable source for eco-friendly products because she wants to align her purchases with her values.
Age: 32
Education: B.S. in Marketing
Hometown: Portland, Oregon
Family: Single, living with a dog
Occupation: Director, Marketing & Innovation
"I wish I could spend less time verifying and more time enjoying products that truly make a difference."
Goals
To find a reliable source for a variety of eco-friendly products.
To reduce the time spent on researching the sustainability of products.
Frustrations
Difficulty in finding authentic eco-friendly products with transparent information.
Overwhelmed by other websites in the industry.
Emily, deeply committed to eco-friendly living, struggles to find authentic, sustainable products. Emily is frustrated with websites that lack clear information on product sourcing and environmental impact. She wants a one-stop-shop where she can find a variety of eco-friendly products without hassle.
User Journey Map
Focused on simplifying the shopping process while providing educational content, ensuring a seamless and informative user experience.
Starting the Design
Sitemap
I designed a clean and intuitive sitemap with clear product categorization and an educational sustainability section.
Paper Wireframes
Wireframes focused on streamlined navigation, making it easy for users to find products on laptops, tablets, and phones.
Digital Wireframe Screen Size Variation(s)
I paid close attention to how the design would adapt across different screen sizes, ensuring the website functioned seamlessly whether users were on a laptop, tablet, or mobile phone.
Usability Testing & Key Findings
Study Details
Study type:
Unmoderated usability study
Participants:
5 participants
Location:
United States, remote
Length:
20-30 minutes
Key Findings
Improved Navigation
Users wanted more intuitive access to product categories across devices.
Clear Sustainability Info
Participants valued sustainability facts but felt they needed to be more visible.
Community Section
Users appreciated adding a community feature but wanted it to be more prominent.
Refining the Design
Mockups
Post-study, sustainability information was made more prominent using tags on item displays.
Before usability study
After usability study
Enhanced with background boxes for a refined page layout, the homepage now more effectively highlights products and sustainability information, offering a clearer and more engaging experience.
Before usability study
After usability study
High-fidelity prototype
This high-fidelity prototype reflects Eco-Goods Co.'s final design, incorporating user feedback for an intuitive and responsive user experience.
Desktop
Tablet
Phone
Accessibility Considerations
I incorporated accessibility best practices into the design:
Implement high contrast between text and background to aid users with visual impairments. Avoid using color as the only way to convey information, ensuring accessibility for color-blind users.
Maintain a consistent and predictable layout and navigation structure, helping users with cognitive disabilities to navigate the site more easily.
Use size, color, and layout effectively to create a clear visual hierarchy, aiding users in understanding the importance and order of the content.
Going Forward
Takeaways
Impact:
The Eco-Goods Co. project successfully demonstrated how effective UX design can create an engaging and informative platform for eco-conscious consumers.
What I learned:
This project taught me the importance of balancing usability and aesthetics in responsive web design, especially for niche markets like sustainability. Additionally, the project was a valuable exercise in balancing aesthetics with functionality, ensuring a seamless user experience.
Next Steps
Loyalty Program
Introduce a loyalty program that rewards not just purchases but also eco-friendly actions by users, such as participating in recycling initiatives or community events sponsored by Eco-Goods Co.
Develop a Mobile Strategy
With mobile commerce on the rise, it's essential to focus on a mobile strategy. This could mean either optimizing the website for mobile use or developing a dedicated app to enhance accessibility and convenience for a wider audience.