Working with visionaries on the frontlines of social change worldwide
Ford Foundation
An Open Source Brand Evolution
Proprietary to Open Source CMS Migration
30,000 Record Grant Library
1 New Branded Flexible Website Framework
Known for its global grant-making influence, the Ford Foundation is passionate about the pursuit of human dignity worldwide. The website serves as a critical platform for communicating mission. It features collections of stories on change, hope, and resilience from around the world. It also provides detailed information about grants awarded by the foundation.
The public-facing website of the Ford Foundation was migrated from a Umbraco content management system into a WordPress Gutenberg powered website framework. In addition to migrating content, WDG interpreted and applied the organization’s revised brand guidelines — resulting in an accessible design refresh. WDG redeveloped site features and functionality while streamlining the publishing process.
The launch engages with aesthetics and practically provides editorial tools for teams to influence online engagement.
A ‘website first’ brand refresh roll-out.
WDG implemented a ‘website first’ brand refresh for the Ford Foundation, leveraging the complete control a website offers over a brand’s narrative. WDG’s designers applied the Ford Foundation’s brand guidelines to a fluid grid with accessible content, embodying brand attributes within the user interface design.
The team explored brand application in the context of popular user journeys to establish the rhythm and cadence of the block system for priority pages.
WDG also collaborated with The Ford Foundation Gallery of the Center for Social Justice to showcase their art, artists, and ethos within the new website framework. Slight variations on the primary brand application were supported through theme options that provided aligned distinction.
Confident typography and vibrant multimedia
The website FordFoundation.org was among the first to apply the brand’s refreshed guidelines. In collaboration with the Ford Foundation’s in-house design and creative team, WDG created a unique digital style guide for global menu systems, page headers, and flexible, media-rich block layouts.
WDG used a focused primary color palette and a vibrant set of secondary colors to create an accessible design system. People-focused art direction was incorporated into image-ready layouts, and brand details such as linework became hallmarks of the user interface.
Particular attention was given to the homepage and Gallery, with WDG designers coordinating directly with developers to ensure a fluid grid system with spacing and interaction in mind. The entire framework was designed to allow the tone of the Ford Foundation’s creative integrity in communicating their thematic areas to guide the end user through their journey.
Equity in web is accessible content
The Ford Foundation was deliberate in its migration to open source software, with the aim of benefiting others. WordPress, which accounts for 64% of websites with a CMS, was chosen as the platform for offering functionality via a free plugin to improve accessibility for more users.
To make video content accessible, the organization produces a second video with narration that describes important visuals within the video. A transcript of this more accessible video is then posted so that it can be read by those who cannot hear.
WDG developed a WordPress Gutenberg plugin called the Video Accessibility Block to package this functionality. The plugin allows for toggling between two videos (YouTube, Vimeo, or self-hosted), displays a scrollable text transcript, offers the transcript file for download, and includes an inline video accessibility policy. It also features a screen reader skip link, adds metadata from YouTube and Vimeo APIs, and has a settings page for global block settings. The video block defaults to button styles from the active WordPress theme.
Flexible Mobile Friendly Frameworks
Mobile responsive websites are crucial for organizations that prioritize usability and accessibility. These websites adjust their layout and design to fit different screen sizes, ensuring optimal viewing and interaction experience across a variety of devices, including smartphones, tablets, and desktop computers. This adaptability enhances user engagement and satisfaction.
30,000 Records Sync'd Daily
The Ford Foundation's Grants Library
The Ford Foundation is an independent, nonprofit grant-making organization. In a strategic move to enhance transparency and ease of access to grant information, WDG seamlessly integrated Ford Foundation’s robust grants database with WordPress. This was achieved through meticulous API development and integration, empowering the foundation’s online presence and enabling stakeholders and the general public to access, search, and filter grant details with unparalleled ease.
The grants database was built with the ability to import Ford Foundation-provided grants data and create a faceted search. WDG also provided the ability to auto-update the grants database and trigger an import into the grants database. This integration not only streamlined the user experience but also showcased WDG’s expertise in bridging complex database systems with user-friendly CMS platforms.
WDG helped with restructuring their data and pulling it from where it lived. The result is evident in the efficient and interactive Grants Database that stands as a testament to WDG’s commitment to innovation and excellence.
Working Together
Umbraco to WordPress Migration with Brand Refresh
The Ford Foundation aimed to migrate their content management system to an open-source ecosystem. WDG implemented a Gutenberg-powered flexible framework with full site editing capabilities, meeting the necessary business and functional requirements.
In collaboration with in-house expertise, WDG integrated the new brand guidelines into the site. We built an accessible video plugin block to be open-sourced. The plugin was introduced at Word Camp 2023 and will be released for community use. WDG’s innovative approach involved extending their custom WordPress Migration plugin to migrate Umbraco content, assets and metadata into pages of WordPress Gutenberg blocks.
As a grantmaking organization, the presentation and usability of the grant repository were major user experience opportunities and project highlights. A custom API was leveraged to digest the database of record, and an Elastic Search implementation provided filterable search results at scale. WDG’s custom charts plugin was installed for styled data visualization.
WDG embedded themselves with the Ford Foundation team as a trusted partner, enabling collaboration and problem-solving to deliver the new digital experience in a timely manner. Overall, WDG is excited to have been instrumental in migrating this platform onto WordPress.
