The product:
Responsive website for the International Federation of Red Cross and Red Crescent Societies (IFRC) - ifrc.org
Project duration:
2020-2021
My role:
Visual Designer
Responsibilities:
Visual design, branding
The problem:
The International Federation of Red Cross and Red Crescent Societies (IFRC) is the world’s largest humanitarian network. It supports local Red Cross and Red Crescent action in more than 192 countries, bringing together almost 15 million volunteers for the good of humanity. The old IFRC website was outdated both in terms of visual and technical sides, it was difficult to manage, it had very poor UX, thousands of unmoderated pages, was not accessible or inclusive. This reduced IFRC's visibility and global profile and made it more difficult to attract donors and supporters.
The goal:
The IFRC needs a new modern multilingual responsive website that would align with the new IFRC branding and reflect the organisation's mission and values. The website should be user-centered, accessible and inclusive.
Understanding the user
User research: summary
Our team conducted surveys to understand our target users and their needs. Primary user groups identified before the research were donors, partners, journalists and National Societies. After the survey, we found out that there is one more major target group - volunteers.
Donors want to know where they can support Red Cross and Red Crescent work, and how their money is being spent.
Partners want to know how to work with IFRC, and to see the successes achieved by the collaboration of brands.
National Societies want to see themselves on the IFRC website and be reassured that their achievements and hard work are visible and recognised.
Volunteers want to feel enthused about being part of the network, identify training opportunities, and learn about the work of their peers.
Journalists need to find contact details of spokespeople and information about emergencies and the latest press releases and get access to photos and videos.
User research: pain points
Bad accessibility
The website doesn't comply with web accessibility standards, isn't optimised for assistive technology, has limited multilingual support (only English I more or less up to date and the other languages include only a very limited number of translated pages).
Bad search experience
It's very hard to find information on the website. The search basically doesn't work making it impossible to find any information. On top of that thousands of unmoderated pages polute the search results.
Bad menu and navigation
The menu looks very chaotic: it lacks structure and hierarchy. The Dropdown menu disappears if a user isn't precise and accidentally moves by a pixel outside of the menu. It's definitely not optimised for people with limited mobility.
Bad donation experience
It's almost impossible to make a donation. The website asks users several times if they are sure they want to make a donation discouraging users from proceeding.
Bad design
The very outdated design gives a sad, uninspiring impression. A user doesn't want to explore the website because of its unwelcoming look.
Digital wireframes
The design
Mockups
Accessibility considerations
The forms were designed according to the Web Accessibility Standards
The colours and contrast are compliant with Accessibility Standards
Fonts are chosen based on readability
Footer with menus: for specific audiences
Specially designed inclusive icons
The website is designed to support assistive technologies
The website has multilingual support
Responsive Design
Going forward
Impact:
IFRC.org aims to serve its communities, network and donors. It provides clear, concise and engaging information in a way that is accessible and inclusive. Its dynamism, functionality, strong visual identity and high-quality editorial content represent a fresh start for IFRC’s web presence which is a crucial part of IFRC identity to the outside world.
What I learned:
Lack of diversity, inclusion and representation can be seen everywhere: web, print, iconography, illustration and photography. Unfortunately, even humanitarian organizations are not always mindful of their visual communication. This website and the new IFRC identity are only the first steps on the way to creating an inclusive and diverse brand that addresses harmful stereotypes and toxic hierarchies.
Next steps
The IFRC is undergoing the Accessibility Audit performed by the ilunion.com team to determine if all accessibility standards are met and what can be improved. Some of the accessibility considerations include:
The visual characteristics of the website (font, font colour, background, etc.) are defined using a stylesheet so that users can adjust the text to their preferences.
The font sizes have been defined in relative units so that the font size can be increased or decreased using browser options.
Visiting the website using a browser that does not support stylesheets is no problem, as all of the content can be accessed with CSS deactivated.
The pages have a clear structure so that they are accessible to users who can see all of the content, users who use screen readers, users who deactivate stylesheets, etc. To achieve this objective, all the section headings, lists and other elements that help in general understanding of the website have been defined in the HTML code.
The site’s HTML and CSS code uses formal grammar to ensure that the content can be viewed correctly in different browsers.
After the evaluation, we will make the next iterations to improve the user experience and accessibility of the website.
Comments