BRINGiT

BringiT is a public benefit corporation that is fighting against the plastic pollution crises. It brings to the market the groundbreaking, 100% home compostable,  100% reusable and sustainable line of produce and grocery bags for both - the shoppers and the retailers. It also builds awareness and activism within the society about the impact of plastic pollution in order to bring a lasting change. 

whiteflowerbelow.png

THE CHALLENGE

Design an online shopping experience for BRINGiT Bags, PBC along with highlighting their impact and their cause in fighting plastic bag pollution.

BACKGROUND

WHAT IS BRINGiT?

BringiT is a public benefit corporation working in the space of fighting plastic bag pollution.

WHAT DOES IT DO?

It is introducing a line of 100% home compostable, 100% reusable and 100% sustainable produce bags and grocery bags into the US market. Since only providing a groundbreaking product is not sufficient to disrupt the plastic bag industry and bring a lasting change, it is putting forth four main strategies:
 

  1.  CONSUMER AWARENESS, EDUCATION AND ACTIVISM 

  2.  ADVOCACY

  3. PARTNER WITH RETAIL STORES 

  4. INTRODUCE AN EXCELLENT AND APPEALING ALTERNATIVE PRODUCT 
     

NON PROFIT to PBC

BringiT started out as a non profit that involved ecommerce too. The visitors did not understand what the organization was about and what it did. My challenge was to design a solution for this problem and also to provide an engaging and attractive shopping experience. The company then pivoted to a PBC. The learnings and work done as a part of non profit proved to be important and could be leveraged in the PBC as well. 

TIMELINE

Jan 2021 - September 2021

THE DESIGN PROCESS

Click on a box from the slider below in order to directly jump to that section. 

 

RESEARCH

INTERNAL INFORMATION RESEARCH

The founders, the team and the advisors at BringiT had been working with the non profit and its website since couple of months.  They had also been talking to investors, end users and experts about their initiative. They had conducted and documented indepth user research which I studied. I also became a potential user, which helped me enormously to empathize deeply.

OBJECTIVES

To understand and study the pain points of  existing web experience

of the stakeholders

To understand and study the unmet needs in the existing web experience

of the stakeholders

RESEARCH METHODS

Team Member Interviews, Subject Matter Experts Interviews, Reading Company Documents, Immersion

MATERIALS STUDIED

  1. Pitch Deck

  2. Brand Book

  3. Style Guide

  4. User Research Documents (Quantitative and Qualitative)

  5. Current website

PEOPLE INTERVIEWED

  1. Co-Founder / CEO (E-commerce, UX design, Investor relations)

  2. Co-Founder (Bag Design,  Manufacture, Sales, Investor Relations)

  3.  CMO (Advertising, Site SEO, Social Media)

  4.  Research and advocacy interns

  5.  The designer who designed the last site

  6.  Fundraising consultant (business model)

  7. E-commerce Industry experts

DESIGN EVALUATION OF THE SITE

As I practiced rapid immersion I evaluated the existing site based on the design principles and usability heuristics and noted down the observations. The existing site was evaluated for principles like modularity, rhythm and balance, visual hierarchy, alignment, proximity, space, consistency, simplicity and LEMErS. 

MARKET RESEARCH 

I studied the organizations (non-profits, b corps and regular for profit companies) working in the anti plastic pollution  space and selling sustainable and reusable products. I identified the strengths and weakness of the direct and indirect competitor products and performed the SWOT analysis. 

OBJECTIVES

What other organizations and companies are working a similar solution the space of plastic pollution?

What are they doing well and what are they doing not so well? 
Conduct SWOT analysis of direct and indirect competitors

What are the best practices pertaining to non profits, ecommerce and benefit corporations?

RESEARCH METHOD

Competitive Analysis

NON PROFITS

surfrider.png
52lonelywhale.png

CERTIFIED B CORPS

ecobags.png
chicobags.png
naturebeeswraps.jpeg
beeswrap.png
allbirds.png
frankandoak.png
feed.jpeg

REUSABLE BAGS ECOMMERCE

lotussustainables.jpeg
flipandtumble.jpeg

USER RESEARCH

The founders, the team had conducted and documented in depth user research which I studied. I also interviewed couple of end users in identified target segments.  

To understand and study the pain points of  existing web experience

of the end users

To understand and study the unmet needs in the existing web experience

of the end users

RESEARCH METHOD

User Interviews

OBJECTIVES

 

RESEARCH SYNTHESIS

LEARNINGS -  INTERNAL INFORMATION RESEARCH AND USER RESEARCH

To understand and study the pain points in the existing web experience for both - end users and stakeholders

