Redesigning Anti-Slavery International
Improving the accessibility, sustainability, and user experience of Anti-Slavery International’s homepage.
Tools
Anti-Slavery International
Founded in 1839, Anti-Slavery International is a UK-based non-governmental organization committed to ending slavery. This is not at all apparent when you first visit the website, and can only be surmised if you dive into the NGO’s unwieldy site architecture.
The organization raises funds, spreads awareness, lobbies international and national legislative bodies, maintains watch-dog groups, and educates persons at risk of enslavement around the world.
Challenge
Goal
As a researcher and designer, my aim is to identify current accessibility, sustainability, and user experience issues in Anti-Slavery International’s website, and ideate, test, and implement possible solutions.
Anti-Slavery International’s current website does not do justice to the complexity and breadth of the organization’s onerous and life-saving work.
In addition, the accessibility and environmental sustainability of the organization’s website can be improved.
Accessibility
Focus
Problem
Solution
Tools
Navigating the website with a keyboard or assistive device is cumbersome. Issues arise, such as:
The search function cannot be accessed through tabbing.
A delayed modal cannot be closed since the close button cannot be selected through tabbing.
Accordion menus do not have focus indicators.
Ensure that all navigation features can be tabbed. Render focus interaction UI more prominent
Color
Problem
Solution
Tools
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and UI components.
A significant chunk of the website’s text is just below the WCAG 2.1 Level AA guidelines.
Ensure that all text & UI components comply with at least WCAG 2.1 Level AA color contrast requirements; after, attempt to achieve WCAG 2.1 Level AAA.
Site Architecture
Problem
Solution
Tools
The site architecture site map of Anti-Slavery International’s website is confusing. This is frustrating for all users to navigate, not merely users using assistive technologies. For example:
Several pages present similar information.
Many pages branch off the main page instead of a stringent subcategory/topic based organization.
Individual pages which display similar content can be consolidated into topic based pages to minimize fruitless page loads.
Sustainability
Emissions
Problem
Solution
Tools
0.151g of CO2
First visit
1.75 MB
Return visit
487.05 KB
Websites require electricity, most electricity production for the electrical grid emits CO2 emissions. Data-light websites require less electricity to load, so smaller websites use less CO2 to load.
Beacon gives the NGO’s site a Good rating, since it produces less than 1g of CO2 per visit. Web Carbon Calculator estimates Anti-Slavery International is greener than 58% of the web pages it has tested.
While Anti-Slavery International’s carbon usage is lower than most websites, we can further reduce its carbon emissions reducing the data required to load the website.
Emissions produced by
Anti-Slavery International (Beacon)
0.555g of CO2
Images
Problem
Solution
Tools
Loading images is energy intensive, even if they are compressed. Using next generation formats like WebP and AVIF reduces energy consumption.
Anti-Slavery International has a lot of images which are not very informative. In addition, according to Lighthouse, these images are not in next generation formats.
Minimize the number of images needed, convert those used to next generation formats, like WebP and AVIF, and compress them.
Solution
Problem
Using system fonts is less energy intensive than less popular or custom fonts, as system fonts are usually already installed on a user’s computer and as such do not need to be downloaded in order to display online text.
Fonts
Anti-Slavery International uses one system font, Arial, but predominantly it deploys custom fonts, such as Helvetica, Helvetica Neue, and Nunito Sans.
Switch to system fonts to reduce site weight and energy consumption.
Problem
Solution
Each page on a website requires energy to populate. Large websites require more electricity to load.
Anti-Slavery International’s website has 300+ pages. Many of these pages present similar information.
Individual pages which display similar content be consolidated into topic based pages to minimize fruitless page loads, saving electricity.
Site Architecture
Tools
Business Requirements
Better Publicize NGO’s Activities
Anti-Slavery International’s work is both broad and deep; the NGO operates Campaigning, fundraising, policymaking, researching, network-building, and direct action activities across the world.
This is not at all apparent when you first visit the website, and can only be surmised if you dive into the NGO’s unwieldy site architecture. Succinct, crisp summations of Anti-Slavery International's categorizes of operations will inform the user of their core activities.
Redesign Objectives
Increase Accessibility
Ensure color contrast & font size conforms to WCAG 2.1 AA. Preferably even WCAG 2.1 AAA.
Consolidate frivolous pages.
Decrease Website Weight
Switch to system fonts.
Minimize number of images.
Publicize Anti-Slavery International’s Work
Explain what the NGO does.
Explain the impact of the NGO’s work.
Make Participation Clear & Easy
State how to volunteer and donate directly on homepage.
Solution
System Fonts
Trebuchet MS for body, Verdana for headings, and Arial for technical text provide a typographic and semiotic hierarchy while lightening the website.
Decluttering of Navigation Bar
Consolidation of many tabs into four subsections, each with dropdown menus and migration of minor pages to the footer refines the user experience.
Search function was unnecessary for the homepage - the NGO’s subpages can be searched for specified queries. I replaced the Search feature with a Donate button.
Expressive Images
Anti-Slavery International’s purpose and message lacked the emotional impact to communicate the urgency of its cause.
By adding illuminating, attention-grabbing images alongside meaningful data and information to the homepage, the breadth and importance of the NGO’s target cause is made immediately apparent to the user.
Utilizing light background colors only for emphasized sections decreases the data weight of the homepage.
Through minor color palette changes and intelligent use of visual hierarchy, I maintained Anti-Slavery International’s branding while ensuring text & UI components were compliant WCAG 2.1 Level AAA guidelines.
Before
ED1C24
1A1A1A
000000
FFFFFF
F7F7F7
E1E1E1
7F7F7F
818A91
After
ED1C24
1A1A1A
000000
FFFFFF
F7F7F7
E1E1E1
7F7F7F
NGO’s Impact
Pulling quantitative data from Anti-Slavery International's report, I highlighted their achievements.
Specific stories of individuals the NGO has help free from oppression and slavery personifies their impact.
Communicative Images
Small images used sparingly for emotional force
Color Selection
What
Categorizing Anti-Slavery International’s activities into four domains allows for overall sketch of the NGO’s work which users can quickly grasp.
Images not Icons
Where possible, I used icons for visual communication and aesthetic variety rather than data-heavy images
How
Placement of a Donation applet paired with common denominations encourages users to donate without the presence of an inaccessible and frustrating modal.
Examples of various kinds of participation with CTAs to encourage users to learn more