Redesigning TSA's website to reduce cognitive load and enhancing usability.
This was a 2 weeks team project at General Assembly. We were given a brief to redesign any existing website. We chose “The Salvation Army” because of our collective interest in charity and social work.-
Ruchika, Olivia, Lee Pei, Grace
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.
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.
Usability Test on Prototype
Final Prototype and Presentation
The Blank Canvas
We initiated the research process by working on the content audit and sifting through the website using Jakob Nielsen's 10 usability heuristics principles, listing out the following usability issues.
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. We then made changes to the IA and validated those results through a tree test and made further changes to create a more intuitive and efficient categorisation system.
Tool - Optimal Workshop
Proposed Design Solution
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.
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
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
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
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.