UX/UI Designer
binners title new.jpg

Binners' Project

Re-designing a responsive web experience for a social enterprise called Binners’ Project.

Binners' Project.jpg
 

The Binners’ Project is a Vancouver-based social enterprise and charity that supports waste-pickers improve their economic opportunities and reduce the stigma they face as informal recyclable collectors.

They do this by connecting binners to legitimate and streamlined opportunities in waste pickup, management and education. The organization provides these services to clients such as office and residential building managers, and home-owners in the community who are interested in supporting social and economic inclusion as well as environmental sustainability by hiring binners.

 

 

Client
Binners' Project

Project
Responsive web experience

Deliverables
UX strategy, Medium-fidelity designs

Duration of project
3 Weeks

 

 

problem statement

Understanding our client's problem

Through our initial discovery, we learnt that Binners' Project has been in operation since 2014 and has had a functioning website and a client base that they want to grow. Discussions with the client provided more context and allowed us to examine their problem more closely.

Here is what we found:
Up until recently, Binners’ Project generated revenue primarily through word-of-mouth referrals. While that approach was effective until recently, it didn't serve them well. They wanted to redesign their existing website into an effective conversion funnel that educated and generated leads among their clients.  

 
 
 

discovery session

Leveraging our stakeholders' expertise

 
 

Our stakeholders from the Binners' Project held a wealth of knowledge on their business, competitive landscape and users. Tapping into that knowledge gave us a new layer of insight that shaped our research. Here are some key insights we gathered from our clients.  

The users: We learnt that Binners’ Project has two main groups of users. Firstly, residential and commercial building managers and private home-owners, event organizers who hire the services of the company. Secondly, supporters and donors who donate money to further the social, economic and environmental impact of the organization.

Getting design direction: A part of the discovery session included a 20-second gut test with our client. We compiled 20 slides consisting of screen grabs of a variety of mobile and web layouts that helped us gauge our client’s preferences and expectations.

 
 

The task at hand

 

We kick-started the project by facilitating a discovery session with the client. During the session, we arrived at the goals and the scope of the project. The challenge ahead of us was clear:

  • Redesign the website with a clear message and user flow that converts potential clients of the Binner’s Project
  • Adopt a binner-first approach in the content strategy by keeping binners at the centre of the website and telling their story. This has an important business implication as it differentiates the organization from its for-profit competitors.
  • Deliver a medium fidelity prototype that demonstrates improved functionality
 
 
TEAM

TEAM

The Team

We were a team of three UX designers, passionate about the cause and aligned in the goals of the project. From the beginning, we wanted to split up responsibilities and tasks to harness our individual strengths. My key contributions included:

  1. Conducting user interviews and designing the survey
  2. Facilitating user tests and task analysis
  3. Taking the lead on the user journey map
  4. Client management and communication
  5. Contributing to the early stages of low and medium fidelity designs
 

 

a deeper dive

Unpacking the problem

After gaining some initial insights from our clients, it was time for us to unpack and examine the problem more closely. We used a number of research methodologies, such as user testing, user interviews and surveys, to gain more clarity.

 
RESEARCH METHODS

RESEARCH METHODS

 
 
USER TESTING UNDERWAY

USER TESTING UNDERWAY

 

 

 

usability testing

Where are the gaps?

As a first step, we audited the existing website and conducted a series of user tests to shed some light on the usability issues. We facilitated the user tests with six testing scenarios and here’s what we found:

  • Users found it hard to navigate through the content without a search function
  • Clients did not know where to find more information about the services of the organization.
  • They found it difficult to locate pricing information
  • The different pages have no clear CTAs
 
 

interviews with binners

In their own voice

One of our project goals was to adopt a binner-first approach, i.e., keep the binners’ stories at the centre of the website. In order to tell their story accurately, we had to hear from the binners themselves. After speaking to two binners, we were pretty pumped to represent their stories and break some stereotypes that were associated with binners and binning. 

 
dsc-1549_orig.jpg
____8250043.jpg
 
I feel validated and recognized for being a part of the Binners’ Project. Every day I cruise around, do about two circuits…people recognize me and are willing to help me out.
— Mark, binner
I really enjoy binning at events because I like educating the public about waste sorting and management. Also, I do it for the environment.
— Nikki, binner
 
 

Interviewing binners was the most enjoyable part of our research. We got to witness honest and authentic stories about the lives of two binners. What we found from interviewing them was pretty remarkable. Binners’ Project:

  • Binners fight negative societal stereotypes and commonly receive hostility and animosity from the general public
  • Binners' Project offers stable and steady income to binners
  • The organization also helps binners break common stereotypes by providing them with soft skills training and professional uniforms that shift public perception 
  • Binners' Project gives binners recognition and validation for their contribution to society
  • Creates a supportive community, making binning more cooperative rather than competitive
 

 

