Creating a Sustainable Online Shop

The climate footprint of consumption in Denmark was 63 million tonnes of CO2e in 2021, which corresponds to a footprint of 11 tonnes of CO2e per person. Consumers are showing increased environmental awareness, which is influencing their shopping behaviour. At the same time, research shows that most consumers are not able to determine which behavioural changes are worthwhile in terms of sustainability and need assistance to change their behaviour, but the relevant sustainability information is often not easily available. Our project addressed this by developing a user-friendly interface for the Green Database, which rates products based on sustainability criteria. Focusing on online shopping for fashion products, our goal was to empower consumers to make informed, eco-friendly choices. We designed a fashion comparison platform that aggregates sustainability data, enabling users to easily compare and choose sustainable products. Our human-centered design approach ensured that user requirements guided the development process.

Project Approach

Prior Research and Background Information

Our first step in the project was to familiarize ourselves with the context of the project by researching consumer behavior, exploring and preparing the green database and performing a competitive review.

Consumer Behaviour & Competitor Research

To design a sustainable shopping product, we first examined consumer behavior and the competitive landscape. Existing research shows that most Europeans shop online regularly, favoring convenience across various devices, despite awareness of environmental impacts. However, an "intention-behavior gap" often leads consumers to prioritize factors like price and convenience over sustainability.

Given the dominance of online marketplaces and multi-device shopping habits, we focused our project on responsive online shopping rather than physical stores or browser-specific solutions.

We also analyzed six sustainable fashion platforms and four browser extensions. Most competitors evaluate sustainability at the brand level and offer limited product-level insights, often restricted to specific browsers or devices. These findings reinforced our decision to create a platform-independent search interface with detailed, product-level sustainability information, leveraging Green Database’s strengths.

Problem Formulation

Based on this preliminary work we decided to focus our solution on designing a responsive comparison platform. And based our project on the following problem formulation:

We define a comparison platform as a website that aggregates and presents detailed information about products from multiple retailers, enabling users to compare products based on specific information, such as prices or reviews. In our case, we focus on the comparison of products based on sustainability.

First Iteration - User Requirements

Interviews & Thematic Analysis

To ensure that our design solution aligned with the needs of the users, we first needed to gather their requirements. For this, we chose to do semi-structured interviews, as they provide a clear focus but also allow to deviate from the predefined path to get the most valuable insights from the users. We conducted 9 interviews, 6 with women and 3 with men. We chose people with ages ranging from 25 to 55, with an average age of 35.56. The interviewees' nationalities included Danish, German, Slovak, Vietnamese and Australian. We also offered the participants the choice of which language they preferred to be interviewed in. The interview lengths ranged from around 10 to 30 minutes, depending on the depth of the interviewees' answers and the number of follow-up questions.

To analyse the collected data from the interviews, we decided to use thematic analysis, as this approach allowed us to gain rich insights and led us to specify user requirements. Based on the responses from the interview, we identified seven key themes that helped us to highlight the attitudes and behaviours of participants towards general and sustainable online shopping behaviour, together with the information need and decision-making in online purchasing. These are (1) general shopping behaviour, (2) frequency of shopping, (3) search types, (4) decision making, (5) sustainability, (6) sustainable product recognition, and (7) information needs in terms of sustainability. I will not go into depth about the thematic analysis and its components here, but instead move on to the user stories we derived from it.

User Stories

To specify our user requirements, we wrote them down in the form of user stories. We derived user stories from the interviews by using the output of our thematic analysis and our literature review on consumer behavior. Most user stories that we derived from the academic literature on search interface functionalities and consumer behaviour include only the generic user roles of user and consumer, as these are more general needs.

For the user stories of our user research, we identified different user roles or types of users from the interviews and the thematic analysis. On the highest level, we have the role of the online shop user, as this is the criteria by which we selected participants for our interviews. We used this role for the user stories that were not specific to a certain user type. We identified two types of users that differ in their search behaviour: the intentional consumer and the virtual window shopper. In the interviews, numerous participants mentioned that they search for a specific product when shopping online, we called this user role intentional consumer. On the opposite of that is the virtual window shopper, an online shop user who does not have a clear goal but browses through the products. For example, one interviewee said:

This user is first an intentional consumer and then turns into a virtual window shopper. Another user role that was frequently represented in the interviews is the price-conscious consumer. For these consumers, price is a crucial criterion in the decision-making process regarding fashion.

