BuyBetter

Competitive Research and Analysis

I started the research process by doing competitive research and analysis on other extension-first products in the sustainable shopping niche. I researched six in total, and DoneGood and Beagle Button stood out as the two most relevant because they provided recommendations across multiple categories.

User Survey

After conducting the competitive analysis, I launched a survey to learn about people’s online shopping behavior and how they view sustainability. The survey had 33 respondents in total, 31 of which made it through the following screening criteria: 

• They’d bought something online at least within the last 90 days. 
• They’d used a laptop or computer to shop online.

Sustainability Importance Cohorts

Eco-shoppers are the target users for this product, but they’re a niche market. Since I didn’t have a budget nor an existing user base to pull from, I knew that sampling was going to be an issue, and I needed a way to be able to identify likely eco-shoppers from my sample.
‍
To do this, I added a question to the survey that asked participants to self identify based on how important sustainable shopping is to them on a scale of 1 to 10. Using their responses I created different Sustainability Importance Cohorts, which I used to do cohort analysis to see if there were differences between the groups. 
‍
The “Very Important” cohort, those who responded with a 9 or 10, were my proxy for the target eco-shoppers. There were only 6 of these folks out of the 31 responses. While I learned a lot from them, more targeted research with eco-shoppers needs to be done in order to have more statistically significant findings.

With that note, I still carried forth looking for key findings from the survey responses, focusing my analysis on two groups: “All Respondents” and the “Very Important” cohort.

Key Survey Finding #1

Majority Don’t Use Browser Extensions To Shop

The majority of both cohorts said they don’t use a browser extension when they shop online. Amongst those that do, it’s most likely that they only use one and it is a coupon code finder like Honey.
  
This tells me that many of our target users may have never used a browser extension for shopping before, so we may need to put more focus on explaining how it works.

Key Survey Finding #2

Amazon Is Where The Shopping Journey Starts

For both groups, Amazon is the most popular place that participants said they start their shopping journey. For “All Respondents” it is very close between Amazon and Search Engines, but for the “Very Important” cohort, Amazon is the clear winner.
‍
This tells me that Amazon is the first platform we should build our Minimum Viable Product (MVP) around because of all the platforms it was where people are shopping the most—especially our target users.

Key Survey Finding #3

Top 3 Factors That Influence Buying

It was important to identify what factors people use to evaluate new products they’re considering buying so that I knew what kind of product meta-data to include in the design. The top criteria differed between the “Very Important” and ““All Respondents” groups, with the exception of “Reviews” which was included in both groups’ top 3 lists.

Key Survey Finding #4

Most Popular Sustainable Shopping Categories

So I asked participants to first report which categories they had bought products in over the last year. Then, I asked them which categories that they had intentionally bought sustainable and ethically made products in over the last year. 
‍
The categories with the highest crossover—where respondents said they bought products generally and sustainably—will be the focus of the MVP. As you can see from the graph below, for the “Very Important” cohort these categories were clothing, shoes & apparel, and personal care products.

User Interviews

Of the 31 survey respondents, I was able to interview five. Only one of these participants was a part of the “Very Important” cohort, while the rest were either in the “Important” or “Kind of Important” cohorts.
 
This is another area where the sampling challenge of this niche market reared its head. It would be advised to conduct more interviews with folks in the “Very Important” cohort so that we could learn more about our target users, from our target users. Still, I was able to gather great findings that informed the MVP design.

Key Interview Finding #1

Many Are Unfamiliar With Browser Extensions

The majority of the participants I interviewed were uncertain about what a browser extension is and/or how it works. One said “What is a browser extension?” and another said “I’d have no idea where to start”. 
‍
This, along with the survey finding that most don’t use browser extensions, made me think that helping users understand how a browser extension works, and creating an installation experience to test, would be important. Along with meeting this user need, it’s an important business need since BuyBetter is an extension!

Key Interview Finding #2

Many Are Suspicious Of Greenwashing

