Select Page
iDonate

Creating a better user experience with a focus on onboarding, account management and online transactions

UX / UI WEB DESIGN  |  LOGO DESIGN | BRAND IDENTITY

idonate UX Redesign

Project Overview

idonate provides tools for both charities and fundraisers to help them raise vital funds. idonate operates primarily as an online fundraising platform, where users can create their own page to promote their fundraising event, allowing family and friends to donate directly to their chosen charities.

idonate also provides a number of SaaS products and hosted fundraising solutions, such as their Virtual Fundraising Events that became so important during the COVID-19 lockdown and an Online Raffle Creator. Idonate allows charities to collect fundraising revenue through the idonate platform or directly through their own websites also.

I was approached by the founders of idonate to help them to reduce the large volume of support calls they were receiving from users, create a simplified navigation and site architecture to encapsulate the various additional products that they now offer under the idonate brand and create a fresh, new visual identity for idonate (including a logo design and new brand identity).

I worked on the entire product design as the sole designer from research to conception, visualisation and testing.

Jump to Section

Quantitative Research

Metric Analysis

Data from integrated site analytics were studied and analysed to gain an understanding of the user demographics, behaviours and flows through the existing website.

Using the tool Hotjar, I took a snapshot of screen recordings of user interactions and collected data from click and scroll heatmaps.

This data highlighted some initial potential pain points around site navigation, inconsistencies in labelling and jargon. It also showed how users tended to interact with different elements on the site.

idonate click heatmaps

Mobile Click Heatmap

idonate scroll heatmaps

Desktop Scroll Heatmap

idonate Competitive Benchmarking

Competitive Benchmarking

A full competitive benchmarking exercise was undertaken to gather a better understanding of the industry standard, potential user pain points, defined user mental models and opportunities to create a better user experience and use design as a competitive advantage over other fundraising platforms in use in Ireland.

I looked at the overall user experience in detail for each competitor, but focused extensively on the positives, neutrals and pain points involved in:

  • $Homepage Layout and Content
  • $Navigation and Information Architecture
  • $User Account & Dashboard - Editing a Fundraising Page
  • $Checkout - Donating to Somebody's Cause

Qualitative Research:

Usability Testing Sessions & Depth Interviews

A series of usability tests were conducted on sample users with the goals of:

  • $Determining the main source of user pain points
  • $Identifying areas that cause confusion with users, especially around site architecture
  • $ Where any negative experience may cause user drop-off during onboarding
  • $ Evaluating the user experience of the donation process to spot any potential improvements or sources of user frustration
idonate User Testing Sessions

Remote Usabiility Testing Session

Based on these goals, I developed a series of tasks for the users to complete, including setting up a fundraising page for a sample charity, making some basic edits and updates to their fundraising page, promoting their page on social media and making a donation to another fundraiser using the search function.

The users were carefully chosen to give a range of computer literacy, age and device-preference. The testing sessions themselves were a mixture of in-person sessions and remote sessions. All sessions involved a depth interview afterwards to probe further into the pain points and mental models of the users.

Analysis

User Pain Points & Opportunities

idonate User Pain Points

Pain Point:

Users have difficulty navigating the site

All test users had a great deal of difficulty and frustration trying to find the option to create a fundraising page. The text copy and multiple different options presented seemed to cause this confusion. In reality, most of these options would have brought them to their desired result, but because of a lack of consistency in the text presented to them (button labels, text copy, etc.), the user was unsure of the function of each of these options and it took a long time and frustration before they could find the most important option on the website.

Opportunity:

Revised Site Architecure & Navigation

Simplify the options presented to the user: one option to “Create a Fundraiser” for all users, which focuses on the primary user and not edge case users, but still providing a clear path for all users to take.

Remove confusing jargon and keep consistency with terminology and reduce the number of options presented to the user to three primary areas: “Create a fundraising page”, “Search for a fundraiser” and “Login”.

Pain Point:

Selecting an Event during onboarding caused confusion

The user is expected to search for the event they are fundraising through by date, but this is not made fully clear, and because of this the user cannot find the event they are searching for and end up entering it manually. It takes the user a substanial amount of time and frustration before getting to their desired result.

Opportunity:

Simplify the Event selection process

Remove the date-picker option and instead present the user with a simple search bar where they have control to search by event name, location or date.

Give clear feedback on what to do next if the desired event does not appear in search results: manually enter event details, but only visible after searching.

Pain Point:

Users don’t understand what a “short URL” is

The user is asked during onboarding to select a short URL for their fundraising page. This is not a required step, but is configured to look like it is.

