Charitable organizations prefer receiving monetary contributions, but are often approached by people offering to contribute their time or render a service. Charitize wants to facilitate this exchange of skills for money, within a digital platform.
Delivered end-to-end web-based platform, that connects service-seekers with service-providers, channelling the payment on service rendered, to a charitable cause or organization of choice.
I was in an individual contributor role as a product designer on a team of 13 other product designers. I owned the filtering experience for service-providers and service-seekers.
Charitize wanted a self-service platform that brings together three groups of people: service-seekers, service-providers and charitable organizations who are raising money for a specific cause. They had completed a proof-of-concept on a smaller scale involving 100 users across the 3 groups.
We conducted user interviews with 20 people. Insights were grouped into motivations, behaviors, goals, channels and pain points to inform the best course of action. Each of us became experts in 2 or more of the solutions currently out there, so we would be able to draw on that knowledge, dos and donts when recommending solutions and features.
We determined the user journeys and associated task flows as a team, and determined the experiences that would be similar and different across the 3 groups of users. That helped us in building the information architecture to work from.
We split into 3 groups to tackle each user's task flow within the platform, keeping in mind their expected outcomes. We used design studio techniques like crazy 8s to generate as many solutions as possible for each part of the user journey. The platform and all key interactions were prototyped using Marvel.
User stories generated early on as part of the customer journey process, were used in validation testing. Testing was carried out in two stages - lo-fi and hi-fi. The completed platform was delivered at the end to the clients.
Here are some screens of the final product which I had a direct hand in designing in testing.
The clients wanted an MVP that could be used to attract early users to the platform. In our process, we considered only interactions that would happen within the platform. We also got on the same page about the language that we would be using to describe the different users:
- Donors - refers to those looking to engage a service through a monetary contribution.
- Volunteers - refers to those able and willing to provide a service have payment for that service channelled towards a cause of their choice.
- Organizations - refers to communities, starting with places of worship and schools that want to raise money towards a specific cause.
The team analyzed 26 competing platforms trying to address the same target market. My focus was on understanding best practices on executing on-boarding and browsing initiatives, so I additionally, I looked into platforms like Kickstarter, GoFundMe and TaskRabbit for inspiration on information architecture. Putting our observations of the competitors' platforms together, we arrived at the following takeaways:
In the user research phase, we were interested in talking to those who had made a monetary or service contribution towards a charitable cause in the last 6 months. Our objective was to understand their intent for and frequency with which they render contributions, and their overall experience on the platforms they have used in the past.
At the end of 20 user interviews we had several walls of stickies to make sense of as a team. We grouped the insights for each user type into their:
- Goals: the "why" of what they do
- Motivation to contribute
- Behavior when making or considering a contribution
- Pain Points faced during the whole process
It became clear very soon that in order for the website design to be successful, and considering a big team of 13 other designers were working on this simultaneously, it was critical that we develop user stories and associated copy that the components could be built around:
Task Flow Diagram
I created the below task flow diagram to help the product leads determine how the work could be divided up among the whole team. Visualizing the flow in the following way enabled us to take ownership of a series of interrelated interactions versus designing individual screens in silos.
Design & Develop
I owned the process of designing the experience of filtering search results to make a selection. This was challenging because I had to ensure that the experience would not differ drastically between using the platform as a volunteer and using it as a buyer. I also had to consider that a buyer could simultaneously be a volunteer when using the platform, and needs to be able to toggle between the two views. The evolution of my concept of designing this experience from sketching to hi-fi is shown below:
Fig 1: Sketches showing possible layouts of the initiatives when viewed by the users.
Fig 2: Lo-fis of the filtering interaction.
Fig 3: High fidelity designs with explanations on the design decisions that were made as a team.
Testing & Validation
From the time we started working on the lo-fi, the onus was on each individual to test what they could and make incremental changes. We had a chance to put together a clickable prototype of the lo-fi for one round of validation, and a clickable version of the hi-fi for another round of usability testing with a different set of potential users. It was a great success as 4/5 users grasped the requirements of the tasks handed to them, and completed it easily during the testing of the hi-fi prototype.
As a next step, Charitize will be working with engineers to implement this design. As a team, we were proud of what we could accomplish within a period of 6 weeks!