idonate UX/UI Design

Creating a better user experience with a focus on onboarding and account management.

Understanding the

Background

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).

iDonate

idonate needed help in reducing the large number of support calls they were receiving by creating a simplified navigation and site architecture.

The part I played

My Role

UX Design

UI Design

Logo Design & Brand Identity

I served as the sole UX and UI designer on the project, with full management of the project from the very beginning.

I undertook all of the UX research with input from sample users and stakeholders and worked as the sole UI designer from conception to completion before handing over annotated high-fidelity wireframes and video walkthroughs to the development team.

Design to Development

My Process

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.

This data highlighted some initial potential pain points around site navigation and inconsistencies in labelling and jargon.

idonate scroll heatmaps

Homepage user scroll heatmap data from Hotjar

Research

Competitive Benchmarking

idonate scroll heatmaps

Competitive Benchmarking Exercise

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 & Information Architecture
  • =User Account & Dashboard - Editing a Fundraising Page
  • =Checkout - Donating to Somebody's Cause

The main findings from this exercise were that most competitors focused on a very simple, step-by-step onboarding setup, asking only for the absolutely essential information from their users. Account management varied from app to app, but provided great insight into opportunities for improvement and to gain a competitive advantage.

Account management varied from app to app, but provided  great insight into opportunities for improvement and to use an improved user experience as a competitive advantage.

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

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.

The findings were invaluable. Serious pain points became evident around basic site navigation, onboarding and especially around the user dashboard and edit page functionality. User frustration was very high around these areas and depth interviews with the users brought about clear issues that needed addressing.

idonate User Testing Sessions

Remote usability testing session

Serious pain points became evident around basic site navigation, onboarding and especially around the user dashboard and edit page functionality.

Analysis

Pain Points & Opportunities

Click each post-it below for more information:

Users have difficulty navigating the site

P

Selecting an Event during onboarding caused confusion

P

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

P

Dashboard and Edit Page is overly complicated

P

Users want to see templates before selecting

P

Users get lost on the FAQ / Help page

P

Donation page causes confidence issues

P

The whole site lacks any celebration or joy

P

Analysis

User Journey Maps

Analysis

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.

One of the biggest pain points that arose during research was that of the problematic and unintuitive site architecture of the existing site.

Design

Logo Design & 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:

Design

Icon Design & Illustration

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

Design

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 Illustrator, Adobe After Effects, Bodymovin, Lottie

Design

Sketching & Low-Fidelity Wireframes

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 Homepage Wireframe Sketch 1
idonate Homepage Wireframe Sketch 2
idonate Wireframe - Low-Fidelity

Prototyping

Clickable Prototypes

Clickable prototypes were created for all pages, and user validation testing was conducted on the Create a Fundraising Page process, Donation process and User Account and Edit Page functions.

idonate Create a Fundraising Page Clickable Prototype

Clickable prototype for the Create a Fundraising Page flow created in Adobe XD

Validation

User Validation Testing

User validation testing brought about some tweaking that was needed, particularly around the Edit Page designs. Users weren’t immediately understanding the visual page editor and needed to be given a visual prompt. The solution came with a simple banner at the top of the page, that informed the user that they were editing their page, which in turn prompted them to look for the changes they wanted to make. Testing with clickable prototypes allowed for a quick iteration through the design process before moving on to higher quality wireframe devilerables.

Design

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 Desktop Screens
idonate Website Screens
idonate Mobile Screens
idonate Screens Mobile

Conclusion

Thoughts & Learnings

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 scale of the project was much vaster than originally conceived. Upon reflection, I think a more Agile approach towards the project would have made the project more manageable and would have allowed for faster development, with more user testing. However, user test validation from clickable prototypes and iterating back through the design process was still a speedy and effective process.

“UX Designer Alan Travers has crafted a clean, user-friendly platform that will significantly raise the profile of the business as it grows and expands into new regions.”

All-Ireland Business Foundation

“iDonate hired Alan to do a review of iDonate branding and UX/UI. From day 1 it was clear Alan’s approach and thinking would bring iDonate to a new level. He created a new identity for iDonate and what we found most useful was his approach in explaining his thinking behind the design theory and providing videos to back up his explanation. This allowed us to make very clear decisions. Alan also took on the full UX testing before his redesign and this has clearly resulted in a much more user friendly platform. We look forward to working with Alan further.”

Alan Coyne idonate

Alan Coyne

Founder, idonate

idonate

Let’s work together!