The International Federation of Red Cross and Red Crescent Societies (IFRC) is the world’s largest humanitarian network which serves as the secretariat for 192 national societies around the world. The organization was in need of a new website which could effectively showcase its work around the world and reach donors, national societies and the general public.

The project

  • Collaborated with IFRC Designer Val Shapiro on the UX/UI design and focused on an accessible, clean and simple style which reflects the IFRC's new brand image
  • Built the Drupal theme using Patternlab and the atomic design methodology. This allowed us to create a living style guide and take a component-based approach to development.
  • Built templates which pull in data from IFRC APIs to display the most up to date figures related to an emergency.
  • Developed a page builder for site editors, which allows them to add components from a predefined list of templates. This gives the editor flexibility in creating page content, but ensures that everything is in line with the site brand and the content is displayed properly within the templates.
screenshot of an emergency page on ifrc.org
screenshot of an emergency page on ifrc.org
screenshot of an article page on ifrc.org
screenshot of an article page on ifrc.org
screenshot of a basic page on ifrc.org
screenshot of a basic page on ifrc.org

The process

Research

  • Conducted user surveys to assess usability (information architecture, pain points, design, navigation).
  • Identified main user groups: donors, National Societies, volunteers, IFRC staff, and the general public.
  • Consulted with business units on their content needs, updates, highlights, and pain points for the website.

Plan

  • Created user personas for the main user groups.
  • Developed user story cards for all features based on research.
  • Reworked information architecture based on user needs and feedback from business units.

Design

  • Created wireframes for key content types and components based on information architecture and user stories.
  • Designed mockups using Adobe XD and later Figma, applying atomic design methodology.
  • Used design components as building blocks for the UI, establishing the brand and design system.

Develop

  • Built the site using Agile methodology and user story cards in a series of sprints, with reviews at the end of each sprint.
  • Adapted and changed the approach based on new issues and stakeholder feedback, ensuring the final product met user needs and had stakeholder buy-in.

Reevaluate and Iterate

  • Post-launch, conducted user surveys and analyzed web analytics to measure success.
  • Adapted and added new features based on feedback and analytics, continuing to reevaluate and improve the site as user needs evolved.