To understand and study the unmet needs in the existing web experience for both - end users and stakeholders

USER NEEDS

  1. I don't understand what BRINGiT is and does

  2. I'm unable to find information on the site

  3. I do not find the shopping experience engaging

  4. Your site makes me want to leave

  5. Are you a non profit? Or are you a shopping site?

  6. I feel overwhelmed by the complexity and noise around plastic reduction messaging

  7.  I often experience negative emotional states, e.g., stress, boredom, while grocery/produce shopping

  8. The general tone of messaging in other such organizations is either “yelling/screaming” or “finger-wagging”. It wears us down (compassionate fatigue)
     

BUSINESS NEEDS

  1. We want people to buy our bags

  2. We want to decrease the bounce rate on the home page. Currently it is very high ~60%

  3. We want to increase the conversion (buy, donate, sign up, social media following). Currently it is very low.

  4. We want to make the site visually appealing

  5. We are not educating people and raising consumer awareness enough through our site

  6. We are not able to convey the problem and our solution to the users

  7. We want users to understand that we also do good and have a positive impact along with selling our bags

  1. Increase the organic traffic on the website

  2. Increase the repeat traffic on the website

  3. Increase the conversion rate: (buying, newsletter sign up, social media following)

  4. Make the ecommerce experience modern, more appealing and aligned with the brand

LEARNINGS - MARKET RESEARCH

WE HAVE A UNIQUE PRODUCT

All the other direct and indirect competitor grocery and produce bags do NOT have the qualities of 100% home compostable, 100% sustainable, washable and reusable like BringiT bags

PUBLIC BENEFIT CORPORATION 

BEST PRACTICES

  1. Talk about the cause served

  2. The positive impact of the business

  3. Process of manufacture

  4. Transparency

  5.  Certifications

  6.  Beginnings, Journey, Goals

HOSTING PLATFORM

Most of the sites have Shopify as their platform

IMAGES / VIDEOS

Engaging  and appealing media that conveys the message in an impactful manner  -  videos and photographs

  1. staged / still life

  2. life style images

VISUAL DESIGN

Great Visual Appeal, Clean, Modern

ECOMMERCE

BEST PRACTICES

  1.  Brand ambassador program

  2. Affiliate program

  3. Customer retention: newsletter signup

  4. Social media feature and feed

  5. Important CTAs - easy visibility, clear interaction and efficient functionality

  6. Wholesale  (B2B) / Retail (B2C)

  7. Personalization / customizable products

  8. Cobranding

  9. Guest Checkout

PROBLEMS DEFINITION

PROCESS

FIND THEMES

Cluster learnings into themes

GENERATE INSIGHTS

1 theme = 1 or N insights

PICK TOP 3-5 INSIGHTS

TRANSFORM INSIGHTS TO HMWs

IDEATE ON EACH HMW

THEMES

What is BringiT?

Conversion

INSIGHTS

The current website does not convey clearly what BringiT is, what it does and why is it important.

The look and feel of the home page and the site is not interesting, inviting and engaging.

Due to this site visitors are not staying on the site long enough to engage further with it

The current design is not following the best practices of a non profit / benefit corp to facilitate conversion

The current design is not following the best practices of an ecommerce to facilitate conversion

The current website does not convey clearly what BringiT is, what it does and why is it important.

HMWs

How might we provide a clear and a cohesive story for people to understand who we are and what we do?

How might we make the site engaging, appealing and interesting for the visitors to spend more time on the site?

How might we increase the user conversion rate in terms of:

  1. increase in sales

  2. increase in repeat traffic

  3. increase in organic traffic

Consumer education and  awareness 

 BringiT needs to talk about consumer awareness and education. That too in an impactful way.

The problem of plastic pollution is very critical. The consumer needs to be educated about it.

Fueling consumer awareness, activism and education is inevitable for achieving a lasting change

BringiT needs to talk how it is solving the problem - highlight the 4 core strategies

(No one else is solving the problem in this way.)

How might we educate the consumer? That too in an engaging way.

How might we present the problem and the solution - four core strategies of BringiT?

Content Organization

The current IA is confusing with information all over the place

Information is difficult to find

How might we structure and organize the information so that is intuitive and easy to find it?

Other BringiT Initiatives

There are other BringiT initiatives, most of which are not mentioned on the website. Due to this they are unknown to the users:

Refuse Program, Re-mind Program, Free for Low Income Communities

The amount of research and work done behind the Ask Emily program and its popularity is not reflected on the website

How might we promote other BringiT initiatives on its website?

How might we promote Ask Emily and help the visitor recognize the research and quality of the information being provided?