The sustainable-conscious consumer has emerged as a key user role in our user stories. This does not mean that this consumer is primarily or even solely motivated by sustainability, but that there is a certain awareness and willingness to act sustainably. Every participant in our interviews showed a general willingness to act sustainably under certain circumstances.

Closely linked to the role of the sustainable-conscious consumer is the sceptical consumer. We thereby view the scepticism as not only linked to sustainability but more of a general characteristic. This user role has specific needs related to trust, as they for example, might question the trustworthiness of the sustainability score provided by Green Database. These two roles of the sustainable-conscious consumer and the sceptical consumer can pursue the same goal, but sometimes have conflicting needs. The sustainable-conscious consumer, for example, wants information to be as easily accessible as possible without having to dive into detail, while the sceptical consumer has little trust in this information and therefore might want to see more details.

When organising our user stories, we found four overarching themes: search behaviour, product information, decision making, and sustainability information. In total we created 56 user stories that specify various user needs.

First Iteration - Design

After gathering the user requirements, we started the first design phase. To design a user-centered solution, we used the user stories and competitive reviews to sketch the main parts of the solution.

Competitive Reviews

Building on our competitor analysis, we conducted a competitive review focused on user interface design, identifying strengths, weaknesses, and trends among competing platforms. We compared two marketplace websites—Zalando and PriceRunner—and four sustainability-focused platforms—Ecowiser, Good On You, Avocadostore, and Project Cece.
Zalando and PriceRunner were selected for their significance in Denmark and their functionality in helping users find products across multiple sources. We evaluated features like navigation, filtering, search, and product presentation. For sustainability information, we reviewed platforms that provide transparency and labelling for sustainable shopping.

We analyzed 14 features relevant to our user stories across all competitors, gaining valuable insights into current UX patterns and opportunities to shape a more effective and user-centered design for our project.

Screenshot of a small parts of the competitive reviews to showcase our approach.

Ideation

To start our ideation, we held a brainstorming session, where each of us created an idea individually and simultaneously in a 30-minute session. In this session, we focused on how to visualise and communicate the sustainability information in a user interface for the comparison platform, which is the main feature of our solution. Afterwards, we placed our sketches on our Miro board, my sketch can be seen in the picture below, and came together as a group and each of us presented our idea to the others. To evaluate the ideas, each of us got five votes to distribute on whole ideas or aspects of them.

Low-Fidelity Prototype

Following our ideation phase, we developed two versions of a low-fidelity prototype to explore different ways of displaying sustainability information and interacting with product data. Both prototypes included three core screens: product summary, product details, and a simulated retailer website.

We created the prototypes in Figma with a mobile-first approach, optimized for an iPhone SE screen size to ensure scalability across devices.

There are a few common elements between the two versions:

• Product summary screen showing image, product name, brand, price, and sustainability indicators.
• Link to the retailer's website to complete the purchase
• Simulated retailer page for user testing purposes ("Shop Now" or "Visit Retailer" button leading to screenshot)

Version A has a dedicated product page:

• Sustainability score shown on the product image in the summary list
• Clicking a product opens a new, detailed product page
• Sustainability information includes overall, ecological, social, and credibility scores
• Expandable sections for deeper score breakdowns (e.g., chemicals, labor rights)
• Clickable sustainability labels with detailed explanations
• Additional product details (description, available sizes, colors)
• Recommendations for similar items at the bottom of the page

Version B, instead of a product page, has a sustainability pop-up

• Sustainability score shown within a pop-up accessed from the product summary
• No separate product detail page; focus is purely on sustainability information
• Ecological and social scores are expanded and visible immediately
• Minimal interface to support quick decision-making based on sustainability
• Users are directed to the retailer's website for product-specific details

First Iteration - Evaluation

To evaluate our two low-fidelity prototype versions, we conducted a moderated usability test with 8 participants. The test followed a structured process: short introduction, preliminary interview, task completion with probing, and a final wrap-up discussion. Each prototype was tested through three tasks, focusing on discoverability, understanding sustainability scores, and overall navigation.

Task 1: Finding the Sustainability Score

Goal: Assess if users could find the sustainability score while browsing for a product.

Results:

• Version A: Participants found the product page easily, but often overlooked the score in the product summary.
• Version B: Most users missed the sustainability score entirely and navigated directly to the retailer’s page.

Task 2: Investigating Sustainability Score Details

Goal: Determine if users understood and could interact with detailed score components.

Results:

• Version A: Half of the participants found detailed information easily; others overlooked clickable elements. One noted, "I didn't see the information circle at first."
• Version B: All participants found the details easily, likely recalling the interaction from the first version.

