Consciously

A concept site for rating clothing based on the company's manufacturing policies.

Problem

Consumers are often uninformed when it comes to the environmental footprint of their clothing. The amount of time and effort required to make ethical decisions when it comes to purchasing clothing often outweighs the perceived benefit of shopping consciously.

Hypothesis

Online shoppers are increasingly interested in the environmental impact of their wardrobe and would benefit from a tool that could provide that information with ease.

Methods

SWOT analysis of a competing web service, 5 user interviews, survey of over 30 online shoppers, hi-fi usability testing.

Solution

Consciously provides clear and comprehensive ratings for online shoppers based on the environmental impact of each clothing item in our database. This allows consumers to make informed decisions when it comes to composing their wardrobe.

Laptop mockup image of Consciously website.

Research

In composing a new office wardrobe, I wanted to be a bit more conscientious of the production chain and step away from fast fashion brands. While many fashion labels are striving towards sustainability, the clothing industry is still far from being environmentally friendly. Finding this information proved to be incredibly difficult, which in turn inspired the concept for the site Consciously.

Competitive Analysis

GoodOnYou.eco is an existing site that rates brands based on their impact to the planet, animals, and people. While this site had many strengths, Consciously has a lot of features that would build upon the brand directory base of Good On You.

SWOT Analysis of Good On You

Interview Insights

Forms response chart. Question title: Do you usually consider things like country of origin, materials or dyes used when buying a product?. Number of responses: 34 responses.
Forms response chart. Question title: Do you think having such information when purchasing a new article of clothing would factor into your decision or not?. Number of responses: 34 responses.

The survey and interviews showed that access to this type of information - i.e. transparency of the production chain - would definitely affect users' buying behavior, which could be a potential for affiliate links or partnerships with brands for featured products on the site.

Design

The main functionality for the site is the search. You can search for a category of clothing, such as shoes or sweaters, a brand of clothing, or input a link to a specific item. If the item is in our database, it would bring you to its rating page. The rating page would display the materials used to make this product, as well as any information on the carbon impact of using such material, how it was sourced, etc. The cost breakdown is a write up of the estimated cost of the item in terms of what it costs to the environment, i.e. the cost to the local resources in regards to the amount of water used, the carbon impact of shipping the item and its materials, etc. All this information is compiled to create a rating from 1 to 4 'trees' which signify how ethically produced this item is.

Initial Wireframes

Initial Wireframes

Style Sheet

I wanted to keep the branding natural without having it give off too much of an "earthy" cliche. I also wanted to keep the design sleek an minimal to give it a modern feel, as some of the interview data suggested that a common misconception of ethically sourced clothing is that it is tacky or "funky looking."

User Testing

After applying the styled elements to the prototype, it was tested for UI improvements. The main findings were that there was not enough contrast or white space to break up the content. I also made adjusts to the layout of the navigation bar to address awkward spacing and featured the trees as part of 'How It Works' on the home page.

Chrome Extension Page

In order to create a more integrated shopping experience for users, I created a landing page for a Chrome Extension of Consciously, inspired by Honey. As people are online shopping and hovering over an item that is in the Consciously database, a small card window will pop up by the cursor with a summarized report of the item and an option to view the full report on the Consciously site.

Clickable Webflow Site.

Consciously Prototype

Adobe XD Prototype

Lessons Learned

I'm very proud of this project, as the subject is something I am passionate about, but I am also very proud of the design work and front-end skills that were put to the test on this site. The main challenges for this project were actually in the research phase, as many people are uninformed as to what information is necessary to make informed decisions when it comes to ethically produced clothing. More time dedicated to researching the certifications used in ethical clothing brands, production chains, labor practices, and users' interactions with this information would be necessary to fully flesh out the rating system. In the future, I'd like to code out the entire site, and take Consciously beyond the prototype phase by implementing a database. Furthermore, I'd love to learn how to actually build out Chrome Extensions, because this would be a necessary UX aspect for a seamless shopping experience for the brand.

Other Projects

Mongo CoffeeFront StepsVagabondFido Friendly