A couple weeks back, when I was gearing up to begin my 100 Days challenge, one of the products that I contemplating working on was a system that made it easier for people to donate money to causes they supported. Ultimately, it was deemed to small of a feature for me to design an app around it, so it remained shelved for the time being.

Today, it’s coming off the shelf as part of a redesign of Indiegogo’s mobile contribution experience.

Step 1: A Quick Usability Study

First, I spent time playing with the Indiegogo app, noting observations that I made about the experience:

• Beautiful and compelling UI!
• No onboarding
• Landing page UI is bright, mostly white, but the search page is mainly dark, compartmentalized, and not full bleed, like the landing page. The headers on each tab are also inconsistent. It feels almost like two different applications
• Somehow, it reminds me of a news website — perhaps because of many different line weights and stylistic forms
• “We’ll remind you two days before a campaign ends” is a very helpful and clear signal on the campaign monitoring page.
• Category distinctions and Call-To-Action (CTA) areas are clear on the “Campaign Overview” pages
• I would love to support some of the cool products and charitable causes campaigning on Indiegogo, but as a college student, I don’t have the budget to regularly donate, thus, not meriting the need for the mobile app.

After exploring the app, I chose the contribution feature as the focus for my redesign. It’s a primary success metric so it needs to convey trust, have high usability, and feel rewarding to keep users donating again and again.

Then, I gathered a couple of friends and asked them to “think out loud” as they use the app, as if they were making a contribution, for some guerilla user testing. Some quotes from the test:

• “The ‘perks’ list goes on for a while — if you hadn’t told me to explore more, I wouldn’t have scrolled down to the updates and team section.”
• “It feels like the contribute button is on the highest level of the page, as if tapping on it will be a contribution to Indiegogo, as opposed to the campaign that I’m looking at.”
• “I trust the ‘get this perk’ button more than ‘contribute’.”
• “…no app version of the payments, it’s a website inside the app… the keypad pops up to type in a dollar amount, I reflexively tap for the number keyboard, but it was already on the number keyboard, so I ended up on the letter keyboard. Why isn’t it a number pad?”

Step 2: Defining the Problem

Now that I’ve conducted user research and scoped a particular feature of the app, I can define the problem that I will be focusing on:

As what is likely one the most important user flows in the application, the contribution process in the Indiegogo mobile application needs to be more clear, trustworthy, and conducive to straightforward donations from a User Experience point of view.

Assumptions & Constraints

• A normal user is casual and passive about their contribution
• User is already signed in to the app
• I don’t own the font used in the app, Benton Sans, so I’ll be making do with Source Sans.
• Because the payment page is modular, I will focus on designing a flow for custom contributions, one which can also be able to be inserted into the “Additional Gift” module in the flow following selecting a perk.

Specific Pain Points

1. “Perks” list is often too long, negatively impacting user’s ability to get all of the information about a campaign, as well as keep up with updates
2. “Campaign overview” has more CTAs for perks than background information on the campaign, whereas they hold equal weight on the website.
3. The transparency and location of the “contribute” bar doesn’t feel connected with the page, or trustworthy.
4. The payment process is in-app but not of “native” app UI, more like a repurposed version of the webpage featuring a desktop version of Paypal, therefore, no card information storage, requiring users to input the same information for each contribution.
5. There’s not much of a point to downloading the mobile app for younger people who can’t afford to contribute to campaigns on a regular basis.

Step 3: Ideate (Solutions)

1. Perks take the same horizontal priority as the header area with the video, title, and progress bar on the desktop page. To keep this hierarchy but also decrease the vertical space used, if the perks are in the same vertical space, but prioritized horizontally, it can be easier to access other parts of the page while allowing easy access to the list of perks.
2. Move more information above the fold, pagination in the hero module, enlarged “Read Story” module, less hidden information
3. Have the “contribute” bar swipe up from the bottom after the “perks” module is viewed, giving users the impression that the button appeared because of actions they made on the page, not a separate high level button.
4. Implement a payment UI pattern with chunking of the payment form.
5. Create a new system for users to connect their credit/debit cards with Indiegogo so that they can accrue change from purchases made from the card. Each transaction will be rounded to the next highest dollar amount and the difference between the true value and rounded value will accrue from setup of the system to the end of the campaign — Make Change With Your Change. In this way, users won’t need to remove a large chunk of money from their budget at a time, but rather mere cents at a time.

Step 4: Redesigned Screens

To the left, my redesigned version. To the right, the original version.

The next comparison is a discussion of further down the same page as the previous comparison, seen in the animation above.

Assuming the next action the user takes is tapping the “Contribute” button after viewing Perks and deciding to use none, the following comparison is a mild redesign of the first page in the payment flow.

The following screens are the keyboard interaction for the previous screen. Because only numbers can be input, the need for an error message as well as any other non numerical characters is eradicated. Only a number pad is needed. The left is the redesign, the right is the original.

The final screen in the payment flow is the receipt. I’ve divided it into two sections.

Step 5: Follow-up

Some things I realized post-designing would change the designs in the next iteration:

• The fixed contribution option takes the user to Paypal, but the flexible contribution option uses Indiegogo’s own contribution flow. I found this out too late for it to efficiently alter my designs.
• Depending on the campaign, the perks list can be quite short, as opposed to the “TAPP” campaign that I pulled from Indiegogo as my example.
• A simple timeline style outline for the payment process with three or four distinct milestones can aid in helping the user visualize the length of the process from a high level.

The Extra Idea: Make Change With Your Change

Oftentimes, as a college student, I don’t have the ability to spend chunks of money on extraneous goods, like campaigns on Indiegogo. Ideally, I’d save money toward some campaign ending in, say, one month, and be able to get some of the cool perks. However, because I have a lot of homework and such, it would be easier to utilize Indiegogo if I could save money in a passive way. Thus spawned the idea of paying on Indiegogo with a feature called “Make Change”, where a user could link his/her credit card with a campaign and contribute the change accrued on the card over the next month. A potential flow:

1. User presses “Pay with Make Change” button.
2. The same flow as adding a new card will appear.
3. A selection between accruing however much change until the end of the campaign and contributing at a certain limit.
4. User leaves set-up flow and is taken to profile and under “My Contributions” is some kind of a meter showing the amount accrued so far, and whether or not it has hit the goal amount (if applicable).
5. Before the campaign ends, about a day or two in advance, or after the limit/goal amount is reached, the user will be notified to approve the contribution payment. Payment should be made all at once to lower credit card fees for <$1 transactions.