Success Stories | Elevating IDMC’s User Experience

IDMC’s Platform Journey From The Old To The New

Established in 1998 under the Norwegian Refugee Council (NRC), the Internal Displacement Monitoring Centre (IDMC) has been a crucial source of data and insights on internal displacement. Despite its importance, the impact of IDMC was hindered by an outdated website characterized by poor design, complex navigation, and limited search functionality.

Partnering with Axelerant, IDMC embarked on a mission to modernize its website using advanced technologies and creative solutions. The objective was to create a smooth, user-focused experience that underlines their commitment to empathy and expertise in difficult situations.

About the Customer

The Internal Displacement Monitoring Centre (IDMC) is a global leader in providing internal displacement data, analysis, and expertise. The client estimates the number of people internally displaced or at risk of becoming displaced due to conflicts, violence, disasters, or development projects.

IDMC's data sheds light on the dire consequences of displacement, ranging from humanitarian crises to socio-economic instability.

IDMC is committed to influencing policy and improving the situation of internally displaced people (IDPs) worldwide. The organization offers a range of tools and services to prevent displacement and enhance the lives of IDPs.

They have worked with national governments, UN agencies, and expert centers to find effective and lasting solutions to internal displacement.

25+
Years Of Service
148
Countries In Scope
71.1M
Displacements Covered

The Challenge

Facing an outdated website with poor design, navigation difficulties, and sub-optimal search experiences, IDMC recognized the need for digital transformation. The client faced challenges like:

Outdated Design: The previous website's design was outdated, leading to frustration among users.
Navigation Difficulties: Disparate navigation structures hindered efficient information management, impacting user experience negatively.
Poor Search Experience: Users resorted to external search engines due to the poor functionality of the website's internal search feature, resulting in decreased engagement and satisfaction.
Legacy Code And Documentation: Legacy code and a lack of comprehensive documentation complicated ongoing maintenance efforts, increasing the time and resources required for upkeep.
Limited Responsiveness: The website's limited responsiveness across devices and screen sizes led to suboptimal user experiences, particularly on mobile devices, impacting accessibility and engagement.
Sub-Optimal Editorial Experience: Content editing proved challenging for editors and administrators, hampering content management workflows and efficiency.
Drupal 9 Monolithic System: The existing monolithic setup offered limited flexibility and scalability. It hindered the implementation of modern features essential for an enhanced digital experience. The migration process required meticulous planning, thorough testing, and seamless execution to ensure minimal disruption to ongoing operations.

The Solution

Collaborating closely with IDMC, we deployed a modern decoupled website using Drupal 10 and Gatsby. The goal was to elevate user experience, standardize website branding, enhance content search, implement multi-level administration, and improve performance, ensuring a seamless and resilient platform.

We helped IDMC achieve the following:

Updated Website Design: IDMC’s first step in addressing the challenge of an outdated design was to revamp the website's visual aesthetics and user interface with an external design partner.

Streamlined Navigation: To overcome navigation difficulties, we implemented a cohesive and intuitive navigation structure, ensuring easy access to information and improved user journey throughout the website.

Enhanced Search Functionality: Addressing the poor search experience, we implemented a robust and efficient search system, leveraging advanced search algorithms to deliver relevant results quickly and accurately.

Code Refactoring And Documentation: To tackle the issues related to legacy code and documentation, we conducted a comprehensive code refactoring process, optimizing codebase efficiency and enhancing readability. Additionally, we created detailed documentation to facilitate future maintenance and troubleshooting tasks.

Responsive Design Implementation: Recognizing the importance of responsiveness, we adopted a mobile-first approach to design and development, ensuring seamless user experiences across various devices and screen sizes.

Improved Content Management: To enhance the editorial experience, we implemented user-friendly content management tools within the Drupal framework, simplifying content creation, editing, and publishing processes for editors and administrators alike.

Drupal 9 To Drupal 10 Migration: The migration addressed the limitations of the monolithic system and unlocked other benefits like improved performance, enhanced security, and streamlined content management.

The Result

IDMC now has a highly performant and secure website, including intuitive navigation, a powerful search feature, and flexible templates for streamlined content creation and reuse.

Accessibility improved significantly, with a score increase from 70 to 90, boosting inclusivity by 28%
SEO performance soared, with a 49% increase, enhancing visibility
Website performance also saw a 38% improvement, ensuring better responsiveness

These outcomes highlight the pivotal role of the IDMC website as one of the primary revenue sources, ensuring heightened user satisfaction, increased accessibility, greater visibility, and optimized performance.

Strategizing Decoupled Drupal and Gatsby
Enhanced data visualization of data portals
Improved Performance And Security
Enhanced User Experience
Streamlined Content Management

Strategizing Decoupled Drupal and Gatsby

A decoupled architecture with Drupal 10 and Gatsby was selected. This was primarily driven by Drupal's flexible integrations and content creation features, alongside Gatsby's performance optimization, powerful UI creation, and security benefits.

Combining Drupal's content modeling with Gatsby's UI flexibility allowed IDMC to manage content and experiences effectively in the long term. Additionally, leveraging Netlify for hosting enhanced the deployment process, improving performance and scalability.

Strategizing With Decoupled Drupal And Gatsby

Enhanced data visualization of data portals

Seamless integration and decoupled architecture facilitated better database visualization of country pages and IDMC data portal. This provided stakeholders with comprehensive insights and actionable data.

This enhancement supported informed decision-making and advanced IDMC's mission of providing high-quality data and analysis on internal displacement.

Enhanced Data Visualization Of Country Pages And IDMC Data Portal

Improved Performance And Security

Adopting a decoupled architecture with Drupal and Gatsby led to a highly performant and secure website. By decoupling the frontend from the backend, potential vulnerabilities associated with server-side rendering were minimized, reducing the attack surface and enhancing overall security.

This structural enhancement improved performance and ensured the website's reliability, contributing to an elevated accessibility score and ensuring inclusivity for all users.

Enhanced User Experience

The project's focus on improving user experience resulted in implementing intuitive website structures and powerful search functionalities.

These enhancements facilitated better user navigation, reducing search time and enhancing overall satisfaction.

Streamlined Content Management

Integration of Drupal Paragraphs brought about significant improvements in content management. This streamlined approach empowered editors with enhanced flexibility and efficiency in creating and managing dynamic content, promoting consistency and agility across the website.

Elevating IDMC’s User Experience: Moving From Monolithic To Decoupled