Digital Experience Transformation For The Office of the United Nations High Commissioner for Human Rights With Drupal
Nominee
Case summary
Transforming digital experience, content publishing, and accessibility for OHCHR.org has been one of the prime engagements for Axelerant. OHCHR.org is the official website of the Office of the High Commissioner for Human Rights. Together with our trusted agency partners, Blue State and Dovecot Studios, we migrated three rudimentary SharePoint websites to one solid Drupal 9 website. With a reinvented information architecture, taxonomy, navigation, and content management system, OHCHR was able to offer a consistent brand and navigation experience.
Case description
The official website of the Office of the High Commissioner for Human Rights is the world’s most trusted source of information and documentation on human rights. Prior to the platform relaunch, this information on human rights was being published across three different websites:1. OHCHR.org
2. Human Rights Council Website
3. Stand Up 4 Human Rights (Campaign Website)
To create a more consistent brand and navigation experience, digital leaders at OHCHR determined it was time to consolidate the platform.
Also, OHCHR.org was hosted on SharePoint, which called for a decentralized CMS with defined user roles. The UI and taxonomy also needed an overhaul in order to improve usability for browsers and mobile and accessibility for the visually impaired.
The solution was a reimagined Drupal 9 website with an impactful UX design and an information architecture that transforms the entire site experience, its security, and content integrity.
Case goals and results
The Goal:Given the high volume of traffic that OHCHR’s website receives, we needed to achieve three objectives:
1. A secure user-focused website
2. An indicative and engaging platform
3. A site with smooth navigation
The Solution:
So, here’s how we proceeded to achieve our objectives:
1. Design and implementation of a multilingual taxonomy that enabled better discoverability and site engagement
2. Create a component-based design system that integrated the platform with the UN Human Rights documents database and hosted it at the United Nations International Computing Center (ICC)
3. Migrate the website to Drupal 9 for a complete user experience
In short, we needed to create a better CMS and a reimagined UX and information architecture. So, with our trusted partner agencies and OHCHR, we began a Drupal transformation journey that would last 21 months.
- Blue State reimagined the user experience design.
- Dovecot reinvented the taxonomy.
The idea was to meticulously plan the redesign, development, and migration of the website to Drupal 9. Based on Blue State’s and Dovecot’s groundwork in UX design and information architecture, our team of Business Analysts, Technical Architects, and Drupal & Frontend Developers carried out thorough technical discovery for 6 weeks.
The Result:
The end result is a completely transformed OHCHR.org website and an incredibly flexible, ownable design system that presents an organization at the forefront of promoting and protecting human rights. The new Drupal 9 website is user-focused, secure, and multilingual—one with great user experience and intuitive content navigation.
- A Secure User-Focused Website
Once migrated from SharePoint to Drupal 9, the website became a secure platform that offered ease of use to both the sets of users—content publishers and readers. User roles, content management, and the look of the site became simple yet effective.
- An Indicative & Engaging Platform
When it comes to such a high global authority as the OHCHR, it was imperative that their digital assets come with a great experience. The new website with improved UI, UX, and subsites, makes sure that OHCHR is represented well.
- A Site with Smooth Navigation
An easy-to-navigate information architecture makes the new OHCHR website a great experience. The tiered site map and logical taxonomy ensured that the content is easily discoverable no matter what the user needs to look up.
Challenges
There were two core challenges that needed to be resolved:1. Poor Navigation & Visual Hierarchy
The poor navigation and visual hierarchy of the website and landing pages made content navigation a challenge for contributors and end-users. The content was tagged with an ever-expanding hierarchy with no streamlined process.
2. Centralized Publishing
The system lacked decentralized publishing capabilities. Content publishing and management in six official UN languages—English, French, Spanish, Arabic, Russian, and Chinese—were challenging due to a lack of templates and content components. A large number of volunteers were using the same account to publish. This made content management complicated.
Community contributions
Choosing Drupal as our choice of CMS to achieve OHCHR’s objectives gave us numerous advantages. And support from Dovecot Studios with Taxonomy made our work with Drupal even more robust in terms of seamless content navigation.We shared this work with the Drupal community during DrupalCon Europe 2021. We were also supported in this endeavor by Lee Crawford, Sr. UX Designer, Blue State, and Michele Ann Jenkins, Taxonomy Consultant, Dovecot Studios.
Our focus was content findability in the context of OHCHR, a platform that is a storehouse of content used globally by change-makers. The platform received global traffic amounting to millions of sessions annually. But the since the information architecture was not what a content-heavy website needs, the engagement was nowhere near ideal. It was like looking for a needle in a haystack. As we stepped on to move the website from SharePoint to Drupal 9, we had to “optimize the haystack.”
Our presentation describes in detail how we used UX Design, Taxonomy, and Drupal 9 to deliver the best experience for OHCHR.org.
Here is the link to our session at DrupalCon Europe 2021
https://www.youtube.com/watch?v=5A4Zom9jifE&list=RDCMUCAJALvsCWz8Kh6wOySHUJAA&start_radio=1&rv=5A4Zom9jifE&t=156
While working on the OHCHR project, our engineers were able to submit patches to both Drupal Core and a few prominent Modules:
1. Getting "ajax.$form.ajaxSubmit is not a function" Error for Views Reference Fields
https://www.drupal.org/project/viewsreference/issues/3334071
2. Fixed the 'Filter by block name' filter in the layout_builder component of the Drupal core
https://www.drupal.org/project/drupal/issues/3308658
3. Ajax support/Use behaviors in the reCAPTCHA module
https://www.drupal.org/project/recaptcha/issues/2493183
4. Submitted patches for “Media System” component of the Drupal Core
https://www.drupal.org/project/drupal/issues/3175146
5. Contributed to the bug where Media library widget counter does not reset when removing and re-adding media in the Drupal Core
https://www.drupal.org/project/drupal/issues/3167799
Hosting
We hosted the new Drupal-based OHCHR.org website on the United Nations International Computing Center (ICC).
Why should this case win the splash awards?
Creating a highly accessible digital experience with Drupal for the OHCHR with Blue State has been one of our most impactful contributions to the greater good.The OHCHR is a trusted source of information on human rights for a large user base, including academics, law professionals, NGO and NHRI professionals, politicians, government officers, journalists, and the like. It provides assistance, such as technical expertise and capacity development in the areas of administration of justice, legislative reform, and electoral processes, to help implement international human rights standards on the ground.
Prior to the platform relaunch, this information on human rights was being published across three different websites. The user interface and taxonomy of these websites made navigation, especially mobile navigation a rather tedious affair. Also, OHCHR.org was hosted on SharePoint and offered limited accessibility for the visually impaired. All this had been limiting the impact of the OHCHR as a public entity that works to uphold human rights the world over.
It was time to consolidate the three platforms, rearrange the information architecture and make it accessible to all. Blue State exercised its expertise in experience design and also onboarded Dovecot Studios for taxonomy. Based on this solid groundwork, Axelerant’s technical team engineered a Drupal 9 website transformation. Drupal enabled us to provide the best security features, faster performance, and a smooth editorial experience. By assisting OHCHR in revamping its website, our aim was to help the most trusted source of information on human rights become impactful and accessible to all. And we achieved it.
This allowed easy content creation by volunteers and an elevated end-user experience. The new Drupal website now has a clear navigation that features stories, press releases, statements, news, and important procedures and documents in well-designed, highly-accessible sections. A decentralized CMS was a new system for the OHCHR team. This required orientation and training. Right from admin manuals to training, we enabled team OHCHR to manage the entire content authoring process on their own in a decentralized manner.
Not only has it made access to information easy, it has also increased the action on all pages. This has in turn resulted in increased and better engagement with change-makers on matters of human rights implementation, reform, and promotion across the globe.