Launching a new Drupal-based website for a global education program

The teacher exchange programs are federally funded international initiatives administered by a global nonprofit organization. Through these exchange initiatives, educators worldwide enhance their teaching practices and bring global perspectives back to their schools and communities.

The organization we collaborated with is a global development and education nonprofit managing multiple international programs across education and civic engagement. Working with partners in over 100 countries, the organization focuses on four key areas: cultivating leaders, empowering youth, strengthening institutions, and enhancing access to quality education and information.

It had been over five years since the exchange program website had been updated. Multiple layers of information added over the years made the layout dense, and the paths to necessary information were overly complicated. The website, which was visited by educators all over the world, was hard to navigate and could even prevent potential applicants from diving into specifics.

The timing for the change felt right, and the internal program team initiated the site redesign. They approached Five Jars with their ideas, as our experience building websites for mission-driven organizations and our knowledge of the industry specifics made us an obvious fit for the project.

The discovery phase is the initial step in every project at Five Jars. We always aim to dig into the details and uncover any nuances that could impact technology, operations, or business outcomes. For the international teacher exchange website, it was essential to clarify the goals for redesign and possibly re-platforming, identify key user personas to address their needs, and create a detailed project timeline that aligns with the required deadlines.

At the beginning of our collaboration with the program leadership team, we established the main goals for the project that would address all the necessary issues. We kicked off a series of introductory calls to ensure we fully understood all the requirements and specifications. The strong collaboration between the client and Five Jars teams during this phase led to more efficient design and development work and outstanding outcomes for the project after its launch.

Since the website served multiple audiences with diverse needs, it was crucial to identify and prioritize the requirements that should be included in the project scope. Given the tight discovery timeline, we distributed structured questionnaires to two primary user groups: current participants and alumni.

Having recently gone through the search and application process, current participants provided feedback that validated assumptions from the UX audit. These insights shaped detailed user stories, guiding the website's design and addressing key pain points. For alumni, limited by the previous website’s poor functionality, it was essential to identify features that would better meet their needs.

After describing all the user stories and discussing the core functionality, we finalized the project timeline. The main steps included UX design, theme configuration, website development, content migration, pre-launch settings, and going live. To make the best use of our time and efforts, design and development ran in parallel during most of the project.

We also incorporated a thorough pre-launch checklist for the new website, as we do across all Five Jars projects. This practice ensures that we are fully prepared for the site launch, covering every important detail, no matter how big or small.

While the old website had all the necessary information, it was difficult to navigate, and many respondents to our survey pointed out this issue. Our design team began with a detailed analysis of the program’s brand and communication guidelines. Using the brand identity as our foundation, we created a more modern website design with an interactive user experience. We incorporated more engaging elements, introduced page animations, allowed the addition of embedded videos, and more.

Five Jars design team also revamped the information architecture. More important content was brought to the surface and was no longer buried in lengthy text blocks. We updated the main and side menus, modified the footer, and added breadcrumb navigation to help users easily track their location on the site. Additionally, we suggested new content blocks to showcase important information, such as an interactive History section on the About Us page that highlighted the program's longstanding legacy and impact.

Our team designed a dynamic Program Finder to help prospective applicants identify which exchange program best matched their experience, goals, interests, and availability. Before this solution, educators interested in participating had to navigate through numerous pages and a lot of content, often losing their way. The process was neither intuitive nor user-friendly, and survey respondents reported difficulty switching between program pages to compare information and find the right one.

The goal was to give users a clear view of current and future programs to keep them engaged long-term. Our solution was based on the static "How to Find the Right Program for You" page from the old website, which was a long article. We transformed it into a process flow that guided users through a logical set of criteria. A key challenge was ensuring eligibility requirements didn’t stop users from exploring other options, as their situations could change and they might meet the criteria later.

We also implemented user-friendly filtering options for programs with various projects, allowing visitors to find the information they need in seconds. 

The way program alumni could interact with the old website was rather limited. The program leadership emphasized that strengthening alumni connections would significantly increase the initiative’s long-term impact. One of the website’s rebuilding goals was to help alumni continue learning from one another and take advantage of available online resources. Our work in this aspect included: 

• Designing a separate page featuring new storytelling cards to spotlight alumni experiences
• Filtering option for the Alumni page
• Designing and building embedded forms to collect alumni impressions and program participation experiences
• Creating an interactive map that visualizes the impact of the programs in various regions around the world

We recommended that the organization transition to an open-source CMS, as it allowed building custom features and adapting the system to the organization’s needs. Our experience with Drupal across multiple industries made it a clear choice: a robust and secure technology that was also flexible and user-friendly. 

The additional features that we configured at the client team's request included:

• On-site search to help users find information using keywords across the website quickly
• Website alert banners to notify the audience about important events, news, application periods, and more
• Robust website analytics based on Google Analytics and AI-driven Microsoft Clarity to understand user behavior, keep track of the key metrics, and make data-based decisions

Our tech team fully prepared the website for the launch, taking care of all the important aspects – including hosting, security settings, SEO, performance, and more. At this step, our work was coordinated by the pre-launch checklist, which included all the important aspects to check before, during, and after the launch.

Building the new website on Drupal also allowed us to configure Layout Builder functionality, which immensely changed how site administrators could manage online content. With the library of pre-built components and instant access to the existing content, website management became user-friendly and efficient. 

Because of the proprietary CMS, editors could neither preview the content they published nor quickly compile new pages without the help of the engineering team. On the new website, they could now change how content was arranged on a page or across content types and create custom landing pages with an easy-to-use drag-and-drop interface. We also created several roles within the Admin panel to help easily manage access and permissions within the internal team.

What initially seemed like a simple redesign project with each step of the discovery process grew into a complex effort involving close collaboration among key stakeholders and technical team excellence. We are proud that our work helped the organization streamline how key audience groups interact with the website, how administrators manage web content, and how technology now helps the organization achieve its goals and spread its global impact further.