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.
My goal as UX Designer for this student website project 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
Conduct phone interviews
Ideation
Paper and digital wireframing
Prototyping
Conduct usability test
Synthesize information
Low and high-fidelity mockups
Responsive design
Success Metrics
Ensure users:
can navigate the website easily
are provided with a secure form of payment
are informed upfront where funds are being allocated
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.
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.
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.
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.
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 Wireframes
Screen Size Variations
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.
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.
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.
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.
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.
High-Fidelity Prototype
This hi-fi prototype is similar to the lo-fi one, but includes the small adjustments distilled from the usability studies.
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
Conduct a usability test on the high-fidelity prototype and see if cybersecurity is noted as a concern by users.
Consider accessibility with labelling form fields and ensure effective keyboard navigation for the form user flow.
Contact illustrator to produce consistent stylized artwork for entire website.