When asked about the biggest barriers they’ve faced with buying more sustainably and ethically, the common barriers were too high of prices, lack of reviews and lack of transparency. The latter two were often mentioned in the context of being suspicious of a brand’s claims and fear that they were just greenwashing.
‍
This finding signaled to me that users are suspicious and want to be shown proof that products and brands who claim to have sustainable and ethical practices actually do.

Key Interview Finding #3

Most Prefer Recommendations When They Start Searching

I asked users when they’d like to receive product recommendations during the shopping journey, and the vast majority said it would be most helpful to get recommendations at the start. One participant said “Definitely at the start” because it would save them the most time, and three of the other participants had very similar answers. Only one participant would like recommendations after they’d narrowed down to a product. 
‍
This finding validated that it would be best for the extension to show up right after a user searches for a product and starts browsing.

Key Interview Finding #4

Buying Sustainably Makes Them Feel Good

I learned that, beyond enjoying the product itself, participants felt good about themselves when they’d bought from a sustainable or ethical brand. One participant who supports a fair-trade and ethical coffee brand said “I’d rather help a village, than burn it to the ground.” 
‍
The only interview participant who was in the “Very Important” cohort shared that she views this as a way to vote with her dollar and be the change she wants to see in the world. So when she finds a sustainable product that works for her, she feels accomplished.

Target User Persona

Based on these findings, I created three personas. Of these three, Ellie Green was chosen as the target persona for this MVP because she is an eco-shopper, the target user for BuyBetter. Thus, most of her persona was informed by the findings from the “Very Important” cohort. 

Ellie is a young professional woman who deeply believes that she can vote with her dollar and be the change she wishes to see in the world. She primarily shops on Amazon, usually looking for clothing, shoes & accessories, personal care products or household supplies. She doesn't use browser extensions, nor really know much about them.

When it comes to sustainable shopping, she needs help finding alternative products to buy, vetting them, and finding reviews on them. She is most frustrated by how long it takes to find alternatives, the lack of reliable information, and when she has to revert back to a less sustainable option after a new product doesn’t work.

Target user persona (Click to enlarge)

Empathy Map

Leveraging more of what I had gathered from interviews and the survey, I created an empathy map for Ellie so that I could continue to better understand her as I was starting to think more about her journey, needs, and wants. 

Empathy map (Click to enlarge)

Journey Map

I imagined a common scenario she may find herself in so that I could identify opportunities for BuyBetter to help her as she sets out to solve her problem. She is about to run out of shampoo (a personal care product) and that makes her think about how this time she should actually look for a sustainable replacement, ideally something plastic-free. 
‍
Through this journey mapping exercise, I identified the following key opportunities where we could help Ellie:

• Organize our recommendations into different categories, such as Best Budget, Highest Reviewed, Plastic-free, etc. 
• Show her product metadata inside the extension to help her evaluate and choose, along with an easy way for her to see the sustainable features of each product. 
• Give her the ability to see why we recommended the product and go deeper to vet the product and brand. 

Journey map (Click to enlarge)

MVP User Stories

Having spent time researching and empathizing with our target user to better understand their needs, frustrations, and expectations I felt ready to focus on how they’d describe what they need BuyBetter to do for them.
‍
This helped me center the user, and in combination with the opportunities I noted from journey mapping, I created the following MVP user stories, ranked by priority:

• As an eco-shopper, when I look for shampoo on Amazon I want to be recommended other shampoos that are made sustainably and ethically so that I can save time, find new brands, and shop more sustainably.
• As an online shopper who has never used a browser extension before, I need help installing the extension in my browser and understanding how it works. 
• As an eco-shopper, when I am looking at a list of recommended shampoos from sustainable brands, I want to be able to easily see the price, the reviews, and the values of the brand so that I can more easily compare products and make a decision.
• As an eco-shopper, I want to be able to save the products I have been recommended so that I can look at them later without having to have a bunch of other tabs open.
• As an online shopper getting product recommendations from sustainable/ethical brands, I would like to be able to see why the brand or product I am being recommended is sustainable so that I can verify their impact myself and be more confident that my dollars are making a difference.

User Flows

I created three different user flows that meet these user stories, helping me plan how I would tie the experiences together—both in the extension and on BuyBetter’s website. 

Extension User Flows

