Background

The Good Exchange was initially designed to administer Greenham Trust's charitable grants, but later expanded to connect other funders with suitable causes. The platform had limited functionality and bad user experience.

Problem

The donation/payment section had a large and complicated check-out process. The main goal was simplify and improve, make faster the process.

Research

We run several surveys and tests with user interviews to identify the painpoints in the existing solution. The following problems were crutial:

• - Which donation amount was used most by the users
• - Existing user vs. non-registed user
• - Customising donation section is too long
• - Payment section is too long
• - User can't reuse credit card
• - Autofill address will be useful
• - Sections are overall too long

Brainstorming / Userpath

Based on the research we rethought the business process and the userpath and simplified it. We focused to break apart the pages into logical sections and only display information that is indispensable.

Testing ideas

After ideating and drafting some paper wireframes we created the initial design sketches. These ideas have been A/B tested, before the high fidelity prototype has been relased.

Mockups - Step 1: Donate

Improvements:

• - Transparent progress-bar has been added
• - Added more options - the default donation (£30)
• - The label of the question has been made bold
• - Existing Account or Create New function has moved to the next page
• - Page has been shorten

Mockups - Step 2: Your Account

Improvements:

• - Simple and fast login
• - Password can be seen, if needed
• - Help regarding forgotten user details has been added
• - New account has been moved to a new page

Mockups - Step 3: Customise Donation

Improvements:

• - Started to use toggle button
• - Donation details were split into accordion to display further information
• - Continue button is inactive until customisation

Mockups - Step 4.1: Payment with Card

Improvements:

• - Credit card has its own page
• - User can use multiple credit cards
• - User able to add a new credit card to the one already existing
• - Simple selection of the existing credit cards
• - Autofill billing address from the registration details

• - Credit card get automaticly saved
• - Credit card can be scanned
• - The number of credit card digits have been devided into 4 parts
• - Hints for credit card information
• - Selected credit card can be used as default at payment

Mockups - Step 4.2: Payment with BACS

Improvements:

• - BACS payment has it own page
• - Autofill billing address from the registration details

Mockups - Step 5: Thank You

Improvements:

• - Positive feedback regrading the donation
• - Donation total sum of the donation has been divided between the donors
• - Buttons to enforce users to move further to the recommended pages

Output

The proposed improvements have been partly added to the live version and improved the user satisfaction.