SHEchange

Delivering more meaningful data

CHROME EXTENSION & WEBSITE

SHEchange's Chrome extension conveniently notifies users of corporate social responsibility data/company ratings as they shop online, empowering users to make educated purchasing decisions that align with their values.

SHEchange Chrome Ext Mockup on Mac Laptop

Overview

Challenge

SHEchange’s core mission is to empower users with company data they can use to make better buying decisions and collectively influence companies to adopt better policies for people and the planet, for example: pay equity, ethical supply chains, and animal rights.

Our team was tasked with improving the existing UI/UX of SHEchange’s Chrome extension and website to quickly communicate value to users and increase engagement.

PROBLEM STATEMENT

How might we make data meaningful enough to inspire action? How might we make it easier for users to find information they value?

My Role

Product Designer

  • Led user research on 8-person team
  • Co-led 5-person subteam on clarifying data visualizations and improving information architecture
  • Collaborated with SHEchange’s founder, inhouse designer, and engineer

timeframe

10 weeks

Outcomes

For SHEchange's mission to succeed, users needed to feel compelled to action by the data provided through their Chrome extension. What did users think about the data?

Problem: Confusing Information

During our initial testing, most users were confused by the data they saw. They questioned the data’s credibility and relevance. Only 2/7 users were able to describe what the company ratings meant.

Chrome Extension – Compare Page


Activated on Shiseido Website
Chrome extenstion activated on website

Compare Page Tabs Detail
Chrome extension compare tabs detail

Solution: Actionable Insights

Leveraging best practices gleaned from heuristics evaluation and competitive analysis (and after multiple iterations), we created a consistent, standardized style for the presentation of company ratings data. Users found it easier to evaluate the data and assess alternative companies.

Redesigned Chrome Extension – Compare Page


Activated on Shiseido Website
Redesigned Chrome extension activated on website

Compare Page Detail
Redesigned Chrome extension compare page detail

Solution: Enhanced Engagement

As part of the re-design, the founder also wanted new features (enhancements) to encourage user engagement. This included a different ‘Compare’ page that is triggered when users are looking at a company’s product page.

Redesigned Chrome Extension - Compare Page when viewing a product


Activated on Shiseido Website
Redesigned Chrome extension activated on a product page

Compare Page Detail
Redesigned Chrome extension compare page detail

Results: Excited Users

Users were excited to see company ratings for causes they cared about. With reduced cognitive load, users were able to quickly evaluate data and focus on actions that aligned with their values. Comprehension testing of our redesign showed significant improvement. 7/7 users were able to describe what the company ratings meant compared to only 2/7 before the redesign.

See clickable prototypes of the full redesign below:

Skip to Details ↓

DEsign process

SHEchange design process diagram

research

Although SHEchange provided some research materials, it was limited to a small portion of users that were already ethically-inclined. To grow their user base and generate income from affiliate partners, the founder also wanted to target less ethically-inclined users, where shopping ethically wasn’t top of mind, but something they would incorporate more of under the right conditions.

A few insights about these users from our user interviews were that they:

Based on our research findings from comprehension testing, competitive analysis, and heuristic evaluation, we prioritized three areas of improvement:

  1. Better communication of unique value proposition (UVP)
  2. Information architecture restructure
  3. Clarification of data visualizations

To address them more efficiently, we split into smaller sub-teams. I worked on the teams to improve the information architecture and data visualizations, with a personal focus on the UI/UX of the Chrome extension.

Improving the Information Architecture

During our initial research with comprehension testing, only 3/7 users were able to find information about where SHEchange’s data comes from. Results from tree testing provided further proof that users had difficulty finding information on SHEchange's website.

To help users find information quickly and easily, we conducted both open and closed card-sorting to understand users’ mental models.

We then reorganized SHEchange’s sitemap to reflect insights we gathered: combining related information under new categories, surfacing information that users cared about its global navigation, and removing unnecessary duplicates.

Sitemap Before

SHEchange site map before redesign

Sitemap After

SHEchange site map after redesign

User Journey

We had further refined the sitemap by aligning its global navigation to a user journey we developed.