Task 3: Exploration and Navigation

Goal: Observe users’ exploration behavior and readiness to proceed to the retailer.

Results:

• Version A: Most participants explored product and sustainability details before moving on; some expected the overall score to be clickable.
• Version B: Many users missed having a product page. One said, "I am used to seeing a product page." Several navigated to the retailer seeking missing information.

Interviews

After testing, participants reflected on usability, ease of navigation, and completeness of information.

• Version A: Preferred for intuitive navigation and comprehensive information. As one participant said, "Screens were simple and well organized. It was nice, fast, easy and natural to navigate." Some expected the overall sustainability score to be clickable.
• Version B: Criticized for missing product information and less intuitive flow. One participant noted, "It was not that intuitive, I would expect to see more details first."

Conclusion

• Version Preference: the majority preferred Version A for its familiar shopping experience.

  »I like the first version more, all the sustainability information was in one area.«

• Understanding Scores: users understood the existence of scores but felt overwhelmed by the details. Several questioned the meaning of the numbers:

  »I don't know what the numbers mean... an explanation would be nice.«

  »Is it a percentage, or a scale from 1 to 100?«

• Terminology Confusion: several users struggled with the meaning of "credibility" in the score system:

  »Whose credibility are we rating here?«

Second Iteration - User Requirements

Following the usability test, we returned to the user requirements phase to refine the design based on user insights — a core principle of Human-Centered Design. We decided to move forward with Version A, which used a dedicated product page to present sustainability information and product details. This decision was supported by user feedback: 5 out of 8 participants preferred Version A, and only 25% successfully found the sustainability score in Version B during testing.

To guide the next iteration, we systematically identified and prioritized interface flaws uncovered during testing. Using a collaborative Miro board, we mapped participant feedback task-by-task and categorized the issues based on:

• Number of participants affected
• Criticality to the overall user experience (low, medium, high)
• Priority for resolution (no priority to high)

We then prioritized the findings to ensure that the most critical usability barriers could be addressed in the next design iteration.

Second Iteration – Design

After prioritizing interface flaws through usability testing, we moved into a second design iteration. We ideated solutions for the most critical issues, upgraded our prototype to high-fidelity, and implemented new functionalities based on user stories and competitive analysis results.

Solving Key Interface Flaws

We conducted rapid individual ideation sessions and collaborative discussions to address the interface flaws with a high priority or that could be fixed easily, and therefore redesign problematic areas.

Product Page

• Understanding Scores: We split the sustainability bar into five color-coded blocks (red, yellow, green) and added an overall Green Database average below the score for better clarity.
• Credibility Confusion: The "credibility" score was then renamed to "Label Credibility" and moved into the sustainability label pop-up for better contextual understanding.
• Reducing Information Overload: Details for ecological and social scores are hidden behind expandable sections, and the credibility score is moved off the main page.
• Clickable Sustainability Score: Clicking the overall score now scrolls the page to reveal detailed scores, matching user expectations.

Additionally, to the changes on the product page, we increased the sustainability scores visibility in the Product Summary by placing it directly under the product image with color highlights to catch attention.

High-Fidelity Prototype

After ideating on the interface flaws, we upgraded to a high-fidelity prototype in Figma, adding a clean, realistic visual design and more interactive elements.

In the high-fidelity prototype, we covered new features, to solve as many user stories as possible. This also includes features that are not specifically linked to the sustainability of the product, but just online shop functionality, that a user would expect for the solution to be able to compete with bigger e-commerce platforms.

• Style Guide: For visual consistency, we created a style guide defining colors (black, grey, white, traffic light colors), a single typeface (Inter), and consistent icons.

• Home Page: The homepage guides users with clear categories, sustainable shopping highlights, popular items, and easy access to transparency information.

• Search Functionality: Users can quickly search and re-access recent queries via an enhanced search interface inspired by the Zalando feature.

• Navigation Menu: A simple burger menu provides quick access to categories and the about page, promoting easy navigation and platform transparency.

• Filter & Sorting: Products can be sorted by price, popularity, or sustainability score. Filters include brand, price, color, size, and sustainability options.

• Recommendations & Re-finding: We implemented "Recently Viewed" and "Popular Items" sections for easier re-finding and personalized recommendations.

• Transparency: Finally, we designed an "About" page explaining how our sustainability scores are calculated to foster user trust and platform credibility.

All major improvements (as described above) converge on the Product Page: upgraded sustainability visualization, detailed expandable sections, and draggable product images.