Redesigning Shop Neutral: A Sustainable Shopping Experience

Role

Lead UI Designer,  UX Contributor

Skills

User Research, Prototyping, UI Design

Result

Design Proposal with Mid-fidelity prototype

Team

Product Manager
3 UIUX Designer

We redesigned the Shop Neutral website to create a clean, intuitive interface that highlights ethically sourced, plastic-free products. The goal was to enhance the user experience while staying true to its eco-conscious mission.

Hmm… I want to make a positive impact on the environment while shopping and support local artists at the same time. Where can I find a store that offers a variety of unique, eco-friendly products

Heuristic Evaluation

I began my research by identifying any problems in the website’s current design, focusing on usability gaps and evaluating them against common usability heuristics. This approach gave me a clear starting point to enhance the user experience. I then organized the issues by their impact—low, medium, or high—allowing me to prioritize the most important changes effectively.

shopneutral.com.au_collections_kitchen.png

Navigation & Structure

The navigation primarily offers only the "Shop" option, which could be improved by expanding open categories for easier navigation. Adding breadcrumb navigation would also help users understand their location within the site. Additionally, the search function could be more prominent.

Heuristic Violated: Visibility of System Status, Flexibility and Efficiency of Use

Severity: Medium

2. Design & Aesthetics

The minimalist layout aligns with the brand, but some pages lack visual hierarchy, making it challenging to navigate.
Heuristic Violated: Aesthetic and Minimalist Design
Severity: Medium

3. Product Information

Product descriptions are clear, but additional visuals or short

videos would enhance user engagement and decision-making.
Heuristic Violated: Recognition Rather Than Recall
Severity: Low

4. Accessibility

Basic accessibility features are present, but there is a need for alt text for images and improved text contrast for better inclusivity.
Heuristic Violated: Accessibility and Usability
Severity: High

5. Credibility & Trust

While ethical sourcing statements build trust, the site could benefit from customer testimonials and product reviews to enhance credibility..
Heuristic Violated: Credibility and Trust
Severity: Medium

Competitor Research

With the challenges and objectives in mind, I conducted a competitive feature analysis. I found that small local businesses often don't provide a user-friendly checkout flow, as they use platforms like Shopify and Squarespace. Larger businesses, on the other hand, mostly have custom, refined checkouts and extensive features, as they cater to a larger audience.

Examining competitors of Shop Neutral revealed that smaller sites prioritize simplicity for quicker purchases, while larger retailers focus on advanced options that can hinder the experience. These insights will guide improvements to Shop Neutral's checkout for eco-conscious consumers.

If you’d like to see a thorough research of each competitor, Click Here

User Interview

Next, I conducted four user interviews to understand the values and experiences of eco-friendly shoppers on Shop Neutral. Insights from these conversations, combined with usability testing, helped shape an affinity map to highlight key user interactions and themes. A detailed report of findings is available here.

Navigation Challenges: Users struggled to find product categories, due to overwhelming navigation and insufficient breadcrumbs.

Trust and Credibility Concerns: Pixelated text reduced trust in the shop. Users seek more personal brand info and customer testimonials to boost credibility.

Desire for BetterProduct Info: Users want clear sustainability labels, improved filters, more reviews, and visuals of product usage.

Customer Support Preferences: Users prefer a chatbot for quick help and check FAQs first, highlighting the need for responsive support.

Usability Study

My goal was to observe real user interactions with the site, and the findings were quite revealing

70% of participants struggled to find product categories, with an average search time of 12.75 minutes.

Participants had only a 10% success rate in locating products efficiently.

Key buttons like "Back" or "Cancel" were often missed, causing confusion during the checkout process.

These insights were crucial in shaping my design decisions, leading to significant improvements in navigation, trust, product details, and customer support.

You might be curious about when I will address the problem statement—well, here it is!

I brainstormed the problem statement by focusing on the action, subject, and desired outcome. After conducting thorough research, I crafted a clear and concise problem statement to guide my redesign process effectively. This statement will serve as a roadmap, ensuring that all design decisions align with the identified issues and objectives.

Problem Statement

Users need clarity throughout their shopping experience to trust the site and confidently choose sustainable products.

How Might We

How might we help users confidently buy sustainable products on the website?

Persona

Now, let’s bring together the insights from our competitive analysis, surveys, interviews, and usability study to define our primary persona. Meet Emily.

In this section, we'll delve into her motivations, goals, needs, fears, and frustrations. Understanding Emily will help us design a user experience that truly resonates with our target audience and addresses their specific challenges.

Card Sorting

I felt the need of that a card-sorting exercise during usability testing would be essential for understanding how real users naturally categorize products. So, I jumped in and conducted the exercise, and it paid off—now we have a navigation structure that feels much more intuitive.

Tree Testing

I then conducted a tree test, which validated the new site structure and showed a significant improvement in users' success rates for finding specific products. This confirmed that the updated navigation better meets their needs.

Information Architecture

The heuristic evaluation showed a clear need to redesign the navigation and improve the information architecture, with insights from competitive research guiding the new structure. One of the biggest challenges in this redesign was ensuring a seamless user flow to help users navigate clearly while shopping. After brainstorming, I decided to create two distinct user flows: one for immediate purchases and another for saving items in the cart for a future purchase. This approach allows users to choose the path that suits them best and helps reduce cart abandonment for the business.

Sketches

Building on the information architecture from the card sorting and tree testing, I started the ideation phase by sketching designs in the Miro. I created several pages, keeping the research findings in mind. This sketching allowed me to quickly explore different design solutions for the key features involved.

Mid-Fidelity Wireframes

Using the ideas from my sketches, I began creating mid-fidelity wireframes in Figma. At this stage, I focused on ensuring that both user and business goals were met, while also prioritizing the functionality and overall layout of the pages. This approach allowed me to visualize the user flow and interactions more clearly, setting a strong foundation for the subsequent design phases.

Usability Testing

Conducted usability testing with the mid-fidelity prototype, gathering feedback on navigation, ease of use, and overall satisfaction. Iteratively refined the design based on user insights, focusing on areas that received mixed feedback.

Here are the key points from the feedback received:

100% completion rate with an average task time of with an average search time of 9.6 minutes.

Participants had only
a 100% success rate in locating products efficiently.

Users suggested adding a 'Share with Friends' feature

Design System

I envision a simple, clean design that aligns with the brand's identity. I’m drawn to the softness in the competitor’s website and want to incorporate a similar approachable feel. I’ll also maintain a clear and friendly language style to enhance user engagement

Prototyping

After finalizing the UI kit, I integrated the mid-fidelity wireframes with UI elements to create high-fidelity desktop prototypes in Figma, bringing the updated design to life. Key elements included:

A clean, minimalistic layout to reduce visual clutter.
Consistent use of typography and color to enhance brand identity.
Clear CTAs for improved conversion paths

Home Page

Product listing Page

Product Page

Next Steps

Looking ahead, I’m excited to:

Keep Improving: Continuously gather user feedback to refine the experience.
Boost Personalization: Explore more ways to tailor the shopping journey.
Optimize for Mobile: Enhance mobile optimization to meet users where they are.
Add Sustainability Insights: Include more content to help users make eco-friendly choices.

What I learned

The importance of research:

Compared to previous projects, this project was a lot more research-heavy. I saw this as an opportunity to strengthen my research skills and get more involved in the process of learning about our users and their needs and their psychology. Some of the methods and situations which I encountered for the first time were eye-opening and will be helpful to use moving forward in my design career.