Redesigning the Salvation Army website — a UX case study

Project 4 involves redesigning a non-profit organization that operates independently of any government (NGO) and our team was assigned the Salvation Army and it has to be responsive especially on target devices such as desktop, tablet, and mobile. We drew lots and I got paired up with Camilla & Lynn this time. YAY.

We started the design process with the double diamond research framework in mind — to discover, define, develop and to deliver.

Other research methods and deliverables include:
Heuristic Evaluation
Content Audit
Mission Model Canvas
User Interviews
Insights and Problem
Solution Statement
Usability Testing
Current Site Map
Card Sort
Tree Test
Customer Journey Map
Service Design Blueprint
Opportunity Statement
Content Strategy
Usability Testing Prototype

On-Site Visit

We visited Praisehaven Mega Family Thrift Store located at Hillview to explore, observe and hoping to get some user interviews at the end of the day.

From left: Camilia, myself & Lynn

We managed to score 6 interviews — so lucky! Here’s a summary:
1. Ronald, 52, semi-retired. He went to that branch because it is near his home. He bought a bunch of second-hand books but complained that they were more expensive now.
2. Mr. Tay, 70, retired. He didn't buy anything but love to look at furniture because he used to be a carpenter. When asked if he ever visited the website, he said he only speaks Mandarin and the site’s usually in English.
3. Jimmy, 54, retired. He looked for only rare finds/collectibles and examined them carefully.
4. Nicole, Caleb and Adam, 17. They were there to look at affordable vintage fashion buys.

All of them had something in common. They don’t visit the website at all.

We did another 2 interviews through email.
1. Jae, 40. He used to attend free tuition classes in the Salvation Army when he was much younger. In return, he helped out on the weekend running errands.
2. Lucien, 43 is a father. He doesn’t visit a branch in particular, but usually, donate clothes through the collection points at Marine Parade.

Again, they also don’t find a need to visit the website.

We compiled all the information and did affinity mapping to identify more issues. We went on to do a heuristic evaluation on the website and here are some of the results:

We thought by drafting a Mission Model Canvas would be appropriate for the Salvation Army as it helped to put things into perspective for us and to think about how to redesign the website.


Andy is our first persona. He is 18 and likes to shop for vintage clothes once a month. He wants to buy one of a kind clothing without spending too much money. Also, he likes to donate the clothes that he doesn’t wear anymore to make space for wardrobe. Some of his frustration include not being able to browse the fashion items. Also not sure when the new stock is coming as the information doesn’t exist online and it’s hard for him to make a decision.

We followed by creating his customer journey map to see his touch points and service design blueprint.

Amy is our second persona and she likes to mingle with fellow Christians and foster friendships. She aims to do great things to help the community. She is semi-retired as her staff manages her business now. She is also married with no children and thus has a lot of time to involve herself in altruistic endeavors. She wants to know more on the outcome of the fundraiser that she went to, who benefited from it, and information on the upcoming events that she can attend. Some of her frustration include not knowing volunteer opportunities, sending application but not getting replies, difficulty to fit volunteer time into the current schedule and needs more information to inform her decision process.

We also created her customer journey map to see her touch points and service design blueprint.

Problem Statement

Users need a way to access timely content because the current website is not purposeful and lacks information.

Our Solution Statement

By designing an accessible, responsive, and informative website for possible volunteers and donors of the Salvation Army, we will be able to provide sufficient details when they are on the go and that extends to a higher reach of people.

Content Strategy

To engage more volunteers and receive more donations, we will showcase inspiring stories and enriching fundraisers that provide users with a sense of fulfillment and involvement. Because we only have 10 days to complete this project — we need to be concise and prioritize what’s important. We divided the important points into critical, important, interesting but focused on the critical points. They include volunteer, donations & Red Shield (Thrift store).

Content Prioritization

Card Sort

The original Information Architecture (IA) of the SA is not big or complex, however, we didn’t want to predetermine categories and we are interested in finding out how participants label and sort the rest of the IA structure. 
There were 12 participants aged between 20–40 and we used 41 cards. The results from the card sorting categories result in “about us”, “the salvation army corps”, “support services”, “contribute”, “our centers & our faith”.

Tree Test

12 participants participated in 6 tasks that we’ve given them.
For finding corporate brochures & support services — there was lower directness. Thus we rearrange them again and reconfirm through a tree test.
On the average: we have 84 percent success rate which was good enough for us to carry on to the next step.

Information Architecture (Before)

Information Architecture (After)

Feature Prioritization (MoSCoW)

Next, we used MoSCoW method (Must-have, Should-have, Could-have, Won’t-have) to prioritize our features. We place all the possible features into features & effort metrics in order to gauge what’s our essential changes to make.

Wire-framing & prototyping

We drew out some wireframing & focused on the key critical content/features pages.

Mid-fidelity prototype

We jumped into Axure to create mid-fid prototype for our first round of usability testing.

We did 1 round for mid-fidelity with 5 participants, iterate and another round of high-fidelity with 4 participants, then iterate. The results from our redesigned website showed 65% faster navigation!

Pages in mandarin to promote readership and cater for Chinese educated users.
From left: original, first iteration and the second iteration
Iterations summary
Next Steps
Here’s a quick preview.

You can view the prototype here.

Note: I did this UX study as a student at General Assembly in Singapore (August to October 2018). I enjoy solving problems by seeing from the eyes of users with their needs, and designers with their limited resources. I believe that only through such empathy, can one be a good User Experience Designer.

Author: Penny Seow

Collect by: