The 

Salvation Army 

— Website Redesign

The Salvation Army relies on its various donating and volunteering channels to serve its diverse network of social services. We restructured the website to make these opportunities more accessible.

Methodologies

User Interviews, Affinity Mapping, Content Audit, Comparative Analysis, Card Sorting, Tree Testing, Information Architecture, Usability Testing, Wireframing, Prototyping, Responsive Design

View Prototype
Role

User Research, Analyst, Strategist, UI designer

Tools

Figma, Optimal Workshop

Duration

2 weeks

Team

Marco Salazar
Tim Chen

Discover 

— Donating and volunteering

Goal

Understand how users navigate information on donating and volunteering with The Salvation Army.

For this two-week project, we focused primarily on these two aspects of the organisation's operations, engaging with users who have donated or volunteered in the past year in our research and testings. Our research questions were as follow:

  • What are the ways people use the Salvation Army website?
  • How can people find ways to donate to the SA?
  • How can people volunteer with the SA?
Pages of the existing website from left to right: Home, Donate, Volunteer.

Process

We carried out the project in three stages, consistently applying the same four tasks across all tests to track improvements in the usability of the home, donate, and volunteer pages.

Donate

Task 1    Make a donation online.
Task 2    Make a donation through a cheque.
Task 3    Find out how to donate furniture.

Volunteer

Task 4    Find a volunteer opportunity to help youths in their schoolwork.

Stage One

  • Content Audit
  • Open Card Sort
  • Comparative Analysis
  • Usability Test 1

Stage Two

  • Information Architecture
  • Tree Test
  • Prototype 1
    (Mid-fidelity)
  • Usability Test 2

Stage Three

  • Revise Information Architecture
  • Prototype 2
    (Hi-fidelity)
  • Usability Test 3

Define 

— Stage One

Problems

Content Audit

There were many donating and volunteering options.

We quickly realised it was not as simple as it seems to donate and volunteer as there were many ways to do so. The website also had dense information about the organisation and the vast services it provides. The content noticeably required more careful organisation and more obvious labelling.

Open Card Sort

There were too many tabs in the navigation.

We had 15 participants sort the content from the audit, reducing the original ten menu items to five broad groupings.

Before: Home, Donate, Volunteer, About Us, Our Centres, Our Faith, Contact Us, Events, Careers, Media Room

After: About, Donate, Volunteer, News, FAQ, Contact

Comparative Analysis

In comparison, the SA website was visibly less organised.
Feature

The SA website has similar features as its counterparts, but users cannot find them or face difficulties in using them.

Usability

Information on the SA website was strings of running text, whereas other sites used images to support and cards to organise. The lack of organisation and visual cue it less user-friendly.

Layout

Websites of other organisations have fewer main navigation menus compared with SA. Their layouts are cleaner and utilise hero images and icons with a clear call to action. 

mouse

Usability Testing

The lack of organisation impacted the usability of the site.

We carried out interviews and usability tests with seven participants to get critical feedback on donating and finding volunteering opportunities. Using affinity mapping to consolidate feedbacks, here were our key findings:

Donors: They want to donate money and goods easily. However, they struggle through the menu and inconsistent layouts to locate the information.

Volunteers: They want to understand the volunteering opportunities available. However, they find that the information was poorly presented.

Both required clearer pathways to complete the tasks.
  • It was unwelcoming because of the disorganised layout and text-heavy content.
  • Navigation was confusing because there are ambiguous pathways and labelling.
  • The site lacked visuals to guide users.
Task success and Single Ease Question (SEQ) scores for first usability test.

Solution

We believe that by simplifying the navigation and providing distinct categories and organisation, we will help samaritans donate and volunteer with ease.

Information architecture

Applying insights from card sorting and usability testing, we can build a more intuitive IA that is simpler to navigate.

Interface design

We can learn from other website and use UI design to outline donating and volunteering options more clearly.

Develop 

— Stage Two & Three

Simplifying and organising through IA and UI.

From our solution statement, we made two iterations and conducted usability tests accordingly. This section will address the improvements made on the Information Architecture (IA) and User Interface (UI) Design of the website.

Information Architecture

Existing navigation

Home, Donate, Volunteer, About Us, Our Centres, Our Faith, Contact Us, Events, Careers, Media Room

There were too many items on the top-level navigation.


Card Sort Groupings

About, Donate, Volunteer, News, FAQ, Contact

The groupings left out the social centres SA serves, which is a vital part of their operations.


Prototype 1

What we do, Ways to give, Volunteer, About us, Donate button

We decided to place the social centres on the top-level as "What we do" and added a universal donation button, renaming the donation page as "Ways to give" to differentiate from it. Unfortunately, through tree testing and usability testing, users feedbacked that the labels were obscure and confusing.


Prototype 2

Our Services, Donate, Volunteer, About Us

We removed the universal donate button and used plainer terms for the labels.
This improved task success across all tasks in the during the usability test.

User Interface Design

Implementing visual hierarchy to organise and guide.

With the information architecture sorted, we next dwelled into visually organising the website to promptly guide users from the home page to the respective pages they seek. This section summarises the iterations made for the main home, donate and volunteer pages. There were also subpages designed as part of the user experience, which can be viewed in the prototype.

View Prototype

Home

Using imagery to communicate

The home page was text-heavy and lacked visual hierarchy. We used images to lead the story in the redesign, shifting text away from the home page so as not to overwhelm users from the get-go.

Revealing more information on hover

Users can hover over the image thumbnails to read a short write-up and click to find out more.

Donate

Directing users to the donate page

It was previously possible to go directly to the donation form from the home page. In the new IA, users have to go through this page to donate. This route was less direct but made users curious about the various donation methods and the impact of their donations.

Overview of donation impact

The home page of the existing site had a chart of how donations are used. We noticed participants looking for this information during usability testing and hence we decided to place it on the donate page with eye-catching icons.

Emphasis on immediate donation methods

There were many options to donate with the SA, listed with no apparent order. Through the content audit, we noticed that some links lead to immediate actions while others required to read through before donating. We gave priority to immediate actions by designing them as image cards and allocating the rest as tabs underneath.

Volunteer

Categorising opportunities

We categorised the opportunities into three: event-based, skills-based, and service-based.

  • Clear segregation which allow users to differentiate various programs available.
  • Headers describing of the three categories.
  • Cards help users to identify respective programs easily. 

Evaluate 

Results

In summary, we were able to improve the usability of the home, donation and volunteer pages of The Salvation Army website. Task success increased with each usability test. SEQ scores for prototype 2 fared better than the original site as well. The dip in SEQ scores between prototype 1 and 2 may be due to the difference in the fidelity as participants were more particular about the content in the second prototype.

Task success and Single Ease Question (SEQ) scores for Control (C), Prototype 1 (1) and Prototype 2 (2).

Reflection

Research on the motivations and the information donors and volunteers seek.

As mentioned above, participants were more particular about the information they read on the website. People who visit similar websites would look for information on the causes, impacts and the background of the organisation before donating or volunteering. On hindsight, it would be helpful to understand their motivations and the information they seek. The insights from which could have set us on an alternative route to redesign the website more intuitively.