Global navigation aligned to user journey
  1. Awareness: Annie has heard about SHEchange through a friend. She visits the landing page to see if it will help solve her problem of supporting companies that share her values.
  2. Consideration: Annie learns more about SHEchange and believes in its mission and causes.
  3. Decision to Use: Annie decides to look up a few company ratings and is thrilled with the insights gained. It was easy for her to evaluate the data and decide which companies she wants to support.
  4. Advocacy: Annie further engages with SHEchange and takes action – getting more involved, tweeting to companies about changes she wants to see, and sharing SHEchange with her friends.

More intuitive Navigation

With the new sitemap, 5/7 users able to find information about where SHEchange’s data comes from, compared to only 3/7 users before the restructure.

UsingTreejack, we conducted tree testing with two groups of users. We asked both groups to complete several tasks with one group using the current sitemap and the other group using the new sitemap.

For 8/9 task scenarios, users were more successful with the new site map than the current sitemap.

Clarifying Data Visualizations

Defining User Needs

During our initial research through comprehension testing, my team and I had discovered the following pain points:

It wasn’t always clear to users which company’s ratings they were seeing.
Pain Point 1
Users had trouble assessing if the company ratings were good or bad.
Pain Point 2
There were inconsistencies with data presentation.
Pain Point 3

From our user interviews, we developed job stories to further inform our designs.

Situation
When I’m shopping for a product
Motivation
I want to quickly and easily find out about data like the company’s CO2 emissions, recycling and re-using practices of their waste
Outcome
so that I know whether the company is being sustainable
Situation
When I am making a purchase, the primary factors driving my decision are usually price, quality, and convenience, however
Motivation
I want to know if a more socially responsible company offers an interchangeable alternative
Outcome
so that I can purchase from them instead and support a good cause

Generating ideas

We held several design sprints to sketch out ideas and vote on the ones we thought worked best. During this stage, I had sketched designs for the Chrome extension and Search Pages.

Design sprint sketches

Prototyping Solutions

The best ideas were combined and translated into lo-fi wireframes and a lo-fi prototype that we tested with new users and presented to the founder for feedback. Designs were further refined through mid-fi and hi-fi iterations, incorporating the feedback we’d received.

Below are the different versions of the data visualizations on the Chrome extension’s compare page that I designed. This compare page is triggered when a user is looking at a product page, providing alternative product suggestions.

Version 1 (LO-Fi)

10 point scale + Product Images + Favorite

SHEchange chrome extension version 1

Version 2 (Mid-FI)

Company Logos + Primary Color Indicators

SHEchange chrome extension version 2

From Version 3 onwards, images and prices of product alternatives were removed due to limited engineering resources. The founder plans to add them back in later when more resources are available.

Version 3 (Mid-FI)

5 Tiered Grade + Monotone Color Indicators

SHEchange chrome extension version 3

Version 4 ( Final HI-FI)

5 Tiered Grade + Primary Color Indicators + Blacklist

SHEchange chrome extension version 4

See clickable prototypes of the full redesign below:

Validating with Users

After each iteration, we tested our prototypes with new users to verify if the changes made any improvement. There was improvement in all areas.

A few users even asked to be notified when the updated version would be released. They couldn’t wait to find credible company ratings for causes they cared about all in one place instead of searching multiple websites and articles.


Rainbow chart from usability testing. Assumptions related to the Chrome extension’s compare page are highlighted
Usability testing rainbow chartBack to Results ↑

reflection

I really enjoyed the opportunity to delve into user research with this project. It was an eye-opening experience to learn about the different motivations behind user decisions.

If I were to do again, however, I think I would have cut a few research methods out, such as open card-sorting. Though it provided some insight into users’ mental models, we could have come to the same conclusions with just closed card-sorting. It wasn’t necessary to do both and more time could have been allocated to lo-fi iterations.

We handed over the deliverables to SHEchange and they are currently working on a update to their website and Chrome extension.

“ You have all been absolutely amazing. Thank you so much for your hard work, diligence, creativity and fantastic commitment to this project and our success! ”

– Tracy Wyman, SHEchange Founder