SheChange

 

Redesigning the Search & Browse page for a platform that empowers consumers to support companies that share their values.

Group 4 Copy 2.png
 

Overview

SheChange is a start-up whose mission is to provide online shoppers the necessary comparison data to make buying decisions consistent with their values.  The app and extension allow shoppers to find, browse and compare company rankings on various issues including: environmental concerns, pay equity, animal welfare, and LGTBQ equality.

Scope

Search & Browse page

Role

UX, UI, strategy

Product

Web App

 
 

The Challenge

The ability for a user to easily compare companies to see how they perform is a crucial part of the product’s UVP. I was asked to redesign the Search and brose page after user research revealed that users were unable to find the compare function of the “Search & Browse” page. I aimed to increase user comprehension and awareness of the page’s functionality by simplifying the UI and improving the UX.

 
 
 

Usability Test Insights

The usability testing results and the client’s feedback informed my process.

Issues found in Usability Test:

  • UI/UX filter function “feels clunky” and out of date

  • Users overlooked compare checkbox or were unclear of its function because of lack of feedback provided to user when box is clicked

  • 10-point rating scale unclear to users

Client Requests:

  • Showcase brand colors

  • Increase the number of variables that the user can sort by

 
Before.png
 
 

Design Solutions

To increase awareness of the compare function we decided to label the compare checkbox and designed a modal to pop up when the checkbox is clicked.

To reduce “clunkiness”, the checkbox filters were converted to drop down menus with filter tags. The rating filter was eliminated and replaced with a rating sort function. By creating columns, we increased the number of variables the user can sort while decluttering the UI.

To reduce confusion with the rating system the 10 point scale was converted into the letter grade system.

To increase usage of brand colors (and simplify/modernize the UI) we redesigned the thumbs up down icon.

 
shechange after combined.png
 
 

Results

  • 5/5 users found and implemented the compare function (previously only one user successfully completed task)

  • Users described the Search and Browse page as “modern” and “easy to understand”

  • The client was pleased with the increased use of brand colors and new sorting functionality.

 

Retrospective

In retrospect, I wish I had more access to the engineer to develop the filtering pattern in tandem, instead of simply handing it off. Once this project ships, I would track the number of “compare checkbox” clicks and the number of conversions from the search and browse page to the compare page to gauge the success of the new design.

When I heard about SHEChange’s mission I was eager to contribute to the product because of my interest and background in the social enterprise sphere. I truly enjoyed simplifying and modernizing UI while simeoutaneously increasing the functionality of the page.