These user flows are solely focused on the user stories that involve the browser extension.

Core extension user flow (Click to enlarge)

Extension user flow for stories 1, 3 and 4 (Click to enlarge)

Installation User Flow

User story #2 states that the user needs to be able to learn how BuyBetter works and how to install it. This experience is completely handled through web pages without the extension being involved. 
‍
This flow starts with BuyBetter’s landing page. Next, the user installs the extension through the Chrome Web Store. Finally, the users ends up at a BuyBetter thank you page

Installation user flow (Click to enlarge)

Crazy 8s Sketches

In the usual fashion, I kicked off my design ideation and sketching with some crazy 8s. I wanted to start bringing the user flows to life, and originally I was only focusing on sketching out the extension part of the flows, namely two kinds of extension pages.
 
The first page is the “Recommendations Page” that is the default page when the extension pops up. It shows the user a list of recommended products and is the main screen for this MVP. 

The second page is the “Explanation Page”, which is the extension page that shows the user more information about why we recommended the product for each product recommendation. 

These crazy 8s sketches allowed me to start experimenting with different layouts for each page and think about where to position the product image, product meta-data (name, price, reviews, brands, sustainability features, etc.), and interactive elements like buttons.

Wireframe Sketches

From crazy 8s, I moved onto doing higher fidelity sketches of the Recommendation Page. Based on my research I knew that I only wanted to list 3 to 5 product recommendations because that was the optimal range across all participants. 

My main goals were to figure out where to put the product image and the other elements. I found that by putting the product image off to the left I could maximize vertical space, while still making the image and text large enough side by side. Given that this page would be a list of products, it was important to me to maximize the vertical space and allow the user to see a peak of what comes next in the list.

I kept iterating on the layout of the product meta-data and placement of the other features. Then, to get a sense of what the extension would look like popped up, I taped my latest extension sketch over my sketch of the Amazon-like page.
‍
This was incredibly helpful because it made me realize how I would need to make sure the extension window stood out from the Amazon page as a whole. Specifically, it was important that the extension’s navigation elements be a color that stood out and that I used a border around the extension.

Paper Prototype

As I wireframe, I like to keep in mind the overall flow and interactions that each pattern and element provide. So before wrapping up my sketching and moving into Figma, I wanted to get a feel for how the user could flow between the “Recommendations Page” and the “Explanation Page” in the extension. 
‍
So I took my high-fidelity sketches of these two pages and created a low-fidelity paper prototype, mapping out the interactions using blue sharpie.

Digital Wireframes - Extension Pages

Based on my MVP user flows and stories, I had two different flows I needed to build out: one for the extension experience and one for the installation experience. Since sketching gave me a better idea of how the extension pages would be laid out and flow, I started wireframing those in Figma.

Core Extension Wireframe Pages

The following three screens represent the core of the MVP experience.

There are two key changes I made from sketches to these wireframes that I would like to highlight: sustainability badges and the certificates section.

Sustainability Badges

In my paper sketches I was going to represent sustainable features with tags, but those tags made the layout feel cluttered. Instead, I decided to use icons to represent each sustainable feature which I refer to as “sustainability badges”. 
‍
These badges are more aesthetically pleasing and use less space to communicate the same ideas. Since the user may not know what each of these badges mean, I added a tooltip like label that pops up when the user hovers over the badge.

The Certificates Section

II also decided to make the certificates section of the “Explanation Page” more informative by giving the user a description of each certificate along with a hyperlink that would take them to the certifiers website to learn more. Not every user is going to initially know what each certificate means or why it’s important. Clearly explaining certifications that verify a company's claims helps us earn users’ trust.
‍
Along with providing users more information to help them verify the legitimacy of the brand and its claims, this is also an opportunity to educate the user on different certificates. This allows us to further empower our users by making them better informed eco-shoppers.

Digital Wireframes - Installation Webpages

As discussed earlier, the installation experience will take place through different web pages and not in the extension itself. So I also created the following wireframes for those web pages that make up the “Installation Flow”.

BuyBetter Landing Page

The installation flow starts with the user arriving at this BuyBetter Landing Page, most likely from search or an ad. The goal of this page is to explain what BuyBetter is to the user, how it works and call them to action to install the extension. 

