Transformative Justice Collective

UX Design

The objective of this project is to redesign the website for Transformative Justice Collective (TJC), a collective committed to seeking the reform of Singapore’s criminal justice system.

This is a self-initiated project and is not associated with Transformative Justice Collective in any way.

My Role

UX Researcher, UX Designer

Responsibilities

Heuristic evaluation, competitor analysis, sitemapping, content structuring, wireframing, low fidelity prototypes, high fidelity mocks, usability study

Duration

Sep to Nov 2022

Tools

Figma

Project overview

Advocating for human rights of prisoners

The main purpose of the TJC website is to share information and deepen public understanding about the death penalty and drug control regime in Singapore, build a movement of people calling for the abolition of the death penalty and a public health approach to drugs in Singapore, and to advocate for the human rights of prisoners, especially those on death row.

Project goals

This is a personal project to redesign the website to improve its usability and make it easier for users to find information, and get involved in the cause. I wanted to focus mainly on improving the blog function, as this was essentially the biggest feature of the TJC website.

Heuristic evaluation

Existing website analysis

I conducted a study of TJC's existing website to evaluate the user experience and identify existing usability problems. This helped me to propose design recommendations. Here are some of the more severe usability issues I found.

Lack of emphasis on user goal conversion

At a first glance, the homepage provides no context of TJC’s movement or work.
There are no clear call to actions and a lack of emphasis on the user’s goal conversion. We should provide users with a reason to engage with the website, for example, to contact/donate/learn more, etc. A strong CTA can drive engagement, and improve donations or support to TJC’s work.

Recommendations

Homepage should feature an introductory section about TJC, including a CTA to learn more about TJC. We can also include a CTA on top navigation to Donate or Take Action. Users should be able to find this button within seconds of the page loading.

Inconspicuous search function

The search box is displayed at the very bottom of each page. Users may be frustrated if they cannot easily find the information that they need.

Recommendations

For content-heavy websites like TJC, it is a good practice to place the search box prominently at the top of the page, usually in the right hand corner. This is the first place that users expect to find search and gives users a shortcut to find what they need.

Poor blog organisation

When the user clicks into a blog category from the Get Informed dropdown, they are presented with the 9 latest posts with no way to filter these articles by the user’s preferences.
Blog cards are of varying sizes which makes the website look cluttered.

Recommendations

The user should be able to filter by topics, content types, recent posts, or most popular. This ensures the user gets the most relevant content possible to them. Next, blog cards should have a consistent, repeated structure. We can reduce the length of blog titles and excerpts.

Insights from competitors

I did a competitor analysis on the websites of three humanitarian organisations - Amnesty International, Human Rights Watch, and the United Nations - and identified some common goals in these websites.

Speak out for people at risk

The main goal of all 3 organisations was to tell powerful stories through blog posts to speak out for people at risk.

Advocate for governments to change their laws

This was done via petitions, forms (when submitted, sends an email directly to official representatives), and sharing to social media.

Source for donations

Most competitors rely on help from the public to support their movement.

Best practices

Clear call to actions on homepage

The main CTAs of competitor websites are immediately clear once the user lands on the page. These organisations also added a search function to the top navigation to allow their users to find relevant content easily.

Easy blog navigation

In Amnesty's website, under the “Latest” tab on the top navigation, the user is able to pick a category to read the latest blogs. This is categorised into News, Campaigns, Education, Research, and Impact. The user is further able to filter the posts by content type, resource type, and topics, and sort by date or title.

Similarly, HRW’s blog features a search bar, and filter options by year and topic. These enable the user to navigate to specific content with ease.

Pre-filled email forms

Besides seeking for donations, some competitors included pre-filled forms on their websites for users to send emails directly to official channels. This is a cool way to get people involved in the cause and feel like they are actively advocating for change.

Understanding the user

Persona creation

I conducted several user interviews to gain more insights into the main users’ goals, motivations. and frustrations. I used my findings from these interviews to create a user proto-persona, Jordan.

Jordan

