Redesigning a charity organisation’s UX website to improve the volunteer experience
Disclaimer: All views, thoughts, and writings expressed in this case study are my own, and does not reflect the views of Cerebral Palsy Alliance Singapore, or anyone else.
According to this Straits Times article, volunteerism in Singapore has been on the rise before the Covid-19 pandemic. It can trigger an almost immediate effect on his or her sense of trust, and therefore loyalty.
Online charity portal Giving.sg saw a 35 per cent growth in the number of registered users in the past year of 2019, of an increase of 60,000 to more than 220,000.
As more and more services are going online, the pandemic has transformed the digital space, which also includes how people perceive brands, which can affect the volunteers’ experience, and their interactions with them. More than ever before, there is more need for information, as more people are staying at home.
Due to this, I believe that there is an untapped potential and opportunity in this new space to provide a volunteering experience (that is not widely available in Singapore at the moment) — but more importantly — to try and solve the problems users currently have with the existing website and its services.
Overview of the Organisation
Cerebral Palsy Alliance Singapore (CPAS) is a charity empowering persons with cerebral palsy and/ or with multiple disabilities to realise their full potential and lead fulfilled, dignified lives. Their vision is to deliver fully integrated programmes and services at the highest standards with passion, integrity, care and excellence, and to create awareness of cerebral palsy, and advocating equal opportunities for all persons with the condition.
Problem Statement
Approaching via the Lean UX Approach
Working on a school assignment, I choose to work on Cerebral Palsy Alliance’s volunteer platform, via the Lean UX approach, and Jesse James Garett’s The Five Planes of User Experience.
Lean UX approach means starting out with assumptions and doubts until proven wrong, changing and adapting to the work in progress. Clarity and certainty are gained when these assumptions are proven right with actual users at the testing stage.
As for the five planes of The User Experience pictured above, I felt that we were approaching this problem-solving method in a more methodological and in-depth way.
Business Goals
Next, I did up the Business Model Canvas, based on the organisation’s website and other sources found online via a web search, together with some knowledge of the organisation.
The Business Model Canvas helps to outline the key elements of the business in a succinct and clear definition of the organisation’s present state, in various areas and also as a whole.
Business Assumptions
Assumption 1: I believe my users would like to gain a new skill via volunteering, which in turn can help them professionally.
Assumption 2: This need can be solved with pairing skill-based volunteering tasks with a skill that the user would like to gain.
Assumption 3: My initial users are The Student, The Working Professional, and The Retiree.
Assumption 4: The #1 value a user wants to get out of my service is: To network, To gain valuable skills, to empower themselves and the community.
Assumption 5: I will make money by fundraising, selling products and services made by clients, and donations-in-kind from corporate and individual donors.
Assumption 6: Online volunteering may cover the clients who are underserved.
User Assumptions
Assumption 1: Users want to/ or are keen to donate their time and skills during the pandemic to help the needy.
Assumption 3: The student and working professional volunteer may have technology know-how.
Assumption 4: Volunteers would prefer meaningful, and sustainable, long-term volunteer work.
Assumption 5: Online volunteering may attract those who may not volunteer in-person due to commitments and other reasons.
Assumption 6: Volunteers and clients may have short attention span online.
Assumption 7: Features such as being able to choose long-term or adhoc, skilled based or general work (e.g. delivery, ushering, etc.), preference to mix both online and in-person volunteering, preference to volunteer with friends and family, time preference.
After listing all the possible assumptions, the next step is to begin the process of forming them into hypotheses.
Product Objective
What do we want to get out of this product, i.e. a website redesign?
To my personal knowledge of having had worked with the organisation, CPAS has both corporate and individual volunteers and donors.
The current website facilitates donation via various payment methods. However, there was less focus on volunteering, specifically online-based volunteering. Another assumption that I have is that the website was created during pre-COVID-19 pandemic.
Having worked there before, I know that there is also need for ad-hoc in-person volunteers to assist in carrying the students of Cerebral Palsy Alliance School on a daily basis from wheelchair to the school transportation. Due to social distancing measures, I understand that this is not possible at the moment. However, there should be encouragement on volunteering online:
“Thank you for your interest in volunteering with CPAS. Please note that registrations are currently processed quarterly and we will respond to you only after we have successfully matched you to a volunteering opportunity.
*Due to COVID-19, all volunteer activities are suspended till further notice. Thank you.”
It would be in their best interest if word is spread about them through volunteerism at this time due to in recent times post-COVID-19, more operations are going online due to social distancing measures. According to a survey on the Online activities done by Singaporeans on a regular basis during the COVID-19 pandemic, published by Statista and Mileu Insights, 72% of respondents browsed websites and used social media.’
It is hoped that the organisation’s website, together with social media platforms will serve as advocacy and will enable and encourage more people to volunteer online as it may reach out to people who may not usually volunteer in-person due to personal or time commitments. On the other hand, volunteering online may also serve clients (persons of disabilities) who have been under-served previously.
User Needs & Proto Persona
What do our users want to get out of it?
Again based on assumptions of the present website, Proto-personas were created to develop solutions, products and services based upon the needs and goals of the users, I tried to empathise with the users, of which I then attempt validate later:
Validating Assumptions
To validate my proto-persona, I interviewed five people who in general does not volunteer in-person.
Some questions that were asked:
Have you volunteered to a charity before?
A: No, only donate.
B: Never.
C: No.
D: I’ve never thought of it.
E: No, but I wish!If No, Why Not?
A: Too busy. I have tried before, I have a full time job and I always can’t attend their trainings and orientation sessions which falls on weekdays.
B: I find it too intimidating as I am too shy.
C: I don’t want to be seen when they take group photos and post on social media and tag me.
D: Where got time and money!
E: I registered with them some time back… last year I think, but have not heard from them since!If you’re not at work, what do you normally do during your free time?
A: I catch up with my family and housework.
B: Learning languages on my own. Sometimes I play games.
C: I am also a freelance fitness coach!
D: I hardly have any free time. I run a renovation business.
E: I read non-fiction. I am also interested in current affairs and baking.What would make you more comfortable to volunteer?
A: How about online where I can choose my own timing? Like 11pm?
B: Someone I can go with to volunteer, like my brother.
C: I would prefer if I could do it anonymously online. Just like anonymous donations. Is it possible?
D: Sorry maybe this is a selfish reason, but I maybe if I can learn a new skill in return for my time, I would consider.
E: Could you tell me where I am lacking in?
Opportunities
- How Might We help Bashful Benjamin feel assured and confident that he is able to join in the volunteer activities with others like himself ?
- How Might We help facilitate (monitor, manage and share) various types of online volunteering opportunities with others like Benjamin?
- How Might We better tap on the sudden amount of pockets of free time that others may have, due to the crisis?
- How Might We improve the volunteering experience online, so that we can create a pool of regular volunteers for sustainability?
Product Feature Hypotheses Statement
This is where ideas about what features to include comes in, based on opportunities listed earlier, so as to further improve, or add-on features that can help achieve user or customer goals, which in turn will drive the business outcomes:
- “I believe that more people will come forward to volunteer if Benjamin is successfully able to contribute on a task he already knows how to do, via a skills assessment checklist.
- “I believe that CPAS can have more manpower in the form of volunteers if people like Benjamin are able to share ad-hoc or long term activities via social media, due to sudden amounts of free time due to the crisis.”
- “I believe that CPAS can have more skills-based volunteers such as Benjamin if they have a better response platform system, that allows to monitor, manage and share activities.”
- “I believe that CPAS can have more skills-based volunteers such as Benjamin if they are able to volunteer anonymously.”
- “I believe that CPAS can create a community of volunteers who can network, learn and even mentor with each other in times of crisis.”
- “I believe that CPAS can advocate the cerebral palsy disability and gain more skilled-based volunteers if Benjamin is able to bring his friend along to volunteer together.”
The features are then ranked accordingly to priority on the Effort/ Impact Scale, according to the user needs, abbreviated as MoSCoW. The green quadrant at the top left-hand corner is a ‘Must Have’, the yellow quadrant at the top right-hand corner is a ‘Should Have,’ the orange quadrant at the bottom left-hand corner is a ‘Could Have’ and the last red quardrant at the bottom right-hand corner is a ‘Won’t Have’.
User Stories
The features on the Effort/ Impact matrix was then translated into User Stories.
- Must Haves:
— As a user, I want to be able to choose my own timing due to my hectic schedule.
— As a user, I want to be able to bring a family or a friend along, so that I don’t feel intimidated when I go to some place new and I don’t know anyone there.
— As a user, I would like to fill up a skills assessment checklist or a questionnaire to find out what skills sets I have or I can gain via volunteering. - Should Haves
— As a user, I would like to have fast response by staff, so that I can plan my time, energy and resources better.
— As a user, I would like to be able to network with other volunteers and CPAS staff.
— As a user, I would like to learn a new skill while I do volunteer activities. - Could Haves
— As a user, I would like to be able to volunteer and contribute anonymously. - Would Haves
— As a user, I would like to be able to monitor, manage and share the events or other available activities so that my friends and family will join me in this cause.
Value Proposition Canvas
Next, I started working on the Value Proposition Canvas, to help the company develop a product that would meet the needs of its target audiences in the digital product development phase. Questions that arose were, ‘How do we create value proposition for the organisation?’ ‘Who are the organisation’s customers, and how can the organisation create value for them?’
Both of these models worked well with each other and created a sound reason for further development and implementation.
This is in essence, working backwards (only working with what we have), as it is better to start with the customer’s needs, than begin with the product and hoping for a market.
Content Inventory & Content Audit
Next up, a content inventory was done on the present website, to take stock of every web page content that is currently public, and each page will then be determined if they are to be kept, changed, or omitted.
Content Framing
Then, the Content Framing is done to determine the level of priority that goes into a page.
Information Architecture & Sitemap
With reference from the Content Inventory and the Content Audit, I then did a Card Sorting exercise to figure out the Sitemap, for the structure of the website in a logical manner.
In the sitemap below, I have renamed ‘Get Involved’ to ‘Volunteer or Donate’, and moved ‘Stories’, which was originally from the ‘News’ category, to ‘Volunteer or Donate’, so that these sections would not be buried in other categories.
Interaction Design
First Dimension: Words
No changes in the current tone of voice for most pages. Although the general tone of the website is corporate-like, it is simple to understand for the end user.
In the ‘Volunteer or Donate’ page, the tone to assume is more casual and friendlier as this page is likely to get more visits.
Second Dimension: Visual Representation
More photographs of corporate and individual volunteers to be added to entice the potential volunteers.[ Diagrams, illustrations, graphics, typography, media to clarify data and concepts]
Users can select events or activities in a e-commerce like website, in a grid format (instead of a list), and then add to cart and check out. If they are interested in an activity, one can click and it will bring them to another page with more information and what is required for the activity.
Third Dimension: Space
Users can do a virtual visit of the premises as if visiting the place in person. You can visit a classroom for example, if you are going to be a volunteer classroom assistant. Therefore, you can tap, pinch, zoom and look around move your phone to get a 360-degree view, almost like natural behaviour.
Fourth Dimension: Time
Website has to be fast loading in two seconds or less. Animations to be added at the Volunteer and Donate page as it is where the user should focus. Animations can also be added if a user spends some time on a certain page.
Under the Stories section, to make the list of posts continuous scrollable or sliding (somewhat like Instagram).
Fifth Dimension: Behaviour
The ‘Volunteer and Donate’ section should strike emotions to inspire potential donors and volunteers to contribute.
Outcomes & Lessons Learned
To conclude, through this case study, we learned about the organisation’s strengths and obtained development ideas for the website redesign via the Lean UX approach. Business assumptions and user assumptions were created, so that we can identify the features the users need. This in turn will help to create the wireframe mockups in the future. If there any assumptions along the way that were proven wrong, one can always course-correct and continue on. I find that Lean UX has more agility and is an effective methodology in the design process (as compared to the traditional Waterfall methodology where the process is much longer, and slower) as it is firstly user-centred, saves time in terms of research, ideation, making of the MVP, and last but not least, the testing of hypotheses. After testing is done, the product is right away deployed. In the waterfall model, you would still need to pass through another stage for review before the product can be deployed! Thus, I look forward to creating the wireframes in the next term!
Part 2 of the Case Study
In the previous term, our case study was based three of five Jesse James’ Five Planes model. They are namely, Strategy, Scope and Structure. This time, we work on the remaining planes of framework to completion, which is the Skeleton and the Surface plane, of which I will further elaborate later on, in this case study.
Creating User Flow for the solution
Starting with the information architecture from last term, I envisioned how the persona, Bashful Benjamin, would navigate through the website, and for him to register himself as a volunteer.
Also found the website to be cluttered with a lot of information that may overwhelm the average user that visits it. That may mean getting the user lost in the website, and therefore taking them more clicks to get to their goal. It is definitely easier for everyone if one page is serving one purpose only. The current website is bundling up (content frames?) many things in a single page.
Current Context Scenario:
One Saturday afternoon while resting at home after a long week from his hectic work-from-home, Bashful Benjamin was looking through his kitchen window. Where he usually could see a hustle and bustle of activities happening inside the Cerebral Palsy school compound especially on Fridays, now has gone silent. He wondered what the school across his home was doing during this period of ‘Circuit Breaker’ and ‘safe-distancing’. As Bashful Benjamin had been working from home, he temporarily no longer goes out for his photography assignments until further notice.
Though an introvert, he would very much like to make more friends, and would like to use his photography skills to contribute meaningfully. He was thinking of starting as a volunteer from the special school across his home, but have always felt quite intimidated. Thus, he would like to take this downtime of ‘Circuit Breaker’ period to see if he could start out in baby steps by being a volunteer online at CPAS.
Bashful Benjamin knows the name of the school as he lives just across it, have visited the school’s website before, but does not remember the website address, nor have he visited the school’s premises. The website was where he came to know about the volunteer program.
- Bashful Benjamin recalled of his aspirations and so he went to his favourite search engine and searched ‘volunteer at CPAS Singapore’ right there and then, using his mobile phone.
2. He clicked on the first search result, which then landed him on the ‘Volunteer’ page of Cerebral Palsy Alliance. The first thing he noticed was that the mobile website’s breadcrumb navigation was not aligned properly.
3. Next, the big header caught his eye. As he scrolled down further, he saw that the page was looking plain, and he did not mind that there were no pictures, as his goal was to find out more information, and to register himself as a volunteer if it was possible.
4. While almost reaching to the end of the page, he saw the ‘Sign up Here!’ CTA (Call to Action) button, and almost clicked on it as he saw a smaller paragraph of text relating to volunteer information.
5. Bashful Benjamin was dismayed when he saw the text saying that “Due to Covid-19, all volunteer activities are suspended till further notice. Thank you.”
6. He ended up not signing up to be a volunteer, but he scrolled up again to see which category of volunteering he would like to be a part of: ’Service-based’ or ‘Event-based’ volunteering.
7. He was feeling excited that there were a list of activities that he would be interested in, and was thinking of asking his best friend to join him in a sport activity (Event-based volunteering).
8. He scrolled down near to the bottom of the page and signed up to the Mailing list instead, while waiting for the rules and regulations for volunteering activities to be eased.
After identifying some hiccups in the previous context scenario, I rewrote the Ideal Context Scenario:
- Bashful Benjamin recalled of his aspirations and so he went to his favourite search engine and searched ‘volunteer at CPAS Singapore’ right there and then, using his mobile phone.
2. He clicked on the first search result, which then landed him on the ‘Volunteer’ page of Cerebral Palsy Alliance. The first thing he noticed was the ‘hero’ image in the header which further inspired him to find out more about the volunteering activity that he was keen to be a part of.
3. He then clicked on the ‘Learn More’ CTA button as he wanted to find out more about the volunteering activities, and was brought to another page where there were two categories (Online and In-Person) of volunteer activities listed.
4. Online Volunteer Opportunities appeared first, followed by In-Person Volunteer Activities as one scrolls down.
5. Under the header of ‘Online Volunteer Opportunities’, one could see the different categories of activities and indicate his or her interests, and a text box for the user to fill up if he/ she has another other skills that may be useful but are not mentioned.
6. Under the header of ‘In-Person Volunteer Opportunities’, there is a paragraph of text indicating that “Due to Covid-19, all in-person volunteer activities are suspended till further notice. Thank you.” and underneath the text, the list of different categories and activities were ‘greyed-out’.
7. He went to the ‘Online Volunteer Opportunities’ section (skipped the In-Person section entirely).
8. He clicked on the ‘Sign up Here!’ CTA button, and filled up his email address and login credentials using a Google account, to register himself as a volunteer.
9. He then entered more information at registration form. He also choose a list of interests, just as how he would pick a product in an e-commerce website. He may do this a few times, but ultimately, he will decide on the items, and put it in a ‘cart’, to click on Checkout.
He also indicated his availability, who he would like to volunteer with, on the ‘Sign up’ page, and clicked on ‘Submit’ to complete his registration.
10. He was brought to another page which says he has completed his registration.
On this page is also where he was informed to check his email inbox and spam folder, as he will be sent a notification indicating that his registration was successful, along with his details that he provided, and that a CPAS staff will be contacting him shortly.
11. He proceeded to check his inbox and made sure to receive the notification that was sent earlier.
On the email, there were also social media sharing icons indicating that I could share a message that I have just registered myself as a volunteer, so that it also encourages others to sign up as well.
This is the finished User Flow, after a few changes:
At first, I started out directly designing the wireframes, but then realised that it got too overwhelming thinking about too many things all at once. After starting to create the wireframes, I went back to sketching, then later on edited the wireframes again.
Coming up with the ideas was easy, but to think about how the idea can manifest in the user interface form was challenging, therefore sketching helps to flesh out the ideas in detail…
Wire Flow
Created a raw wire flow to briefly illustrate the User flow.
Design Systems
As I was creating the wireframes and the interface design, I had to create a small design system that could help me lessen the burden of mental overload. It helps to speed up process as I have a colour reference, and it helps if this project has multiple team members and / or if it is a long term project. Though it may not seem like much, one would have difficulty remembering the exact colour codes if one has to refer to it in the future.
Proposed Interface Design
While considering the redesign, I have also repurposed some of the images that were used previously in their current website.
What went well:
- The satisfaction to being able to meet user goals and business goals of the organisation, by prioritising the pages that can improve the volunteer sign-ups, which in turn contributes to the bigger goal.
- There were some further insights that was interesting, and could be tapped on for fine-tuning of the design of the website.
- Wearing many hats as I undertake this project, I take on the main roles of a UX researcher and also a UI designer.
- I have learnt that, the existing (or old) website is the best prototype to your new website.
Areas where can be improved:
- Perhaps if time were not an issue, I would set up Google Analytics to study the different pages of the website to identify which page that may have problems, so that the redesign is more fine-tuned.
- To expand on the above, a website redesign is a big undertaking.. thus different types of evidence and metrics can be gathered, and it can in turn help to improve a metric.
- Better survey questions for better and/ or deeper insights.
- Exploring having more personas, more user flows, exploring tone of voice, user interaction, etc. Adding animation could have contributed to better understanding of the interfaces.
References:
Online:
- https://www.straitstimes.com/singapore/more-singaporeans-engaged-in-volunteerism-in-2019
(accessed 1 February 2021) - Where you can volunteer during the COVID-19 crisis: The New Norm of Virtual Volunteering
https://blog.bantu.life/where-volunteer-during-covid-19-crisis-virtual-volunteering/ (accessed 29 November 2020) - How to Keep Volunteer Programmes Going by Going Online
https://blog.bantu.life/keep-volunteer-programmes-going-by-going-online/ (accessed 29 November 2020) - Online activities done by Singaporeans on a regular basis during COVID-19 pandemic as of May 22, 2020 https://www.statista.com/statistics/1119989/singapore-regular-online-activities-during-covid-19/ (accessed 29 November 2020)
- Internet Usage in Singapore as of mid-2020 https://www.statista.com/topics/5852/internet-usage-in-singapore/ (accessed 29 November 2020)
- Member Allocation: How to Manage Skills-Based Volunteerism https://blog.bantu.life/part-1-volunteer-allocation-how-to-manage-skills-based-volunteerism/ (accessed 29 November 2020)
- How To Keep you Volunteer Programmes Going, by Going Online
https://blog.bantu.life/keep-volunteer-programmes-going-by-going-online/ (accessed 29 November 2020) - Screening for cerebral palsy via app creates more opportunities for remote healthcare (accessed 6 Nov 2020)
https://www.createdigital.org.au/screening-cerebral-palsy-via-app-creates-more-opportunities-remote-healthcare/ - Motor Skill-Related Disabilities: Navigating and Designing Websites, by Sue Ann Rodriquez
https://theweco.com/motor-skill-related-disabilities-navigating-and-designing-websites/ (accessed 7 Nov 2020) - Volunteer Continuity Planning: A guide on volunteer management during a crisis and planning for effective recovery
https://file.go.gov.sg/vcpguide.pdf (accessed 20 November 2020) - The importance of good animation in UX
https://www.invisionapp.com/inside-design/importance-good-animation-ux/ (accessed 29 November 2020) - Complete Beginner’s Guide to Interaction Design, by UX Booth Editorial Team https://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/ (accessed 29 November 2020)
Books:
1. Lean UX: Designing Great Products with Agile Teams, by Jeff Gothelf with Josh Seiden (O’Reilly, 2016)
2. The Elements of User Experience: User-Centred Design for the Web and Beyond, Second Edition, by Jesse James Garrett (New Riders, 2011)
