Problems solved: Designed and developed a new website to better represent the organization and its work, built a design system and component-based Drupal theme to give editors flexibility in creating their content while sticking to a structured and consistent library of patterns.

My role: UX/UI design, design system, front end development, Drupal development, training site editors/maintaining editor's guide, supporting editors on how to best display content

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 design system

The problem

The content on IFRC.org called for a high level of flexibility in the structure of page templates, and editors needed to be able to build their pages with many types of components including dynamic content pulled from other areas of the site, images, videos, calls to action, and text. The data also needed to be clearly structured, and the brand guidelines, user experience and accessibility standards had to be adhered to.

The solution

Using Pattern lab, I built a design system made up of flexible and self contained components that can be used and reused across the site to build content. This informed the structure of the custom Drupal theme, which was built based on components with the atomic design methodology. This allowed us to not only ensure that the user interface had a consistent design, but sped up development and reduced repetitive code in the theme.

Using the Paragraphs module, I created a page builder in Drupal which resulted in a smooth user experience for editors, while ensuring that all data is structured and displayed consistently. Giving editors the freedom to choose to build their pages from a solid set of components made the content on the site engaging for users, while maintaining a level of consistency in design, UX and accessibility. The modular nature of the page builder also leaves space for adding new components as the needs of the website and content evolve.

A screenshot showing icon blocks component in the IFRC.org style guide.
A screenshot showing the text block component in the IFRC.org style guide.