Error messages appear on the form before text entry and don’t clear until after the form has been submitted, which causes the user to think that they have incorrectly entered something and they get frustrated trying to figure out what a suitable entry should be without adequate feedback.

Opportunity:

Use visual guidance

By presenting the text input field where the user is asked to select a short URL as it would look in a browser’s address bar, the user will understand at a glance what they are being asked to change here (using the SSL lock symbol and visuals matching common browser address bars). Clear help text advising the user and reminding them that this step is not mandatory also. 

Having error validation not occur until after the form has been submitted will help reduce user confusion and frustration also.

Pain Point:

The User Dashboard and Edit Page is overly complicated

When it comes to editing their page, the array of options overwhelms and confounds the user. The Edit Page section assumes the user will go through each step sequentially, rather than jump straight to the section they wish to edit. Presenting options “Next” and “Save and Exit” cause confusion with the users, and because each step needs to be saved before moving to the next often ends with them not saving their changes. The users are unsure of what options they are changing and where these changes or updates will appear on their page.

Opportunity:

Simplified Dashboard Options and a Visual Page Editor

Nesting options under headings has caused much of the problem, so by giving each option it’s own defined section, the user should find what they want easily. User guides beside each option to help any user who gets stuck, reducing support calls.

Remove the Edit Page section and replace it with a visual page editor (using the Facebook mental model), where the user can edit sections visually on their page, seeing exactly what they are changing and updating without any confusion.

Pain Point:

Users want to see the Page Template before selecting it

If the user wants to change the template of their fundraising page, they select from a number of drop-down select options, which are just non-descriptive text options. The user’s feedback was that they’d like to see a preview of what each template looks like before clicking on the option.

Opportunity:

Pick a Page Template during onboarding

Based on the user feedback, it makes more sense for the user to pick a page template during their original signup (creating their fundraising page), rather than afterwards.

Include the page template selection in the Create a Fundraiser form process, showing thumbnails of the templates.

Pain Point:

Users get lost on the FAQ page

The FAQ page is a separate platform powered by ZenDesk. The landing page is configured to look very similar to the idonate homepage and the navigation options offer a “Home” button that leads to the landing page of the FAQ platform. All users had tremendous issues with getting back to the idonate website after going to the FAQ page, not realising that they were on a different platform/browser tab.

Opportunity:

Change the Visuals of the FAQ page and provide a clear return route

The user was confused by the fact that the ZenDesk FAQ platform was styled to look very similar to the idonate homepage. By distinguishing the visuals of the FAQ page, it will help the user differentiate where they are. A clear “Return to idonate” navigation button that is always present at the top of the page will solve the “getting lost” problem.

Pain Point:

Donation Payment Type causes confusion and confidence issues

The user is asked at the beginning of the donation checkout form to select a payment type (Credit Card, Apple Pay or Google Pay). Credit Card is selected by default, but users are still clicking on it and when nothing changes, they are thinking that it isn’t working and contacting support for help.

A lot of users are also wary of adding their contact phone number and address, which is a requirement of the credit card transaction provider, thinking that it is being shared with the charity that they are donating to. They are losing confidence in the security of their personal details and not finishing their transactions.

Opportunity:

Split the process into three steps

By splitting the donation process into three separate steps, all of the pain points can be addressed.

1. The user selects a payment type and moves on to the next step.

2. The user fills in their donation amount and a message to the fundraiser and charity.

3. The user fills in their payment details. By keeping the payment details contained and separate to Step 2, the user doesn’t feel like their details are being shared with the charity, but for verification needs, using their mental models from other sites’ checkout process.

Pain Point:

The site lacks any celebration or joy

Many users commented on the lack of encouragement and joy throughout the site. Being a charity fundraising platform where users are essentially doing good deeds to help good causes, they expect to see more success stories and more joy, celebration and enthusiasm throughout the site.

Opportunity:

Show Success Stories and Celebration

Showing success stories on the homepage front-and-center will remind users of the reason behind what they are signing up for.

Giving users a celebratory “well done” and using joyful, colourful animations throughout the onboarding and donation process will help to bring joy and enthusiasm to the site.

User Journey Maps

Four distinct user personnas were created:

  • A new user creating their first fundraising page.
  • An existing user trying to make edits and updates to their fundraising page.
  • A new user who wants to donate to a friend, family or co-worker's fundraising page.
  • A charity setting up a charity/cause page on idonate.

From these personnas, different scopes and scenarios were mapped out and user journey maps were created for each, looking at users’ GoalsContextBehavioursPain Points and Mental Models.

User Flow Maps

