Overview
As part of our 'User Experience Design' course curriculum at General Assembly, we were given a team project to re-design an existing website. We chose to work on "The Salvation Army"  - a non profit organisation to create a better user experience for users and meet the business needs and goals.
Duration
2 weeks
Team
Ruchika, Olivia, Lee Pei, Grace
My Role
Taking up the role of a UX researcher, my team and I collaborated with conducting user research, competitive analysis, heuristic evaluation, managing the optimal workshop for card sorting, tree testing, creating a user persona, brain-storming low-fidelity wire-framing design solutions and producing content strategy.
Finding the Problem
Established in 1935, The Salvation Army is a non-profit organisation that relies mainly on two sources of income - Online donations and income from charitable activities (Data gathered from their 2019 annual report). 

After conducting our initial user research (content audit, usability test, heuristics) we found out that users were overwhelmed with the content of the website. The navigation menu had too many labels and users found it cumbersome to fulfil a task of making a monetary donation. 
Solution
We believed and validated that by re-designing the website in terms of simplifying the navigation menu, reducing cognitive load and making it easier for the users to make online donation, we can create a better user experience. 
Design Process
Discover, Define
Website Analysis
Heuristic Analysis
User Interviews
Usability Test
Affinity Mapping
Information Architecture
Develop, Deliver 
User Personas
Low-fi prototype
Content Strategy
High fi-prototype
Usability Test on Prototype 
Final Prototype and Presentation




It all begins with the Research
We initiated the research process by working on the content audit and sifting through the website using Jakob Nielsen's 10 usability heuristics principles. We listed out the following usability issues. 
User Interviews & Usability test

To understand the common behavioural patterns and concerns around making donations - in cash or in kind, we conducted a round of of face-to-face user interviews with five participants. We then asked our participants to complete three tasks in order to test the usability of "The Salvation Army" website. 

Task 1 - Make a monetary donation (Usability test to meet the business needs)

Users were confused between certain labels such as “Individual Givings” and “Donate Online”. Users even showed an objection to continue on making the donation as they wouldn't prefer to print and mail the donation form.
Task 2 - Schedule a collection to donate old items (Usability test to meet the business needs)

Users were unable to find the CTA button for scheduling a collection on the website as it wasn't prominent. Users also couldn't find information on what items are acceptable for donating. 

Task 3 - Find a drop off point to donate old items (Usability test to observe the communication of information)

Users could not find the drop off points because they did not expect it on a separate page. Users who found the page had to open Google Maps to find out which points were most convenient for them. 
Unveiling the opportunities
Through the results of our usability test we could identify the common problems and issues as our users faced a lot of issues completing the tasks assigned. These results also overlapped with our Heuristic Evaluation we conducted initially. 

Pain Point: Inconsistencies in content confused the users 
Users struggled in the navigation menu to find the relevant information, they were overwhelmed with the amount of content on the homepage. And they also found the labels in the navigation menu to be inconsistent and poorly placed.  ​​​​​​​  

Information Architecture
TSA - Existing Sitemap
TSA - Existing Sitemap
TSA - Recommended Sitemap
TSA - Recommended Sitemap
To streamline the content and categorisation after looking at our usability test results, we conducted an open card sort research method using optimal workshop. We wanted to better understand how users group existing categories on their own and then make changes to the IA. We then validated those results through a tree test and made further changes to create a more intuitive and efficient categorisation system. 
DESIGN SOLUTION
Homepage
Existing
Prototype
 By creating a personal yet formal brand language, placing the information that establishes trust, using emotive images and putting the call to action buttons right on the hero image, users could understand the vision of the charity. Users could also easily find the call to action without any struggle. 
Donation Page
Existing
Prototype
In our usability test on the existing website, users showed a high barrier to make a monetary donation as they would have to print, fill the form and send it back to TSA for submission. We proposed an online form with automated inputs that would reduce the decision fatigue and help users donate with ease. 
Arrange for collection Page
Existing
Prototype
From our user interviews we gathered that users are happy to donate their old items as they would want to help others instead of throwing  the stuff away. To find the centre to drop off items or arrange for collection on the existing website, users showed quite unsatisfactory responses in the usability test. We re-designed the page by creating a form to either schedule a collection or find the nearest centre in an easy manner. 
Centres and Donation in Kind 
Existing
Prototype
The Salvation Army has multiple centres and not all of them are drop off centres. When we asked users to find a drop off centre they clicked on the centres and said they would check the location on a google map and visit them accordingly. In order to solve this confusion, we restructured the IA of the website and put all their working centres under "About/Centres & Programmes" while creating a new feature to  find the nearest centre right on the website through google map integration under "Donate in kind".  
Lessons as a UX Designer/Researcher
In the world today, content is key but too much of anything can be bad. When designing a content dense website, it's important to organise information in a way a user can easily navigate. There is always a smart way to weave the information together and appease to the mental model of users. The principle of "Recognition rather than recall" with correct labels and emotive images and relevant icons can truly make a difference. 
Back to Top