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.
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:
-
CONSUMER AWARENESS, EDUCATION AND ACTIVISM
-
ADVOCACY
-
PARTNER WITH RETAIL STORES
-
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
-
Pitch Deck
-
Brand Book
-
Style Guide
-
User Research Documents (Quantitative and Qualitative)
-
Current website
PEOPLE INTERVIEWED
-
Co-Founder / CEO (E-commerce, UX design, Investor relations)
-
Co-Founder (Bag Design, Manufacture, Sales, Investor Relations)
-
CMO (Advertising, Site SEO, Social Media)
-
Research and advocacy interns
-
The designer who designed the last site
-
Fundraising consultant (business model)
-
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
CERTIFIED B CORPS
REUSABLE BAGS ECOMMERCE
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
-
I don't understand what BRINGiT is and does
-
I'm unable to find information on the site
-
I do not find the shopping experience engaging
-
Your site makes me want to leave
-
Are you a non profit? Or are you a shopping site?
-
I feel overwhelmed by the complexity and noise around plastic reduction messaging
-
I often experience negative emotional states, e.g., stress, boredom, while grocery/produce shopping
-
The general tone of messaging in other such organizations is either “yelling/screaming” or “finger-wagging”. It wears us down (compassionate fatigue)
BUSINESS NEEDS
-
We want people to buy our bags
-
We want to decrease the bounce rate on the home page. Currently it is very high ~60%
-
We want to increase the conversion (buy, donate, sign up, social media following). Currently it is very low.
-
We want to make the site visually appealing
-
We are not educating people and raising consumer awareness enough through our site
-
We are not able to convey the problem and our solution to the users
-
We want users to understand that we also do good and have a positive impact along with selling our bags
-
Increase the organic traffic on the website
-
Increase the repeat traffic on the website
-
Increase the conversion rate: (buying, newsletter sign up, social media following)
-
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
-
Talk about the cause served
-
The positive impact of the business
-
Process of manufacture
-
Transparency
-
Certifications
-
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
-
staged / still life
-
life style images
VISUAL DESIGN
Great Visual Appeal, Clean, Modern
ECOMMERCE
BEST PRACTICES
-
Brand ambassador program
-
Affiliate program
-
Customer retention: newsletter signup
-
Social media feature and feed
-
Important CTAs - easy visibility, clear interaction and efficient functionality
-
Wholesale (B2B) / Retail (B2C)
-
Personalization / customizable products
-
Cobranding
-
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:
-
increase in sales
-
increase in repeat traffic
-
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:
-
Present the most important questions that the user has.
-
Provide clear and concise answers.
-
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?
-
increase in sales
-
increase in repeat traffic
-
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
INTERACTION DESIGN
TASK
Select a product to purchase and complete the guest checkout process successfully.
USER FLOW
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.
WIREFRAMES
Whimsical was used for creating low fidelity wireframes for the task at hand. All the wireframes can be viewed here: WIREFRAMES
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.
ICONS
BAG ILLUSTRATIONS
BUTTONS
ACTIVE
HOVER / CLICK
HIGH FIDELITY DESIGN
LANDING PAGE - AN IMPACTFUL, CLEAR AND AN ENGAGING START
IDEAS IN ACTION
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:
-
Quantity
-
Fabric
-
Size
-
Colors
-
Made in
-
Estimated Shipping Date
-
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
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
CART PULL OUT
FILLED CART
CART ABANDONMENT
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
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
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
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
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