Full landing page (Click to enlarge)

How it works section (Click to enlarge)

Extension install call to action (Click to enlarge)

Chrome Web Store

From the BuyBetter landing page, the user would be taken to the Chrome Web Store to install the extension. Given that this is a templated page where all we’d be able to change is the content, I copied the Chrome Web Store’s design and filled it with our content.

Full page (Click to enlarge)

Web store header with call to action (Click to enlarge)

Overview describing extension to users (Click to enlarge)

BuyBetter Thank You Page

The last part of this flow is the Thank You page, which is where the user is redirected after they install the extension in the Chrome Web Store. Not only is this an opportunity for us to thank the user for installing BuyBetter, it's another touchpoint to further engage them. From my research using other popular extensions like Honey, I noticed that it was common to ask the user to pin the extension and show them how. I decided to include this in our funnel as well.
‍
This is useful because when the extension is pinned the user can see notification badges letting them know we have recommendations to show them. It’s a signifier in case they close the extension when it opens or have disabled the automatic pop-up.

Full thank you page (Click to enlarge)

Hero section and call to action to pin extension (Click to enlarge)

Instructions to pin the extension (Click to enlarge)

Developing the Brand

To start developing the brand for this project, I focused on the main ideas we represent. Our brand combines shopping, sustainability, and the whole concept of “better” (better quality, creating a better world,... better everything).
‍
I wanted to find a brand name that reflects the merging of these ideas, and after some ideation the following three rose to the top: BuyBetter, FindBetter, and EcoShopper.
‍
In order to decide which brand name would be best, I threw on my marketing hat and began imagining the ad campaigns I would run for each. That’s when the tagline “Buy Better. For our planet and everyone on it.” hit me, and I immediately knew BuyBetter was the right choice. The name perfectly embodies what we are trying to help our target users accomplish.

Typography

I wanted to keep the typography simple, clean, and modern, so I chose Lato as the typeface. For accessibility, I made sure that we would not use any text smaller than 14 pt. I chose 16 and 18 pt for the body content because I wanted the text to be easily readable inside of the extension window.

Color Palette

Since our brand was focused on sustainability, it made sense to go with earth tones. To get started, I looked at color palettes generated from pictures of nature.
 
Green stood out first, as it often symbolizes nature and sustainability. Most of the other color pairings were too cool, so I decided I wanted something warmer to balance the aesthetic and stand out. The chestnut red I went with was primarily used for all the buttons and icons in the design.
 
When it came to picking the specific brand green and red colors, I wanted to optimize for contrast so that my design would be usable and accessible. After finding a green and red that met AA contrast levels, I created shades and tints which met AA and AAA contrast levels in different settings so that I could have lots of flexibility in my color palette.

Contrast Example #1

Primary And Secondary Content

For my primary content color, I went with Eerie Black on Snow White because it provides great contrast without the eyestrain of pure black on pure white. Then for my secondary content color I went with a darker grey, to help with showing hierarchy while still providing AAA contrast levels.

Product image and content component

AAA Contrast - Primary Content on Snow White Background

AAA Contrast - Secondary Content on Snow White Background

Contrast Example #2

Navigation Icon Button And Text Label

For the navigation I wanted to use the lightest version of the brand green to help the extension stand out from the page without being too loud. However, I needed to make sure that the Chestnut red had an accessible level of contrast for the icon button. 

As is shown below, this red had a AA contrast level for graphical elements of the icon button (the icon outline and fill), but it would not be a high enough contrast to also be the label text. So I instead used the primary content black for the buttons’ text labels, which had a AAA contrast level on the light brand green background, as is also shown below.

Extension navigation tab

AAA Contrast - Primary Content on Light Green Background

AA Contrast - Chestnut Red on Light Green Background

Logo Development

I started the logo development process by sketching out different logomarks and logotypes early on while I was coming up with brand names. I wanted symbols that screamed sustainability and shopping, and finally I arrived at the combination of a price tag and the earth.

Logo and Brand Sketch V2

Logo and Brand Sketch V3