A non profit with ecommerce

Investors find it difficult to understand that BringiT is a non profit that also sells grocery and produce bags

How might we clarify the non profit nature of the organization along with it being an online shop to the visitors?

 

IDEATION

PROBLEMS

How might we provide a clear and a cohesive story for people to understand who we are and what we do?

How might we make the site engaging, appealing and interesting for the visitors to spend more time on the site?

IDEAS

LANDING PAGE

Design an engaging conversation rhythm with the user:

  1. Present the most important questions that the user has.

  2. Provide clear and concise answers.

  3.  Have supporting CTAs for the user to engage further

What makes our bags revolutionary?

Why buy or bags?

How to compost our bags?

Make the content flow in the best order so the user can better understand and better engage

A video showing the story from raw materials, process, finished product, in use and final impact 

ABOUT US 

Have an about us page as a top level menu item

Excellent Visual Design

Incorporate basic design principles

Intuitive and efficient organization of information

Incorporate basic usability principles

Impactful presentation of the problem and the solution - photographs and content

Impactful presentation of the groundbreaking material / product

Engaging voice of the content

How might we increase the user conversion rate?

  1. increase in sales

  2. increase in repeat traffic

  3. increase in organic traffic

How might we make the shopping experience appealing and engaging?

Follow the best practices for ecommerce 

Shop CTAs above the fold

Social Media engagement

Exit intent popups

Latest trend - no horizontal slide show or scrolling

Upsell blocks

Testimonials

Abandoned cart emails

Newsletter signup

Press

Express checkout

Affiliate Program

Brand ambassador

Guest XO

Support mobile shopping experience

Product illustrations for multi item kits

Notify users upfront about discounts and sales

Notify users upfront about free shipping 

Use excellent product photographs - still life and lifestyle images

Use snackables - bite sized information

Follow the best practices of a benefit corporation

Show the positive impact of the business

Show how the user will make a difference

Talk about the problem

Build a relationship with the user by telling our story: Beginnings, Journey, Goals

List the certifications

Transparency

How might we educate the consumer in an engaging and non-yelling way?

Talk about the problem and the solution to the user so that it creates a positive impact 

Place problem and the solution on the site so that its importance is preserved and is easier to find

Provide an entry point on the landing page with an opportunity to learn more

Address this in IA - Easy and intuitive to find in the menu

Do not bury this information deeper in the site

Have a blog on the site to provide news and articles related to plastic bag pollution

Design the content so that it addresses the most important questions in a clear and concise way.

Relevant and impactful pictures that go with the content

How might we structure and organize the information so that is intuitive and easy to find it?

Have an intuitive information architecture and site mapping

Incorporate the design principle of Proximity

Incorporate a standard design pattern for navigation

Implement an intuitive interaction design

 

INFORMATION ARCHITECTURE

SiteMap.png
 

INTERACTION DESIGN

TASK

Select a product to purchase and complete the guest checkout process successfully. 

USER FLOW

userflow.png

DESIGN PATTERNS

The following design pattern libraries served as standard reference point for the building layouts, interactions and flows for things like navigation, drop-downs etc.

UI Patterns

Pttrns

WIREFRAMES

Whimsical was used for creating low fidelity wireframes for the task at hand.  All the wireframes can be viewed here: WIREFRAMES

WhimsicalLogo.gif
 

VISUAL DESIGN

The colors palette and the typography were decided by a graphic designer who was on the team before I joined. I decided the use of the colors and the fonts. I also created some illustrations to go along with the photographs on the site and chose the icons for the site. 

The idea behind creating this flower design was making it a brand identifier. 

Illustration.png
TYPOGRAPHY.png

ICONS

GroundBreakingMaterial.png
PlasticFree.png
HomeCompostable.png
Washable.png
TearResistant.png

BAG ILLUSTRATIONS

iTTote 1.png
iTBag Shopper 1.png
Mesh  Produce Bag.png
Mesh  Produce Bag.png
Produce Bags sm.png
Produce Bags sm.png
Produce Bags LG.png
Produce Bags LG.png
Produce Bag Assortment.png

BUTTONS

ACTIVE

shopnowbutton.png
addtocart.png
learn more.png

HOVER / CLICK

learn more.png
 
shopnowbutton.png
addtocart.png

HIGH FIDELITY DESIGN

LANDING PAGE - AN IMPACTFUL,  CLEAR AND AN ENGAGING  START

IDEAS IN ACTION

1. SiteLandingPage.png

PROXIMITY 

Top navigation menu items are grouped together as a visual unit

 

SIMILARITY
icons have a similar, circular shape and size, thereby allowing us to perceive them being as part of the same visual group.

