The Salvation Army, Singapore
Case study / Dec 2020
The Salvation Army, Singapore
Intro
In 2 weeks time, my 3 teammates and I set out to redesign the website of The Salvation Army, Singapore as part of our case study practice.
The Salvation Army is an international non-profit organization supporting Singapore and regional communities like:
- elderly
- youth and children
- families
- foreign workers
Design Process Overview
Through a mindful and structured design approach called “Double Diamond”, we are able to discover the problem deeply through a series of research. With the result, we will be able to define, design and develop on focused solution.
Discover Needs
Business Needs
We took a study of clients’ 2020 annual report and discovered that there was a 20% decrease in donation and the volunteer sign-up rate was not ideal as compared to other charity groups in Singapore.
Moreover, after a series of website analysis, we noticed that the current website has a lot of information in text that could be organized and visualized to be more user-friendly in the new design. We can also add in more vibrant UI and interaction design to make point of action more intuitive.
User Needs
We interviewed 18 users, of various background and experience with charitable contribution. Through the process, we learnt about their habits, preference and thoughts on their current social participation and some feedback on our organization.
From there, we’ve discovered the following key insights:
1. 14/18 of interviewees think it is important for them to resonate with the cause of the charity group / campaign
2. 12/18 of them would contribute / participate if the events’ timing and location is convenient to them
3. 12/18 of them will ONLY donate if the charity group is credible and transparent
4. 11/18 of them feels motivated and wanted to see the direct impact of their contribution
5. 11/18 of them will find and read more information before contribution
From Discovery to Definition
The Problem
After speaking to our interviewees and a series of user and business research, we’ve concluded that:
“Users (donors and volunteers) need a convenient way to learn about the organization and beneficiary needs in order to decide how they can contribute (donate and/or volunteer) in a more meaningful manner that is also convenient to their schedule, location and budget.”
The Solution
From there, we’ve defined the solution to satisfy needs of both our client and user:
We believe that by re-structuring the navigation, incorporating infographics and re-strategizing its content, it will help our users find relevant information to make a meaningful contribution that is also convenient to their schedule, location and budget.
The 3 Personas
Based on our research, we have created 3 personas with their own needs, frustrations and scenario to help guide us through our design process.
Ideation - From ideas to prototype
We put our heads together to come up with initial sketches. From there, we mix and mash on our ideas and come out with the final sketch.
This is how we turn the ideas we had in our brain to wireframe and eventually to our first prototype.
>
>
The New Look
After receiving positive feedback from our first usability test on our mid-fi prototype, we are confident with the flow of our design and decided to move on with our hi-fi prototype. With our hi-fi prototype, we’ve added in the content, incorporated infographics, restrategized our content and enhanced website typography and UI elements with the corporate branding in mind.
Below are a few highlights of what we’ve done:
Clear call to action
After a card sorting exercise with 18 users, it is conclusive that a lot of the contents and navigation can be simplified and regrouped into 3 categories.
We have highlighted the two points of action, Donation and Volunteer, in The Salvation Army red button at a prominent spot on our homepage.
Bringing causes to the front
As over 75% of our interviewees mentioned that they would more likely participate or contribute to the organization if they can resonate with the cause.
We have re-categorized the services and brought the causes / service beneficiary group to the front page. This will make it easier for our user to access to the volunteer or donation opportunities based on the cause.
Less words, more visual elements
During our research and usability tests, a lot of user mentioned they don’t want to read a lot normally when they are surfing the net. Users, especially those who falls in the age group of 20 - mid 30s, prefer graphics and images due to their social media habits.
In the new design, we have include more infographics, icons, and logos to make it easier for our users to understand how their contribution is going to impact the ones in need, whether their donation will be accepted and how to get tax rebate from their donation.
How does it work for our users?
The 3 Personas
We’ve created 3 hypothetical personas based on our user research, let’s take a look at their new experience.
VOLUNTEER GLENDA
Scenario
Glenda is a student in education and have a heart for children and youth. She wants to sign up for a long-term volunteer work on her weekends to help youth with their homework in the academic year of 2021. She want to find the most suitable volunteer opportunity and sign up on the website.
User Flow
Prototype
DONOR DHEER
Scenario
Dheer is a 50 years-old entrepreneur who saw a featured campaign “Caring for the Poor Elderly” and wanted to make a monthly contribution to this campaign on the website. He wants to know where his donation is going to and whether this donation is eligible for tax deduction.
User Flow
Prototype
DONOR CALEB
Scenario
Caleb is a father of 2 children and wanted to donate his kids’ clothes and toys as they have grown out of it very quickly. He wanted to find out whether The Salvation Army will accept these donation-in-kind and where is the closest drop off point to his home.
User Flow
Prototype
Now let’s put it to test
We’ve invited 5 users to try out our prototype and completed the above tasks for Glenda, Dheer and Caleb.
During the test, we observed their interaction, recorded error rates and interviewed them a few questions about their behavior and hesitation to gain more insights.
Test Results
After the interview, the testers have to complete a survey on system usability. It seems that we did fairly well and our users gave us an A. This result implies that users find our prototype effective, efficient and easy to use.
Key insights and recommendations
As some users relate “Donate” with just money but not cash, we’ll create drop down menu under donate button when they hover above it.
Add map on volunteer detail page
Add donation summary on payment page
Next Step
Up till now, we’ve completed 2 rounds of prototype iteration and usability tests, what’s next for this project?
Reiterate the prototype (V3) based on user feedback in our last prototype
Test prototype V3
Launch re-designed website
Develop prototype and test on tablet and mobile solutions