Logo and Brand Sketch V4

Earth day has done a pretty good job of making any earth symbol synonymous with sustainability, and a price tag is a universal symbol for shopping. Together, they made me think that the earth is priceless, which is a general sentiment that our target users seem to share.

I took this symbol into Figma and married it with our Lato typeface and brand “Natural Green” to create the official BuyBetter logo.

Armed with my high-fidelity prototypes for both the Installation Flow and the Extension Flow, I conducted usability testing with six participants.
‍
Of these six, only two fit into the “Very Important” cohort. One participant should have been screened out because they said halfway through the session that they’d never use something like this in the first place because they only trust their own research.

Key Questions and Tasks Tested

After asking the testers some background questions, I had the testers go through both the Installation Flow and the Extension Flow in the prototype. Along with asking them to complete tasks for me, I also asked them general questions about the product and encouraged them to think aloud. 
‍
Below, I highlight the most important tasks tested and questions asked for the respective flows. 

Installation Flow

This is the flow that focuses on explaining how BuyBetter works to the user and having them install it. I had them begin on the BuyBetter landing page, then I asked them the following:

Extension Flow

After finishing the Installation Flow, I had them start the Extension Flow by imagining they were shopping for shampoo on Amazon and starting their search there. Once the extension popped up with the Recommendations Page, I asked them:

Quantitative Findings

After testing the “Extension Flow” with users, I asked them a few survey questions so that I could get some quantitative data in addition to their qualitative feedback. I was trying to identify the following:

• If they found the product useful, as a proxy for if it solved a problem for them.
• If they found the design intuitive, as a proxy for the design’s usability, consistency and how elements acted as they expected.
• If they felt in control of their decisions and ability to reverse, as a proxy for the design’s flexibility, freedom and user control.
• If they would recommend this product to a friend, as a proxy for their overall experience and how they think it could help others.

Note that the low outlier scores in these graphs came from the one participant who said that they would never be a user of this product.

Top User Testing Issues

I added my session notes into Miro, began looking for the top issues that emerged and identified the following:

• One tester found the "Save" button on the Explanation page too close and similar to the "Saved Lists" navigation button. (Serious usability issue - lack of error prevention)
• 33% were confused by the "Buy Now" button label and what would happen when they clicked it. (Serious usability issue - expectation and reality gap)
• 50% wanted more objective information on how and why we recommend products, both on the website and in the extension. (Serious issue - lack of trust)
• 33% felt like the option to save products was buried in the menu and expected to get to it in less clicks. (Mild usability issue - too many clicks)
• 33% found the extension automatically popping up with recommendations intrusive; they would rather open it themselves. However, the other 66% actually found it helpful. (Mild usability issue - lack of control)

Design Revisions From Feedback

Based on these top user testing issues, and other small opportunities for improvement I observed, it was clear I needed to make some design revisions to address them. 

Recommendations Page Changes

Change #1

New Buy Button Label

By changing the buy button label to say “from {seller}”, my hope is that we can make it more clear to users where they will be going when they click the button. This should close the expectations and reality gap that existed before. 

Change #2

New Navigation Button Label

The original label was inaccurate; that part of the extension is intended to show a list of saved items, not a saved list. So I changed the label to make it accurate.

Before

After

Save Button Changes

Change #1

More Visible Save Button

I wanted to address the issue of the save button feeling buried, so I made it more visible by putting it on the product image. This is a common design pattern on sites like Etsy and better aligns with user expectations. 

Change #2

Updating The Menu

Since I moved the save button to a new place, I removed it from the menu.

Before

After

Explanation Page Changes

Change #1

Added Product Reviews

I added the product reviews to this page so that the user has more relevant information here and doesn't have to back-track to see it. This was prompted by a user mentioning it was missing during testing.

Change #2

Adjusted Sticky Button Margin

The top margin above the sticky button was not proportional to the margin below, which really bothered a user during testing. So I balanced it out.

Change #3

Removed Sticky Save Button

By removing this sticky button I was able to address the top error prevention issue, since the button would no longer be close to the navigation. The reason I could remove it completely was because it was now present on the product image.

Before

After