VISUAL HIERARCHY

The headline and the hero image is given the most emphasis followed by the CTA 
 

DOMINANCE

headline carries more visual weight, functioning as a focal point to draw your eye first

LATEST TREND 
No horizontal slide show or scrolling of Hero Image 

Similar to mobile scrolling

BEST PRACTICE

Shop CTAs above the fold

CONTRAST

CTA emphasized with color contrast 
 

CONSISTENCY in CTA colors throughout the site

orange = shop

blue = add to cart

green = education
 

ALIGNMENT

placement of the CTA has a logic and appropriate connection to headline as the user reads left to right

BEST PRACTICE

Upfront Add To Cart

BEST PRACTICE 

Use snackables / bite sized content - visual cues

Enhances the learnability and memorability

DESIGN A CONVERSATION WITH THE USER

Present the questions that the user has, with clear + concise answers with an entry point to dig deeper

Impactful presentation of the groundbreaking material / product

Engaging voice of the content

Talk about the problem

Show the positive impact of the business

Show how the user will make a difference

Testimonials

Helps gain trust of new users

Press

Social Media engagement

Increase in repeat traffic

Increase in organic traffic

Newsletter signup

Fat Footer Design Pattern

End a page by providing social links, customer care and various agreements

SIMPLICITY

Clear and separate sections, ample use of white space

allows our eye to perceive the site with ease

PRODUCT DESCRIPTION PAGES

Use excellent product photographs - still life and lifestyle images

Add to Cart  CTA above the fold

High priority information above the fold:

  1. Quantity

  2. Fabric

  3. Size

  4. Colors

  5. Made in

  6. Estimated Shipping Date

  7. Free Shipping

Bite sized visual information

Product illustrations for multi item kits

Shipping and Returns - Transparency

Reviews

BEST PRACTICE
Upsell blocks

Non-nagging opportunities to purchase more

3A. Product Description Page_iTKit Shopping System.png

Breadcrumb design pattern:

Reveal the user’s hierarchical location and provide links to higher levels

LANDING PAGE - MOBILE

LANDING PAGE - PRODUCT DESCRIPTION

CARTS AND UPSELLS

EMPTY CART

8. Cart Page_Emptystate.png

CART PULL OUT

6. Item added to cart - pull out - one item flat shipping.png

FILLED CART

9. Cart Page_FullState.png

CART ABANDONMENT

10. Cart Page_FullState_ABANDON.png

Place problem and the solution on the site so that its importance is preserved and is easier to find

DESCRIBING THE PROBLEM REALISTICALLY YET POSITIVELY

2. Our Impact - the problem.png

Impactful presentation of the problem -
photographs and content

Make the content flow in the best order so the user can better understand and better engage

Earnest, sincere and compelling voice

VISUAL CONSISTENCY AND APPEAL

Images were modified to alter the blue, green and orange as per the brand colors

Design the content so that it addresses the most important questions in a clear and concise way.

Majority of the users did not understand that bioplastics and recyclable plastics do not solve the problem of plastic pollution.

This section specially addresses that confusion

RHYTHM

An alternating rhythm is applied which adds consistency yet an element of surprise in terms of variation and repetition.

RHYTHM

The zig-zag arrangement of images is varied by adding a full-width element half way down.

PRESENTING THE SOLUTION CEARLY AND IMPACTFULLY

Impactful presentation of the solution - photographs and content

List the certifications

Composting video

3. Our Impact - the solution.png

Keep visitors on the site for longer: end one experience by starting a new one. Provide easy and natural ways for users to continue their journey.

A high level outline of the solution

FOUNDING STORY - BEGINNINGS, JOURNEY, GOALS

4. About Us.png

Founding Story: Beginnings, Journey, Goals and Values

Connect with the audience. Give them an opportunity to know you.

Talk about the positive impact of the business

Engaging language of the content

Keep visitors on the site for longer: end one experience by starting a new one. Provide easy and natural ways for users to continue their journey.

PARTNERING - BRAND AMBASSADOR, RETAIL, AFFILIATE PROGRAM

6. Partner With Us - Brand Ambassador.png
7. Partner With Us - Retail.png
8. Partner With Us - Affiliate Program.png

 
 

MOBILE PROTOTYPE

REFLECTIONS AND CONCLUDING NOTES

REFLECTIONS

Images are very crucial to convey the message

Product shots | All other shots

Development platform restrictions (Shopify, Squarespace)

NEXT STEPS

Functional Testing

LTS - Changes Live to Site

Heat map testing

Usability Testing

Beyond the produce / grocery bags

The NON Profit will operate as a separate entity