Client Project | charityBay Org by Nancy Fetouh, Ven Lam, Jennifer Murphy, Christine Cruz, Yllianna

Unleashing the power to do good

UX/UI Case Study

Academy Xi 2021

Case Study charityBay.org

Nancy Fetouh Ven Lam Jennifer Murphy Christine Cruz Yllianna Maneze

01 The Challenge 02 Project Scoping Summary 03 Research Plan & Objectives 04 Key Points of Interest 05 Survey Findings 06 Problem Statement 07 Research Insights 08 Challenges and Opportunities 09 Personas 10 Customer Journey Map 11 How Might We Questions 12 MVP 13 Design Solutions for Wireframing 14 Current User Flow and IA 15 New User Flow 16 Style Guide 17 Wireframe - old vs new 18 What’s Next

Photo by Ann Nekr from Pexels

Contents

01 The Challenge.

To provide the seller, looking to make a social impact with the ability to seamlessly go through their journey of listing their products, by identifying the gaps in the process.

To provide balance on the homepage of the website for all users; sellers, buyers and charities, with a main focus on social impact and charitable giving through the sale or purchase of the item itself.

Sellers, both businesses and individuals, would like to know that: - They are able to generate a trackable impact 1 with the sale of their items and -

2

They have the ability to tap into a new market of buyers for purpose while increasing corporate social responsibility.

02 Project Scoping Summary.

Business Goal 1- Sellers journey: Identify and eliminate pain points to enable sellers to easily complete the process from start to finish when listing items to sell, with the end goal of increasing website traffic.

2- Direction: Make it clear where the seller should go to start the process and provide all the necessary information.

3- Balance/Language: Send the message that charityBay is firstly a social impact site that achieves its goals through the buying and selling of items and products. Balance business needs, social needs, credibility and website functionality.

4- Theme: Raise awareness about social impact (story, values, charities, language, statistics) and highlight the main differentiator: the seller has the option to decide what percentage of the cost goes to the charity, can select the charity and can track it people can see the financial journey.

Project Purpose Primary: A- Simplify, eliminate steps and eliminate friction for buyers & sellers that are coming to charityBay. B- Merge all the experiences and messaging into the primary objective - social impact.

Secondary C- Find out the value for sellers in using a charityBay badge to certify the process.

D- Provide recommendations of how to increase repeat traffic to the site.

03 Research Plan & Objectives Objectives ●

Understand users motivations for donating

●

Understand how the user locates and chooses a charity

●

Usability testing to gauge likes & dislikes of using website

●

Find opportunities for improvement in the seller's journey

●

Determine if promotion or certification is valuable to

48

Survey respondents

9 Interview and usability candidates 03 Small business owners/students 04 Small - medium established business owners

business owners. ●

Find out users preferences when making donations

Contextual Research

04 Key Points of Interest 01

Young people are stepping up.

An active younger generation emerging with 18-24 year olds more likely to volunteer than their older counterparts ● ●

75% of this demographic has made a donation in the last 12 months and 35% do volunteer work.

They represent a generation of buyer and sellers who are more engaged with social issues and may want to "unleash the power to good”.

02

Trust is Key

Many Reports found that TRUST is paramount in the public perception of charities. For 25-34 year olds ● ●

47% would donate more if they had more money 41% would donate more if they knew where their money was spent

So transparency and accountability is everything, and as a team, we need keep showing that credibility and security people look for.

03

Donors are seeking

Donors are really looking for a more personalised, meaningful experience. ● ●

Set and forget generosity on the decline Most people prefer to hear back from an individual person within the organization as opposed to hearing from the non-profit as a brand.

05 Survey Findings.

●

●

●

26-35 main age range of respondents followed by 36-45

●

Majority of business owners were in the 26-35 age bracket

●

75% will donate online.

●

37.5% through bank transfers and 29.2% via raffles.

Top 4 reasons why users are interested in charityBay

The top 3 preferred way of tracking social impact

"Anything to raise funds for a good cause”

Hearing stories the impact has on others

“I like the idea of a socially

Total contribution statistics

progressive platform”,

Just having personal fulfillment.

Top 4 reasons for changing their minds ● ● ● ●

Lack of funds Unfamiliar/complex donation system Negative reviews No longer interested in the cause.

●

"Sustainable, great idea."

39.6% would donate to the same charity every time.

●

"I think it is a fantastic idea - it also is

33.3% like to discover new charities

minimising waste (environmentally friendly), as we are reusing items."

68.8% are interested in a site like charityBay.

Additional Findings.

Transparency was definitely a key requirement as people want to know what happens to their donations Trust was also key as people didn't want to see their donation used for the running or marketing of the charity but going to the cause itself.

31.3% were not interested in a site like charityBay. Reasons included: ● ● ●

● ●

Didn't want the hassle of having to list items and sell them Wanting the human interaction, An Etsy seller was concerned about having to learn to use a new platform and that newer platforms take time to build an audience, Some were just not comfortable with the selling part of the arrangement.

Some just wanted to handle their own charitable contributions.

89% do not track and measure donations or items sold to charity but would like to Top 3 preferred way of tracking or knowing their social impact was ●

Hearing stories of the impact on others,

●

Seeing the total contribution statistics and

●

Others just wanted personal fulfillment.

The Problem Statement.

Sellers are challenged by the listing process on the charityBay website as they want to experience a seamless journey to list items on the site, resulting in increased website traffic and a greater sense of social impact.

07 Research Insights.

Business Owners Credibility & Authenticity Matters ●

Business owners are hesitant to promote their CSR (Corporate Social Responsibility) and are concerned it will come across as ingenuine.

●

●

Business owners are concerned the use of a certification badge would decrease their credibility or attract unwanted attention.

Common Findings

Individual Sellers Social Impact Comes First ●

Sellers are looking for convenience, yet want to see the message of social impact pushed further.

●

Sellers are looking for personal fulfilment through stories, local contributions and personal connection.

●

●

●

Transparency is Key

●

Users are looking for proof of security, tracking and credibility on the website and want to know where their money is going.

Users appreciate the goal/purpose of charityBay but lack a compelling reason to utilise the site.

Users care about design ●

Users consider a clean, consistent interface as important in increasing credibility and motivating them to return to charityBay.

08 Challenges and Opportunities.

Challenges

Opportunities

●

●

Page layouts are cluttered, confusing with conflicting purpose and objectives.

●

●

●

●

Would like it to be a familiar platform.

●

●

Language is very Individual-based not business-based

Create a cleaner and clearer more balanced layout and content with more specific and balanced

(delivery address - no unit numbers)

language.

●

●

Don't know what happens to the money once the

●

●

charity gets it.

via email on stories of how the money has impacted

●

●

Charity can provide more information on the site or

Home page is unbalanced for buyers and sellers.

them or stats on how the money is used.

●

●

Doubting legitimacy/credibility of site. No feeling of

●

●

security. ●

●

and sellers.

.

Website does not state that the company gets 5% of

●

●

the sale/ auction price. Sellers are unaware and want more transparency.

●

Unclear interface - unsure what information is needed or not needed when listing.

Opportunity to emphasise social impact aspect of site.

●

●

●

Create a homepage that is more balanced for buyers

Ensure a seamless, less cluttered and clearer listing process including mention of commission.

●

● ●

Persona 1.

Persona 2.

10 Customer Journey Map. As the majority of interview candidates were more established business owners, we decided to build our customer journey map based on Andre, Persona 1.

Our first column ‘Discovery’ addresses how first time users would find a site like charityBay which presented some marketing opportunities.

Customer Journey Map. The rest of the journey followed Andre as he reached the home page, started the listing process and what happened after he submitted his first listing. We followed his thoughts and feelings, pain points, delight points and gathered some opportunities from his experience to set out our HMW questions which would help us hone in on wireframing solutions and present other recommendations for further investigation.

11 How Might We? 1- HMW emphasise the message of social impact on the site, creating a balanced homepage for all user types and improve the site language to clarify objective, intention and audience?

2- HMW help charityBay provide a sense of motivation, security and credibility to buyers and sellers through the use of tracking and measuring?

3- HMW create a seamless and more efficient listing process that emphasises personal fulfillment and encourages frequent visits/listings?

4- HMW use the current findings to affect and/or support the current initiatives undertaken by charityBay eg the syncing of other platforms

5- HMW promote the listing of new goods as well as excess stock?

6- HMW provide users with compelling reasons and motivations to return to charityBay?

7- HMW ensure sellers can see the value in a charityBay certification badge for verification and increase credibility?

8- HMW ensure that our research findings support the buyers experience?

12 MVP - Minimum Viable Product.

After conducting brainstorming sessions, we mapped out our ideas into a Minimal Viable Product chart to help us determine the high-value and viable elements, taking into account usability, reliability and differentiations. These ideas would provide sellers with valuable solutions that were not unduly complicated to implement in the timeframe allotted and that would meet users needs.

13 Design Solutions for Wireframing.

Home page ●

Push the message of social impact first

●

●

Listing Pages ●

Create a balanced home page for buyers and sellers

●

●

Add sellers and donate to the navigation bar

●

●

Bring Social Traders badge to the top and activate

●

●

Remove ‘suggested categories’ and introduce tagging system to title and categorisation page

●

●

Fix layout and design of categorisation options

●

●

Move download app to the footer

Include a save a draft and an are you sure you want to exit prompt

● ●

●

Create a top banner carousel

●

Reorder page: donation, image, title/description, price

● ●

●

Place social media widgets and blog articles at the top Place a tracker on the home page with total stats

●

●

●

Set the donation slider to the lowest amount

●

●

‘Just Added’ and ‘Featured’ are repetitive

Include the 5% commission as part of the donation figures on the side

●

●

Sell/Shop/Charities section to expand with information

●

●

Add tracker to emphasise social impact and site objective

Charity Selection Page ●

Move search bar to the top and add a location filter

●

●

Donate/Sell Page

Condense charity profile information and include in a drop down

●

●

Remove that Donate/Sell page

●

Improve layout

14 Current User Flow

New User Flow Changes included: The removal of the Donate/Sell page, adding tags and adding option to save draft, to name a few. More details in wireframes.

17 Wireframes.

Home page

Title Page

Details Page

Charity Page

Style Guide.

We used the existing colours from the charityBay logo, as well as general design parameters and elements available to us on the website. Any changes were done to update existing icons or representations only.

It was important to take into consideration how people generally use marketplace sites and mostly keep the same icons, symbols, interactions and placement so as not to confuse users and give them something familiar to work with.

Home Page.

Before

After Carousel 1

Carousel 2

Carousel 3

Home Page.

01

03

02 01

Added social media widgets and links to blog articles for credibility - applies to all pages

02

Separated Donate/Sell and added them to the navigation. Changed ‘Listing’ in navigation bar to ‘Buy’ for clarity

03

Language changed from ‘Join Free’ to ‘Register’ to increase credibility and trust

04

Brought the Social Traders badge up for more exposure. This remains permanently on the carousel and links directly to the Social Traders site.

05

Changed the banner to a carousel with messages targeting all users. Banner size was also decreased to utilise the space better

06

Moved the tracker box from Our Story to homepage to emphasise the sites objective and social impact.

07

Click here to see video Made the ‘Sell Shop Charity’ links more prominent and created a drop down to provide immediate details about how to perform each task.

Interactive buttons

05

06

07

04

Home Page - Sell Button.

Sell button on hover

Sell button on click

07 07

Click here to see video Made the ‘Sell Shop Charity’ links more prominent and created a drop down to provide immediate details about how to perform each task.

Interactive buttons

08

Home Page continued 08

Combined all buying options/offerings into one and reduced the titles to three for clarity and better use of space.

09

Download charityBay app call to action was placed in the footer.

09

List An Item Page Before

After

List An Item Page.

01

01

Larger more prominent timeline with a slightly new design

02

Tips included within text box for a cleaner look 02

03

Optional tagging for more specific categorisation. Opens a drop down once clicked.

03

03

Interactive buttons

List An Item Page continued 04

More organised categorisation with the option to add your own category

05

Chat/help button on page instead of within footer. Applies across all pages in the listing process

06

‘Save as draft’ to encourage registration and return to site. Applies to all pages in the listing process.

04

05

06

Interactive buttons

06

Enter Details Page.

Before

After

Enter Details Page.

01

01

Page title changed to ‘Enter Details’ so users knows where they are in the process.

02

02

New timeline design shows exactly what’s been completed and where in the process the user is.

03

03

04

Changed the order of elements on the page to emphasise social impact as the main objective and provides a more cohesive flow to the listing process.

Changed the Donate title to “Share an amount with charity”.

Provided the option to type in percentage for accessibility.

Moved the slider to the minimum amount to encourage users to move the slider.

Provided detailed information as to what percentage goes to whom and included the 5% commission.

Kept price details separate to the charity donations details.

04

Enter Details Page.

03

Typing in 20% or moving the slider to 20% results in the details on the right changing accordingly, taking into account the 5% commission rate to charityBay.

04

Introduced the option to hover/click on the information symbol to get details pertaining to Auction or Buy Now. (depending whether viewing on desktop or mobile phone.)

04

Interactive buttons

03

Enter Details Page continued.

05

06

Item condition helps to accurately describe the cosmetic function of the item being listed. This also assists with customer trust on the website as the article is detailed more precisely for users.

Introduced the option to hover/click over the information symbol to get details pertaining to Item location, Customer Shipping or Intergrated shipping. (depending whether viewing on desktop or mobile phone)

Interactive buttons

05

06

Select Charity Page.

Before

After

Select Charity Page.

01 01

Page title changed to ‘Select Charity’ so users knows where they are in the process.

02

Adding the ‘bar chart’ icon description in the subtext to be transparent and clear so users understand the website proceedings.

03

Changed the order of proceeding to create a more fluid user flow and smoother functionality of the website page.

This has been achieved by utilizing the following sequence; Search bar Feeling Lucky Browse Charities Suggested Charities

04

02

03

04

Adding additional search features (location,cause, tax deductables) to allow more customisation and precision to find the right cause suited to the user 05

05

This drop down provides all key information for a user on the selected charity to provide a more efficient option rather than opening up an external window.

06

Users can choose from within the dropdown to view further Charity details by selecting either the ‘Full profile’ or ‘Visit website’ for additional charity information.

06 Interactive buttons

Select Charity Page continued 08

Added title ‘feeling adventurous’ as a playful way to describe the section listed below.

09

By adding a filter we are helping users refine their search results to find their most suitable causes.

10

To create a cleaner user interface we removed the subtext and kept the heart icon as a quick and efficient ‘save charity’ process. The tick indicates that all donations to charities are tax deductible and the bar chart icon shows that the charity provides tracking

08

09

10

11 11

The suggested charities is now a carousel to highlight multiple causes at one time in an animated way.

12

Adding the ‘bar chart’ icon at the bottom of the page to ensure transparency with users and to verify the website proceedings.

Interactive buttons

12

All Listing Pages.

01

01

Selecting any link that takes the user away from the listing process triggers a prompt: Are you sure you want to exit?

And encourages the user to save as draft and in so doing, register or login.

*●

Primary recommendations Secondary recommendations

What’s Next Development

Social Impact

* * *

Highlight charities that provide tracking and measuring data

●

Thank you video from charity

●

In newsletter: Highlight charities and their causes, businesses that want to promote their products, and tracking of donations and stories of how proceeds have impacted the causes. Stories of charities and what they do - maybe profile a charity each time maybe even how certain businesses used the charityBay badge and how it helped their business.

●

Consider use of imagery to create more human connection

Stories from sellers & charities which promote social impact to be featured in articles/blogs and/or email updates/newsletter.

*

Celebrate businesses and social impact stories on social media ●

Refine UI design - provides users with quality interactions, easy functionality and a positive environment to use.

Further usability testing on integration of current changes with buyers flow - to stimulate better understanding of any concerns that arise and allow charityBay to continually improve the user experience.

*●

Primary recommendations Secondary recommendations

What’s Next Design

Communication

* *

Create a feedback page/section to gain insights into how to improve the users journey Provide sellers with notifications when there is any activity on listings eg - when auction timeframe lapses or after items are sold to encourage re-listing - provide advice and best practise to sell items faster

●

Send monthly communications post-listing/selling/buying to encourage increased repeat traffic to the site

●

Send communications about other similar items that were sold or bought

*

Ability to share sellers post on different social media platforms

●

Suggestion to allow users to pick top three issues they care about rather than one

●

Encourage re-listing and increase repeated and regular traffic to the website

●

Create sticky navigation on home page and section the home page into 3 segments

Marketing ●

Develop a marketing plan to increase visibility in ○ organic search rankings - search engine optimisation ○ Paid per click ads ○ editorial and media ○ sponsorships and partnerships

Thank you.

LINK TO FIGMA FILE

Nancy Fetouh

Ven Lam

Jennifer Murphy

Christine Cruz

Yllianna Maneze

Appendix