"Execute justice, not people!"

Age: 24
Occupation: Full-time student at NTU
Tech Expertise: Medium to High

Expectations

To find out more about the death penalty in Singapore.
To read specific stories about prisoners on death row.
To learn more about how he can contribute to the movement.

Frustrations

Unable to find a specific campaign that he is interested in.
Wants to actively help the inmates on death row but not sure how to do it besides making a donation.

Problem statement

Jordan is a concerned student who needs a way to do more for the prisoners on death row because he feels that the death sentence is too severe and inhumane in some cases.

Information architecture

Building a sitemap

I kept the primary navigation on the homepage the same as the existing website’s sitemap because TJC’s goals are mainly to share information with its users and to get users involved in the movement. By keeping the navigation simple and giving users less options to choose from, we save users from decision fatigue and get them where they need to be quickly.

I removed Research & Campaigns from the blog subpages, as the rest of the items on the dropdown list were topics, not resource type. For example, if a user wanted to view a Death Penalty campaign, it may be confusing for them to have two options - Death Penalty / Campaigns. I wanted to maintain consistency in the dropdown options to make navigation easier for the users.

I also added a Take Action page. This was inspired by competitor websites which allow users to choose a campaign to support, then submit a pre-filled form as an email to official channels to call for change. As our persona actively wants to make a difference, he will be likely to use this feature.

Content structuring

In this stage, I organised, structured and labeled the content of each page. This made it easier for me to visualise how each section and content will be displayed on each page.

Starting the design

Lo-fi wireframes

I started working on the designs for TJC website. I focused on making it easy for users to find out more about the organisation, find content on a particular topic, and take action to support the cause. Here are some of the wireframes I created.

I added a Donate CTA to the top navigation to drive conversions.
I placed a featured blog article on the hero section to drive users’ attention to TJC’s latest blog post.

For the blog listing page, I created filters to make it easier for users to sort by topic, category, date, and most popular/latest articles.
I also included pagination so that users can have an expectation on the total number of blog posts and do not feel overwhelmed with too much data on one page.

On the blog page, I added social media sharing links at the top of the post. This can help to increase social engagement.
I also added Next/Previous article links and related posts to allow users to navigate easily to other posts. This helps to increase page views and reduce bounce rate.

I created a page for Campaigns, which was inspired by competitor websites.
This helps users who want to take action by going one step further, and send a pre-filled email to official channels to advocate for change.

User Testing

Lo-fidelity prototype

With the wireframes completed, I connected the screens to create a low-fidelity prototype to conduct an unmoderated usability study.

View the low fidelity prototype here.

Conducting a usability study

The goal of this usability study was to find out what specific difficulties users encounter when they try to complete the core tasks of the TJC website: learning more about the organisation, reading a blog article and making a donation.

All participants completed these tasks easily. The general feedback I received was that the website was simple, straightforward, and easy to navigate. However, by observing the participants’ click path, I decided to make the following minor changes.

1

Reorganised/added homepage elements

One participant was confused by the homepage. I observed that he clicked onto the TJC logo on the top navigation bar several times to go back to the homepage without realising he was already there. I believe that he thought he was on the blog listing page, as the hero section of the home was a featured blog post. Thus I added an intro section in the banner, and moved the featured blogs down instead.

I also added a counter section to give more urgency to the cause.

Before usability study

After usability study

2

Re-proposed About page layout

I noticed that most participants scrolled right through the What We Do section on the About us page. I believe that this could have been because the section looks too wordy. Thus I re-did the layout of this section to display cards instead of a text list.

Before usability study

After usability study

Final mockups

In this stage, I finally added visual elements like colour, typography and images to all my wireframes to create high fidelity mockups.

Reflection

Though the topic of this project is an ongoing controversial topic in Singapore, I remained neutral when conducting user interviews and usability studies, and guided users to focus on the usability of the website. I learnt a lot during the research part of this whole project, not just about the justice system in Singapore, but also how to design effective blogs, by making use of blog cards, filters, pagination and social sharing elements.