user research — introduction

Learning about the users

USERS OF BINNERS' PROJECT

USERS OF BINNERS' PROJECT

Early on in the design process, we identified the different users that visit the binners' project website — clients and supporters. They are both key groups that add value to the organization in a distinct way. Our task was to optimize the experience of clients and potential clients who visit the website. So, we invested some time to interview clients to learn about their motivations and pain points. 

But, we did not completely disregard the supporters. In order to deliver a cohesive web experience, we had to learn about them as well. So we designed a survey to gather a new layer of insights about what makes supporters of a cause tick. 

 
 

User Interviews with Binners' Project's clients

 

Since our main goal was to optimize the user experience for the clients of the Binners’ Project, it was important to talk to them. We spoke to 6 residential, commercial building manager and large-scale public event planners and managers.  

What we asked them:

  • Describe a day in your busy life. Where do you spend the most amount of time? 
  • What do you love and hate about your job? 
  • What motivates you to work hard? 
  • Give us examples of successful collaborations with outside vendors that made you successful in your job or that made your event successful.
  • What is your decision-making process when vetting waste management services?

Key insights

  • Waste management is key concern for building and event managers as it is linked to public hygiene and potential public nuisance
  • Trust and referrals are an important consideration while contracting outside waste management services
  • Clients look for experience, structure and knowledge while hiring waste management partners
  • Clients wrongly believe that services provided by social enterprises are expensive
  • There is a stigma and negative stereotypes associated with binners — homeless, dirty, have an issue of drug abuse
  • Most clients hear about Binners’ Project through word-of-mouth
  • Competitive pricing is an important consideration while choosing waste management companies
  • Clients see a benefit in partnering with social impact businesses because it helps them build a better brand
 
Screen Shot 2018-06-06 at 9.02.51 AM.png
SURVEY INSIGHTS

SURVEY INSIGHTS

Survey with Binners' Project's supporters

Our research revealed that most clients are supporters too. Supporters in the sense that they are cheerleaders of the business. They provide recommendations and referrals for the services offered thereby increasing business.

The Binners' Project had no specific donors yet, so we had to start from scratch. We circulated a survey to learn about the mental models of supporters/donors in general. What information are people seeking before donating? What are some motivations for donation versus other forms of supporting? We received 35 survey responses.

 
 

Competitive analysis

An eye on the competition

 
COMPETITIVE ANALYSIS

COMPETITIVE ANALYSIS

 
 

Another area that we researched was the competitive landscape in which Binners’ Project operates. Binners’ Project competes with other organizations that operate as social enterprises and offer similar waste management services.

We picked two organizations to conduct a competitive/ comparative analysis namely, Recycling Alternative and Green Chair Recycling. This exercise shed some light on the gap that needs to be filled to add value to the users.

 

 

AFFINITY MAPPING

Synthesizing research insights

A quick and intense week of research concluded and we had quite a lot of data to comb through. We used the affinity mapping process to look for underlying patterns in the qualitative and quantitative insights we had gathered. This resulted in the creation of user personas, information architecture and features.

 
AFFINITY MAPPING

AFFINITY MAPPING

 

User persona

Persona #4.jpg

user scenario

Steve is organizing an annual event for an important client. He has made almost all arrangements but is unable to find a partner for waste management. Waste management is a key concern of the client, as they are a socially responsible business. Steve is looking for any assistance he could get to cross over this hurdle.
 
 

Mapping Steve's journey through the website

 

User personas are a valuable tool to cultivate empathy for users. But it becomes more valuable when it is used as a seed for storytelling that helps us visualize our user’s journey through the website.

 
 
1_gq4mnAwhXIfZv5NBm3CYsA.png
 
 

information architecture

Crafting a conversation with Steve

Good web experiences are similar having a meaningful and engaging conversation with a good friend. The user journey map looked at different stages of Steve's journey through the website and his information needs at each stage. By the user journey map exercise, we had the bare bones for an information architecture map that would not only be meaningful to Steve but also address business needs. 

To kick-start the design of an information architecture map we first laid out the content blocks and pages on the existing website on sticky notes. Then, using cues from the user journey map, we moved the stickies around over a few iterations to finally arrive at an information architecture map that engages Steve and serves the business needs. 

INFORMATION ARCHITECTURE ITERATIONS

INFORMATION ARCHITECTURE ITERATIONS

BEFORE — INFORMATION ARCHITECTURE

BEFORE — INFORMATION ARCHITECTURE

 

Information Architecture — Before

  • The website had a  total of six calls-to-action (CTAs) on the homepage making it strenuous for the user to decide the next course of action.
  • The organization grouped their services and initiatives under a single drop-down titled "Services". All the pages under the drop-down were meant to serve two distinct user groups. The website wasn't effectively educating and converting users as they were wrongly categorizing information.
  • The website was not optimized to be a tool to generate leads and inquiries about the many services offered by Binners' Project. 
AFTER — INFORMATION ARCHITECTURE

AFTER — INFORMATION ARCHITECTURE

information architecture — after

  • The new and improved information architecture consisted of two differently crafted calls-to-action and user flows for both clients and supporters visiting the website. Words like "Donate" and "support" were used to target supporters, and words like "Request Quote" and "hire binners" were used to target clients. 
  • We clearly delineated between "services" and "initiatives" of the Binners' Project. We placed them on the same level in the content hierarchy as they are key information pages as well as revenue channels targeting different user groups. 
  • One of the goals of the website was to act as a tool for lead generation and client inquiries to hire for their waste management services. To meet this goal, we designed a form that simplified the inquiry process for the busy clients and potential clients of the Binners' Project. Furthermore, we highlighted it as a key CTA button, calling the users' attention to it no matter where they are on the website. 
  • Our attempt was to create content hierarchy on the website. We activated the space in the footer, which was previously unused, to place secondary links to pages like "resources", "media", "photo gallery", etc. 

 

exploring designs

Pencil before pixels

 

Drawing on the results of the 20-second gut test and the information architecture, we created preliminary sketches of the screens. We conducted a design studio exercise to compile our ideas. Once we had finalized the layout for the screens, we went off and designed them. Rose took the lead with sketching the mobile screens while Anoop and myself split up the desktop screens. We conducted some guerrilla-style testing to address major design issues.

COLLABORATIVE SKETCHING

COLLABORATIVE SKETCHING

 

Some of the testing results were incorporated into our mid-fidelity wireframes. We decided to deliver mid-fidelity wireframes, to keep the focus on the functionality rather than design elements.

Anoop and Rose took the lead with mid-fidelity desktop and mobile screens respectively while I was responsible for guerilla testing.

 
 

A fresh new look

WIREFRAMES

WIREFRAMES

 

Key design decisions explained

Revisiting project goals

 

Before we started this project, we listed out the goals we wanted to accomplish. Some of them were problems to which we had to find design solutions rooted in research. Here is a quick walkthrough of our design solutions we came up with.

 
 

Goal
Adopt a binner-first approach, i.e. keep the binners at the centre and tell their story.

Solution
We wanted to highlight the binners’ story on the homepage, thereby making it unique at first glance. The authentic stories along with powerful images aim to break all stereotypes about binners conveying a friendly, professional and approachable feel, right off the bat.

HOMEPAGE — BINNER FIRST APPROACH

HOMEPAGE — BINNER FIRST APPROACH

 
 
 

Goal
Redesign the website with a clear message and user flow that was meant, specifically for, clients who are willing to hire binners for their services.

Solution
We designed a “Request Quote” form that simplifies the process of getting more information on hiring binners. The form is designed to prompt the user to provide necessary information to receive an accurate quote.

REQUEST QUOTE FORM

REQUEST QUOTE FORM

 

 

Refections and key takeaways

 

A three-week design sprint comes to an end! We delivered our final presentation to the client, in which we articulated and presented our design solutions. We even had members of the binning community attend our presentation as they were all thrilled about the final unveiling of the new website. After a quick debriefing session with the clients, we packaged our deliverables and handed it off to the development team that is currently working to launch the website. 

Some personal takeaways: 

1. When highlighting stories of underrepresented/ poorly represented communities, it is crucial to have conversations with them. During our conversations with binners, we gathered insights that were instrumental in shaping the course of our project.  

2. A website does not function independently in the ecosystem of other digital and non-digital touchpoints. A well-crafted user experience considers all online and offline touchpoints, how to feed into each other and interrelationships between them. 

 

 

Client feedback

"The team at RED were such a pleasure to work with. Throughout all of my meetings they ensured that the needs for our new website designs were addressed and that I understood their process along the way. I appreciated their professional and organized manner and was so impressed with the results." — Brianne De Man, Communications Manager, Binners' Project 
 

 

Thank you for reading my case study. Send me a note and let me know what you think.