Greensleeves: Sustainable Clothing for the Everyday Consumer

CSE 440 Staff
6 min readDec 29, 2022

By Amrutha Srikanth, Simran Malhi, Nardin Eshak, Lydia Soliman

The Problem

The fashion industry is a major part of economies around the world, and yet it has severe environmental consequences. In order to curb the negative environmental impact of the fashion industry, several companies are creating and promoting sustainable clothes to reduce the negative impact on the environment as much as possible. However, studies have shown that when consumers try shopping sustainably, it is extremely difficult for them to find the pieces of clothing that they desire and understand why the item is sustainable. A study done by Geomatica revealed that even though 86% of study participants believe sustainable clothing is important, about 48% of participants don’t know how to find sustainable clothes and 42% of participants are confused about what makes clothing sustainable. Even when a consumer finds the perfect sustainably-produced clothing piece in their size, they have to contend with higher prices and less availability. As a result, many consumers turn to the ease and accessibility of fast fashion, even if they want to buy sustainable clothing.

The Solution

Our solution, Greensleeves, is a website that helps users find and purchase sustainable clothing easier. This makes shopping sustainably more accessible and informs users of why shopping sustainable is the right thing to do. Through our feature of filtering by item, price, and type of sustainability, we will make shopping sustainably more accessible by adding filters that can narrow down the user’s search with the click of a button. Through our other key feature of providing an explanation of how every sustainable item is sourced and why it’s sustainable, consumers can easily find and purchase sustainable clothing that fits their needs. This helps users understand the importance of shopping sustainably and provides them with the means to purchase sustainable clothing that is right for them.

Paper Prototype

The Creation and Testing of Our Paper Prototype

Before creating our paper prototype, we first brainstormed the tasks thatwe wanted our design to focus on. After generating a series of user tasks ranging from easy to hard, old to new, we pinpointed two tasks that we wanted to focus on based on our user research: (1) Showing how clothing is sustainable and providing cheaper/more accessible alternatives (2) Shopping for sustainable clothing based on a category/filter (ex. filters for the type of sustainability / environmental benefit, filters for budget / price range). Next, we drafted out potential pages for a website on Canva, focusing on the home screen, search screen, and the individual item screens. We then printed out the Canva pages to present for testing.

The Results of Our Paper Prototype Testing

We tested our paper prototype by providing participants with the two task descriptions and the home screen, switching through different pages as participants tried to complete the tasks. After testing our paper prototype with various participants, we found that there were certain areas of the paper prototype that confused users and were not clear enough in their purpose. The most impactful of these issues was the usage of the search bar and filtering system. Users couldn’t understand how to both use the filters and the search bar since the search bar was connected to the filters and it was difficult to see how to type in search terms. We decided to redesign this feature and the filters to give users more clarity by moving the filters to the side of the search bar. By having the search and filter functionality as separate tools, the whole system would follow accepted conventions & be more intuitive, making shopping and browsing easier for
users.

In our usability tests, we also found that users questioned how to get back to their search results after looking at a specific search result. They found only one option to move forward in the page, the add to cart button. As such, we decided to add a back arrow and a search bar so that if the user is not happy with the selected item, they can exit out of the process and browse more. This back button made navigating through the product more intuitive for users.

Conducting usability tests with various participants helped us better understand how potential users would think and walk through our product. By taking these comments and revisions into consideration when working on our more complex digital mockup, we were able to create a more clear interface and a better experience for our future users.

Digital Mock-up

Our digital mockup was created by modifying the Canva slides that we used for the paper prototype. The critical aspects of our design were focused the same two tasks that we had identified after our user research: (1) Showing how clothing is sustainable and providing cheaper/more accessible alternatives (2) Shopping for sustainable clothing based on a category/filter (ex. filters for the type of sustainability / environmental benefit, filters for budget / price range). Our design supports the first primary task by providing an explanation of how a clothing item is sustainable and information on cheaper alternatives on the pages for a specific item when the user clicks on an item to learn more about it and potentially add it to the cart.

Our design supports the second primary task by allowing the user to type keywords in the search bar (shown through the pop-up keyboard), see the search results, and further narrow down the results by selecting filters on the left-hand side of the page.

Moving from the paper prototype to the digital mockup, our prototype was already aesthetically pleasing and had a cohesive color scheme. We chose a color scheme of neutral browns so that the colors of the clothes shown would pop on the interface and this mixture of browns and neutral colors is also seen as sophisticated and clean. For the font, we utilized the font Montserrat because it is a sans-serif font. Without serifs, the font looks more soft and clean, making it easier for users to read. As for the changes made between the paper and digital prototype, we retained the same main idea and designs for the various parts of the tasks. Thus, we instead focused on translating paper components and add-ons from our paper prototype into a digital format, such as adding text for the search terms inside the search bar and using digital check marks to indicate selection of the filters (replaced the paper add-ons in the paper prototype). We also added extra pages to the prototype, such as the cart and no search results pages to improve the cohesiveness of the mockup and cover more potential user scenarios as they navigate through the tasks.

Our final digital mockup can be viewed here: https://www.canva.com/design/DAFQ6uY6EDg/IbjJBse05cmU-PcJQHWjnQ/view?utm_content=DAFQ6uY6EDg&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Greensleeves in Summary

With the rise of fast fashion and increased fear of climate change, more and more consumers are interested in the sustainability of the clothing they buy and understanding how their shopping choices can help or hurt the environment. However, research conducted by our group has shown it is difficult for many consumers to find sustainable clothing that meets their
accessibility (64.3% of participants), budget (71.4% of participants), and sustainability (57.1% of participants) needs. Thus, many consumers turn to fast fashion even if they want to buy sustainable clothing. Our solution, Greensleeves, is a website that gives the user the ability to filter on item, price, and type of sustainability. They can also read more about the production of clothes and the impact that their purchases will have on the environment, empowering users to make more informed decisions. With this design, we hope that you can easily find sustainable clothing that meets your needs while saving the environment!

--

--

CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction