UX CASE STUDY

Building the first online fundraising platform for political causes

BACKGROUND

Indonesia is the world’s fourth most populous nation and third largest democracy after India and the US. With more than 270 million inhabitants and comprising over 17,000 islands, the cost of running for political office is expensive and can potentially be the cause of corruption.

The incumbent governor of Jakarta (the Indonesian capital), known for his integrity and anti-corruption stance, was seeking re-election in 2017. He envisioned an online fundraising platform where the public can directly contribute to the campaign where funds received will be reported and audited.

ENGAGEMENT & TEAM

The campaign manager was looking for a vendor to work on this donation platform. We presented our solution to the team, then they decided to hire us. I was the product manager and product designer, working alongside 2 full-stack developers to bring this platform to life. We worked closely with the campaign manager and their fundraising staffs to review and ensure the developed products matched the envisioned experience.

Project Type

Responsive web app

My Role

Product Manager , UX/UI Designer (research, information architecture, interaction design, visual design)

Team

2 full-stack developers

TIMELINE

October – December 2016 (3 months)

Objective

To build a campaign donation platform, to provide potential contributors with a simple, performant and secure path-to-donate experience and adhere to the state’s Elections Commission regulations.

My Process

Understand

The first step was to understand the campaign’s online and offline process and the implications on the mobile experience. I had several meetings with the candidate’s fundraising team to understand their business process and how the donation flow is expected to work. Understanding how people in Indonesia use the internet and how they pay for things online and offline was also key in deciding product strategy, payment options and selecting the right payment gateway. I also tried to understand the state of online fundraising in Indonesia and the best practices of political fundraising.

Key FINDINGS

  • Over 7.7 million registered voters in Jakarta: 13% were first time voters and the biggest group was age 25-40 at 25%.
  • Political fundraising is considered novel and never been done before in Indonesia.
  • With the Elections Commission (KPU) supervising the source and use of campaign funds, they required candidates to disclose the identity of donors as a report.
  • Donors is required to fill in a contribution form which then to be submitted by the candidate to the elections commission.
  • Smartphone penetration in Indonesia was 40% which means 108 million people in Indonesia own a smartphone.
  • Share of web traffic on mobile phones was 70% with a significant growth over the years.
  • The most common payment methods for online shoppers was bank transfer at 73% and cash-on-delivery (COD) at 18%, followed by credit cards at 6%.
  • With the combination of the incumbent’s popularity, the rising number of online transactions, and media exposure during the election, this platform has potential to be successful.

Domain Research

This project was perfectly timed during the much-talked-about 2016 US presidential election, so it wasn’t hard to find fresh information around political fundraising. Not only I looked into both Trump and Clinton’s donation platform but also nominees like Bernie Sanders and Marco Rubio. Hillary Clinton‘s site stood out for me because of the clarity of the donation flow and how  coherent it was with her campaign’s branding.

I also looked into popular crowdfunding platform GoFundMe and similar sites on their payment options offering, but none of them seem to offer other than credit card and Paypal. On the popular Softbank-backed local online marketplace site Tokopedia, shoppers seem to be smothered with choice. Screens with an overwhelming amount of payment options are common during the checkout process, 39 unique payment options to be exact.

USER PERSONA

Based on conversations with supporters and potential donors, I created personas for a typical donor to guide design decisions and the team’s priorities throughout the project.

KEY user insights

  • A small number of donors are non tech-savvy and still prefer cash payment. 
  • Not every potential donor are comfortable with giving out their personal information. In order to trust the platform, users expect there to be a high level of security and confidentiality to protect personal information.
  • Potential donors understand how to do bank transfer and have at least 1 account at the big 4 banks in Indonesia (BCA, Mandiri, BNI, BRI).
  • Over 80% of users interviewed prefer to access the platform on their phones rather than desktop.

Define

Ideating a solution

Based on the findings mentioned above and the client’s brief, we were expected to build a platform that can offer both online payments (bank transfer, credit card) and cash and card payments via distributed EDC machines at the campaign’s donation booths around the province to accomodate both user personas. We presented these 2 possible user flows:

User Flow 1

Donors are expected to select donation amount and fill in personal data first, then they may choose how they want to pay: online or at donation booth.

If they choose to pay online, the may choose between bank transfer or credit card and proceed to make the payment.

If they choose donation booth, they can see booth location list to locate the nearest or the most convenient to them. When visiting the booth, they just need to make payment as their pre-filled information is already stored in the system.

User Flow 2

Donors are expected to choose between 2 donation methods: online or at donation booth.

If they choose online, they proceed to select donation amount, fill in personal data and select between the online payment options.

If they choose donation booth, they can see booth location list to locate the nearest or the most convenient to them. When visiting the booth, they need to fill in donation form and then make the payment.

We compared both flows using user testing to gather qualitative insight. A significant number of respondents prefer the User Flow 2 as the donation methods and payment options are presented on the first screen. They wanted to be informed about these options before they decide to commit and go through the process.

Design

Principles

Keep it simple

Each component within the app is useful and required. Users get the job done in as few steps as possible to keep the experience as frictionless as possible.

Responsive, mobile friendly

The vast majority of users access websites using their phones over other devices like desktop and tablets. We target a large demographic, and maintaining inclusivity and legibility within our design is paramount.

Safe and trustworthy

Clear communication and security of the platform in storing private information is essential in building trust towards the candidate and the campaign’s fundraising efforts. 

Wireframes

I began the process of wireframing with sketches of variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose served as a guide for my digital wireframes. 

I transformed my sketches into digital and created an interactive prototype on InVision. The wireframes made it easier for developers to communicate feasibility issues and offer feedback early on.

At this point in the design process, I needed to think about how I wanted the site to look on different screen sizes. It was essential that the website would present as well on tablet and desktop as it did in mobile devices.

Validate

ITERATIONS IN MID AND HIGH FIDELITY

We moved forward with our design into building a high fidelity digital prototype, iterating on the feedback we received by testing our wireframe prototype to the team and users.

Donation home screen

Tweaked the copy to be more understandable and relatable to users. Added payment options so donors can easily decide with method to choose before proceeding through the process.

Donor information screen

One of the biggest friction of the donation process was asking donors to fill this lengthy form about their personal information.

 

To ease the friction, I tried to break down the forms into 2 parts to avoid users being overwhelmed by looking at the many fields. This change resulted in a significant improvement in conversion.

 

Payment methods screen  

I tried to simplify payment options in the intention of not overwhelming users with options by not showing too much information on this screen.

 

After doing some testing, showing Bank Transfer by default was important since it is the most popular payment method. Bank logos helped users to easily identify and decide quicker. This layout made it possible to include more bank options in the future.

Final Design

After several iterations of my prototype, I fleshed out the details of each page with images, typography, navigation menus, etc.

Bank transfer by default

Showing Bank Transfer by default recognizes the most popular payment method in the demographic and helps donors to select their preferred bank faster. This layout also ensures adaptability of the platform to support more bank options in the future.

Pledge confirmation screen

This screen lays out the important payment informations in good hierarchy order. “Copy” button helps users to copy the bank account number easily and switch between apps to make the payment.

Web desktop view

The Outcome

Using the platform, the incumbent governor successfully raised 87 billion IDR (USD 6.3 million) from the public in a period of 3 months. Conversion rate performed pretty well at 1.3%, slightly above the industry standard of 1.18%.

After the 2017 election, our fundraising platform gained attention and since then has contributed to the fundraising successes in the 2018 gubernatorial elections in West Java and South Sulawesi, also the 2019 parliamentary election in Jakarta.

$6.3m

funds raised

99%

donors never contributed to a political cause before

1.3%

donation conversion rate

Reflect

This was the first time I was trusted to manage a product team for such scale and impact. From hiring, managing and mentoring my own team, until navigating through stakeholder’s expectations all at the same time, this project was tiring yet wonderful learning experience. We worked around the clock from months before the campaign starts even up until the last week of the election (Oct ’16–April ’17). This donation platform was only a glimpse of a bigger project we did for the campaign. I hope I could write about it next time!

 

I learned how to empathize and see from different perspectives of a product and see the bigger picture. Not only from the UX/UI standpoint but also in terms of feasibility (tech) and viability (business).

 

MUCH MORE TO BE DONE

While the results was mostly positive, the product is far from perfect. Given the limited time to execute and launch the product, and partly because of its quick early success of achieving its fundraising targets, we didn’t had the opportunity to do optimizations to maximize the learning. If I were to take this project even further, I would A/B test both user flow variations, compare the conversion and iterate from there. I would also try experimenting around the “why(s)” of donating, social elements and personalized messaging.

Like what you see?
Let’s chat.

emaillinkedin