One of the biggest pain points that arose from the initial stakeholder interviews, user testing and depth interviews was that of the problematic and unintuitive site architecture of the existing site. User flow maps were created for a number of scenarios and personnas flowing through the idonate site. This was conducted as an exercise to visualise the existing user flow on both idonate and their sister-site ifundraise (which was now being incorporated into idonate with this redesign), and to improve the flow based on the data collected and by analysing the flow maps and user journey maps side-by-side.

Visual Design:

Logo Redesign & Brand Identity

The idonate logo and visual identity redesign went through many iterations, and each design concept was tested with a group of users for feedback.

The early concepts looked at keeping the existing colour scheme and logo elements, which had established themselves over the years, but change the wordmark to all lowercase. “iDonate” has connotations of (dated) technology, rather than giving. Instead the focus was on a differentated “i” to bring it back to reading as “I donate”, where the platform is giving the user the tools to fundraise.

idonate Logo Redesign - Early Concepts

Early Concepts

After some client interaction and feedback from users, it was mutually decided to move forward, away from the ribbon icon and the red colour scheme. The deep red colour used could bring about connotations of “warning” rather than “empathy”, so it was decided to use a mosre pastel green colour, which brings about thoughts of “charity”, “growth”, “success” and “rejuvenation”, making it a great choice for an organisation focused around raising money for charities and causes.

As idonate’s original visual identity was quite dated, it was decided to simplify the new logo, reflecting on the simplification of the new overall design of the brand. We toyed with using a wordmark on it’s own, but found that a logomark was needed for Social Media, etc.

I devised a simple solution to incorporate a logomark within the wordmark, which could also work as a standalone icon. Two overlapping circles signifying fundraisers and charities and a heart symbol where they come together: on idonate. This logomark replaced the “o” of idonate, and the new visual idendity of idonate was born:

Icon Design

The redesign of the idonate web platform would involve showcasing the many features of idonate in a more visual way, so to convey this, I designed a number of icons that would be used throughout the site.

Tools used: Adobe Illustrator

Irish Owned Fundraising Platform
idonate App
Safe and Secure
Become a Fundraising Champion
No Fees
Custom Built Features
Team Fundraising
Raise Funds for Multiple Causes
Fast and Easy Setup
Integrates with Fitness Apps
No Hidden Charges
idonate Icon - Event
idonate Icon - Memorial
idonate Icon - Celebration
Friendly Customer Support

Animation

It was discovered during user testing and depth interviews that joy and celebration was greatly missing throughout the site. In order to bring some celebration back, I created a number of animations that were integrated into the site using Lottie.

Tools used: Adobe After Effects, Bodymovin, Lottie

Ideation: Sketching & Low-Fidelity Wireframes

idonate Homepage Wireframe Sketch 1
idonate Homepage Wireframe Sketch 2

I always like to sketch a design out on paper first. Low-fidelity wireframes and concepts can be fleshed out very quickly and tested before moving on to more high-fidelity prototyping and development.

idonate Wireframe - Low-Fidelity

Clickable Prototypes

Clickable prototypes were created for the all pages, and user validation testing was conducted on the Create a Fundraising Page process, Donation process and User Account and Edit Page functions. User validation testing brought about some tweaking that was needed, which allowed for a quick iteration through the design process before moving on to higher quality wireframe devilerables.

idonate Create a Fundraising Page Clickable Prototype

Clickable Prototype for the Create a Fundraising Page flow created in Adobe Xd

High-Fidelity Wireframes

High-fidelity, fully annotated wireframes for each page were designed using Adobe Xd. Design deliverables included a full design system, interactive annotated wireframes with downloadable assets and style guides and for each flow I also delivered an instructional video demonstrating and showcasing each element on each page. I find that the video demos can help greatly in communicating a design to large teams of developers, like we were dealing with here, and can help to reduce confusion or misinterpretations of design elements (especially dynamic and interactive elements).

idonate Screens Desktop
idonate Website Screens
idonate Mobile Screens
idonate Screens Mobile

Design System

idonate Design System 1
idonate Design System 2
idonate Design System 4
idonate Design System 5
idonate Design System 3

Conclusion

idonate highlighted the importance of simplication in user flow – simplifying the jargon, breaking onboarding tasks into smaller steps helped to create a more user-friendly experience.

Drawing on established user mental models and moving from a set of overly-complicated forms to a visual page editor helped users understand the changes they were making to their fundraising pages, increasing the likelihood of more user engagement.

The project is currently with the development team, in the process of building the new site functionality with a plan for a launch in mid 2021.