Work      Play      About

Compare Ethics
Visualizing fashions footprint






YEAR
2019

TYPOLOGY
Website

MY ROLE
UX / UI





 

During my time at General Assembly, we were assigned a project for Compare Ethics. It was a two and a half week sprint where, in a team of three, we worked full time to uncover the main areas of improvement and ideate the best possible solutions.


What is Compare Ethics? 

-
Compare Ethics is a website that works as a fashion brand aggregator, connecting consumers to ethically verified brands.

The brands on the website have been previously researched and evaluated and have been appointed an ethical score given their impact on different categories (e.g. carbon reduction, circular economy, plastic free and more).


THE CHALLENGE

Improve the overall UX & UI of the website, making it easier for users to navigate it as well as finding a way to communicate the “ethical score” in a positive and digestible way.


 







PHASE 1 
RESEARCH & DISCOVERY 


Beginning of a journey 

-
During this phase, we focused on understanding our users by researching and empathizing with their needs and motivations. We also analized the core of the business and identified key flaws in the existing product. This exploration proved to be crucial to narrow our efforts and deduce what the points for improvement were. The key parts of this phase were:




USER INTERVIEWS


COMPETITIVE
ANALYSIS


UX/UI REVIEW




1. Survey
& Interviews


To better understand our users, we created a survey that helped us gather deeper insight into their pain points and frustrations as well as understand user expectations when shopping and finding ethically sourced products. We received 52 responses to our survey, representing a demographic of:

  • 75% female 25% male
  • 25 - 35 years old

We proceeded to interview ten of the respondents and based on the information gathered, we created an Affinity Map that helped us breakdown common grounds of interest between responses. 




INSIGHTS


Purchase
71%
of surveyed individuals finalise web purchases on their computers, rather than smartphones.

Power of a story
People like to know the story behind products, it helps create trust between a brand and the public.

Categories of interest
There were three main categories people cared about: environmental, social and animal welfare


PAIN POINTS


Lack of information
Most brands don’t showcase enough information about their production practices and impacts. 

Lack of trust
Even when companies present information regarding their practices, the veracity comes to question.

Elevated cost
 Sustainable and ethically conscious brands tend to have a much higher price in regard to other brands.



2. Competitive
Analysis


By researching direct and in-direct competitors we understood how:

  • Brand aggregators use this functionality.
  • Brands display product information in a engaging and easy way.
  • Scoring / metric system platforms work.



3.  UX Review 


We did an extensive UX review based on basic usability principles and we also tested the current website on 10 users (5 for mobile and 5 for desktop) to spot problematic areas  when going through the main user flow, from product discovery to product purchase.

EXPERIENCE MAP FOR DESKTOP



INSIGHTS


Unclear purpose
The websites functionality as an aggregator wasn’t clear for users, who found it surprising to be redirected to an external website. 

Ethical score
The score that represents how a product ranks given its ethical impact, proved to be confusing and not well understood.


Visual design
The website lacks visual hierarchy and there is a clear inconsistency between the layout of pages




UNCLEAR FUNCTIONALITY




ETHICAL SCORE



INCONSISTENT LAYOUT








PHASE 2
SYNTHETISING OUR FINDINGS


Prioritizing challenges

-
Taking the data gathered during our research and considering time and difficulty constrains, we prioritised features and problems we would improve during the sprint, leading us to the following challenges:

  • How might we help our users understand the websites purpose as an aggregator and not an e-commerce?

  • How might we present the ethical score in a trustworthy, easy to digest and positive way?






PHASE 3
DESIGN, TEST & ITERATE


Time to design

-
We conducted a design workshop with the client, designers and stakeholders where we presented the initial part of our research and together we shaped and brainstormed solutions to the main queries.
This helped us lay the base for our first ideas and lo-fi prototypes.





Product Page &
Aggregator Function


One of the main problems was the design of the product page. It lacked visual hierarchy and when displaying product information, it broke the layout of the page. Users were also confused to be taken to an external website when purchasing a product.

We needed to find a way to present the product data in a coherent and appealing way, by letting users explore the product more in depth and helping them understand that they would purchase the item outside of Compare Ethics. 

Solution:  For a better display of information we created a slide-in / pop-up module with a breakdown of the product. When users hover over an item, a CTA prompting them to discover more about the product appears. When active, the module containing information slides in.

For the aggregator function, we changed the CTA from “Buy Now” to “Visit Website” so users could understand that they would be taken outside of Compare Ethics’ website. 


LO-FI IDEAS: POP-UP MODULE




MID-FI PROTOTYPE: SLIDE-IN MODULE
 


HIGH-FI: HOVER CTA “ABOUT PRODUCT”




Ethical score


One of the main issues with the ethical score, is that when the percentage is low, users are misled  into perceiving a brands impact in a negative way. This defeats the purpose of Compare Ethics which is to showcase brands and products that are making a positive effort in different ways and had passed a certain threshold to make it into the site.

Solution: We removed the score from the main product cards. The ethical impact now appears inside the module containing product information.
Instead of showing an overall score, we broke the rating into the three main categories (animal welfare, social good and planet friendly)  that the user can click on to learn more about a products specific effort.




Iterations: One of the first ideas that came out from the design studio was to change the rating system into a more visually friendly system, as well as adding a positive written range:

  • 1 star = “Good”
  • 2 stars= “Excellent”
  • 3 stars= “Exceptional”

During testing, users found it clearer that all products were ethical, but they were still missing a point of reference.

During next iterations and testing  we changed the written range to  “+45% better for...”  and discarded the icons rating system. This proved to be clearer and easier for users. 


ITERATIONS




Final prototype


BEFORE AND AFTER PRODUCT PAGE




PROTOTYPE WALKTHROUGH








PHASE 4
FEEDBACK & INSIGHTS


Conclusions

-
Being able to work on a project at its early stages with much room to improve, created an interesting and very open environment for us to create and explore ideas with the client, who was at all times very communicative and willing to hear our insights and actively participate.

We found interesting how many issues where related to UX writing. By changing the way content was written and some of the CTAs, helped give a much clearer purpose to the website, allowing users to better understand functionalities.

There’s certainly more testing to be done and more space for discovery but we believe the research and design were very helpful and hopefully will add to the products evolution. 


Mark
 ︎  |  ︎  |  ︎