Toronto Friends of Refugees (TFOR) Website Redesign
Summary
Background: TFOR (Toronto Friends of Refugees) is a charity group that helps new refugees in Canada. The TFOR website provides information to the public, accepts monetary donations, advertises charity events and solicits for volunteers.
Objective: Re-design the TFOR website to improve the donations processing and increase volunteer applicants.
Context of Work: This project was undertaken as part of a capstone project the Univeristy of Toronto. For this project I worked in a team of 5 UX Designers.
Role: UX Researcher, UI Designer
Interviewing Business Owners
Interviews were conducted one-on-one with each of the 4 Business Owners. Interview questions probed for areas of frustrations about the current site as well as ideal state.
The business owners had 4 main areas of concern:
1. The donation section of the website consisted of too many steps causing users to abandon the process.
2. TFOR executives often had to reluctantly turn away donations of clothing and other items (they only accepted monetary donations).
3. TFOR executives found the process of hiering new volunteers time consuming.
User Workshop
Based on Business Owner goals and survey data, we outlined a workshop that would help us understand user needs. Our 2 hour workshop consisted of 9 participants and 3 activities:
A. Tweet Your Rage
Each participant picked a charity app/website they either loved or hated and discussed the reasons out loud to the group in the format of a tweet. This activity allowed us to understand website features that users like and dislike. Furthermore, it primed users for the final task in which they would draw their solutions.
B. Story Boarding
As a group, participants brainstormed everyday activities a refugee may struggle with during their initial integration into the country and how a group like TFOR would help with those struggles. Participants wrote their answers on sticky notes which were then organized into clusters. Each cluster was given a title. This activity allowed us to understand what expectations users had for the TFOR website.
C. Draw Your App
Based on the first 2 activities, participants were given a sheet of paper and pencil, and were instructions to draw their idea for charity website the helps new refugees in Canada. Each participant was paired with a UX Designer to help them translate their ideas into a visual format (if needed).
Low Fidelity Solutioning
A new donate section contained 3 areas allowing users to donate clothes, Money or Other Supplies. Thus, even though TFOR does not have capacity to facilitate non-monetary donations themselves, they can now act as a hub providing links to other sources that can process these donations. Below the donation area is information explaining how monetary donations are used. This section builds trust with the user by transparently explaining the allocation of funds. Lastly, the donation of money is now a stream-lined process where only the most necessary information is collected (figure 1).
Figure 1: The donations area (1) streamlines the monetary donation process (2) allows for the donation of non-monetary items and (3) builds trust by letting users know where their money goes.
Figure 2: The new homepage contains obvious call-to-action buttons upfront allowing people to donate easily and quickly.
Hi-Fidelity Prototypes
I individually created Hi-Fidelity prototypes (with Sketch) based on iterations from quick user testing sessions further providing the website with a refreshed look and feel.
Figure 3: Users are provided only the most necessary options and fields when donating money.
Figure 4: The new homepage includes call to action buttons for donating and volunteering.
Outcome
Our team remodeled the TFOR website with uniting direct user feedback with stakeholder needs. The new website streamlined money donations while gaining user trust (by letting them know where there money is going) and has a method to processes non-monetary donations. Stakeholders were highly satisfied with the high-fidelity prototypes provided.