Greenthread

A browser extension that tackles the problem of consumer awareness in the fashion industry. Developed in collaboration with other UX designers as my Bachelor of Design capstone project.

Timeframe: 12 weeks

Tools used: Figma

Situation: There is a lack of transparency within the fashion industry's supply chain, particularly with brands using deceptive tactics such as greenwashing to appear ethical. The main paradox we wanted to address with our design is that corporations have a vested interest in ensuring that consumers know as little as possible about their supply chain, while consumers want to be more informed about their manufacturing processes.

Concept: Greenthread is a browser extension that notifies users of a brand's ethics and sustainability practices whenever they visit its website. Users can choose which topic (or 'flag') they want to be notified about. Information about brand practices is community-sourced with accompanying evidence and verified by a team of moderators. Each 'flag' is accompanied by links to evidence and alternate brands to purchase from.

A video introduction to Greenthread.

You can view a narrated walkthrough of Greenthread below, or try the high-fidelity Figma prototype yourself here.


Research and Ideation

After choosing the situation we wanted to address (transparency surrounding fashion industry practices), we identified the main stakeholder groups with a vested interest in this topic, creating a diagram of their various wants. We conducted interviews with individuals from these different groups. These included a fashion professor from RMIT researching sustainable industry practices, a small fashion business owner, and students with different shopping habits.

Diagram showing different stakeholders and their wants

Each team member individually developed concepts centered around this situation. We conducted SWOT analyses for each idea, which allowed us to identify the design to move forward with (a browser extension). These included:

  • Strengths: The inclusion of a search function for looking up specific brands is a strength that provided users with more flexibility in looking up their ethical practices. We also found that using an overlay to convey information (instead of a separate app or website) provides an unobtrusive shopping experience for our users, making them less likely to remove the extension.
  • Weaknesses: Throughout our discussion, we discovered the difficulty of providing transparent information for both online and in person consumers in one design. Since interviewees stated they either solely shopped online or shopped both online and in-person, and to simplify our design concept, we agreed that the final design should solely cater to online shoppers. The extension concept also limited our userbase to consumers who shopped using desktop devices. We also needed to address the feasibility of solely relying on community moderators to vet information.
  • Opportunities: How do we convey the reliability of our information to users? How do we deliver information that aligns with a user's values and interests?
  • Threats: In striving to gain users’ trust by displaying adequate evidence to support the information we provide, we recognise users may feel overwhelmed with the amount of information, which in turn deters them from using our product. There must be a balance between information reliability and simplicity. Additionally, we need to find a way to differentiate between vendors on a third-party site (such as two different brands with an Amazon storefront).

Prototyping

We created a range of personas that reflected our key stakeholders in order to guide our design choices.

User persona for a person named Emily

Later in the prototyping process, we created a photo storyboard with one of the personas to visualise a typical use case for the extension. We showcased the process of contributing and amending information to emphasize the community-sourced and moderated aspect of Greenthread.

User scenario walkthrough storyboard

In order to identify areas of improvement, we conducted user evaluation interviews using a low-fidelity prototype (click on the top right corner to enter fullscreen mode). Participants were instructed to complete a set of tasks that allowed us to see how users would navigate the current interface. After completing these tasks, they answered questions relating to the user experience. We also conducted A/B testing in order to test different layouts.

Low-fidelity prototype screenshots

Our key takeaways were the importance of ensuring the reliability of community-sourced information (by factoring in multiple sources) and providing an unintrusive overlay on top of the user's shopping experience.

Final Design

High-fidelity prototype screenshots

We conducted another round of user evaluations using our final high-fidelity prototypes, gathering the following insights:

  • Over 83% of users said they would use Greenthread or something similar, and all but one said it would impact their shopping habits. The extension scored around 3.5/5 on average for usability, primarily due to fixable issues.
  • Participants were confused about what the confidence level represented. Some participants believed it was a rating of how ethical a brand was, rather than a measure of how reliable the evidence is.
  • Participants felt the ability to attach images as evidence (not part of our design) was important. They also wanted clearer guidance on what information would be considered valid evidence.

While Greenthread in its current state shows promise, we've identified clear steps to take in order to improve the user experience:

  • Clarity:
    • Change the wording of the ‘confidence’ bar and add text that explains its purpose
    • Update the contribution form to be more descriptive
  • Legibility:
    • Ensure text is set to a readable size
    • Provide a colourblind/high-contrast mode for visually impaired users
  • Ease of use:
    • Add more methods to submit information to the extension
    • Include a help/documentation page with examples of submitted information
back