CASE STUDY - Resilience BC

Design a donation flow for Resilience BC: Anti Racism Network, a website that provides resources and information to those impacted by racism, or to those working towards ending racism and hate.

Overlay image of responsive screen designs of the Resilience BC donation flow.

My goal as UX Designer for this student website project (guided by the Google UX course) was to design a donation flow for existing Resilience BC website that offers a simple, uncluttered interface, information security, and more data around fund allocation.

Responsibilities

Success Metrics

Ensure users:

User Research

Four participants were interviewed over the phone regarding their experiences with making charitable donations online. Empathy Maps were created to organize information.

One user group of focus was busy professionals looking for convenient and accessible ways to make charitable donations online between the busyness of work and family commitments.

Research showed that busy individuals would benefit from a clean and simple user interface, reassurance of security of information, and seeing a transparent fund allocation.

Carlos persona.

Problem Statement

Carlos is a busy financial executive who needs a convenient and accessible way to make custom online donations because he wants to easily make a positive impact for social justice.

User Research Pain Points

1

Readability

Websites can be overwhelming with content and information, and distract from donation task.

2

Transparency

Users are skeptical of donation allocation and how much of it is actually used to benefit

the cause.


3

Security

Users are providing sensitive data and information that could be leaked or compromised by third party users.


User Journey Map

A user journey map was created for Carlos’ donation experience including points of interest and possible improvement opportunities.

User Journey chart for Carlos as he navigates through donation flow.
Improvement opportunities included offering donation frequency options and providing a clear call-to-action.

Sitemap

Beginning the design phase meant creating a sitemap. Maintaining a simple and clear user interface was a priority for this project, so the existing website infrastructure was adjusted and simplified (pared down and reorganized) and a donation flow was added.


Sitemap for updated Resilience BC website.
Paper wireframes of donation flow for Resilience BC website.

Paper Wireframes

Paper wireframes were sketched out for each page of the website. Layouts were simplified and the amount of information was reduced for a cleaner UI.

Wireframes for the donation flow (above) explored layouts that would prioritize an intuitive and secure experience.

Paper responsive wireframes of Resilience BC donation flow.

Screen Size Variations

As users expressed varying preferences for how they would like to make online donations, a tablet and mobile view for the donation flow were also sketched out to ensure a fully responsive experience.

Digital Wireframes

More detail and structure was included in the digital wireframes, which featured a simple and clean design. 

Elements like a fund allocation chart (provide transparency) and security badge (cybersecurity assurance) were implemented to address user research feedback.

Digital wireframe of donation flow page of Resilience BC website.

Digital Wireframes
Screen Size Variations

The donation page design demonstrates a clean and user-centric layout. Options for donation amount and frequency were provided, as users noted the desire to have options when making a donation.

Three responsive screens showing the donation flow of Resilience BC website.

Low-Fidelity Prototype

Website screens required to demonstrate the donation flow were designed and connected to create a main donation user flow.

Separate frames were created to show a PayPal payment overlay and for instances when the user selected a different billing address.

Prototype screens of Resilience BC donation flow, with and without connection lines.

Usability Study Findings

Remote usability studies were conducted with 5 participants in Canada. These were the main insights learned by conducting usability studies.

1

Cheque Wording

Some users found the cheque payment option unnecessary or confusing.

2

Fund Allocation Chart

Most users admitted to not noticing or skipping the fund breakdown graphic.


3

Donate Button

All users were able to easily locate the donation button on the homepage.


Updated Mockups - Transparency

The usability studies made it clear that most users did not notice the fund allocation chart. This could have been because it was unclear that it was a pie chart, or that users were focused on other tasks during the study. 

Bold brand colours were used for the high-fidelity pie chart to enhance its prominence. Animation could be another way to draw attention to this graphic that seeks to provide more transparency to its stakeholders.

Before and after usability study images of Resilience BC fund allocation chart on donation page.

Updated Mockups - Security

Before the usability study, some research participants had mentioned the value of diversity in payment methods. There were some concerns with information security that also fed into reluctance with digital payment methods. 

The option of payment with mail-in cheque was added as an option, but users mentioned it was odd that a non digital payment method would be promoted at this point in the digital payment process. The option was removed to eliminate any confusion or hesitation.

Before and after usability study images of updates to the donation payment methods for Resilience BC.

Website Mockups

High-fidelity screens of the main user flow including updated branding.

Responsive Mockups

The ability to make donations on varying device sizes is important to users and their unique needs, so three screen sizes were created for the Resilience BC donation flow.

During the research study, some participants indicated a preference with making donations via a computer whereas some preferred the convenience of a mobile phone.

Three responsive screens of high-fidelity mockups of the Resilience BC donation flow.

High-Fidelity Prototype

This hi-fi prototype is similar to the lo-fi one, but includes the small adjustments distilled from the usability studies.

Prototype screens of high-fidelity Resilience BC website, with and without connection lines.

Hi-Fi prototype for Resilience BC donation flow.

Accessibility Considerations

Form Fields

Form fields were mostly labelled with high contrast type instead of using placeholder text within the field that could be low contrast or skipped by screen readers.

Landmarks

Landmarks (header and footer) were consistently used to help users navigate a page and its fixed components.

Colour Contrast

High contrast colours were used for headings and background fills behind type to ensure legibility.

Takeaways

Users found the website donation flow easy to navigate and straightforward to use. A prominent Donate button allows the user to stay focused on task, and the security badge adds a visual layer of reassurance.

It's worth noting that some user findings showcased patterns that weren’t repeated during usability testing. For example, most participants were not concerned with cyber security during the prototype stage whereas some were significantly concerned during the initial research stage. It would be helpful to continue testing and collecting user feedback from a wide user group.

Next Steps