Ocean Acidification Information Exchange Community

Fostering the power of collaboration in response to environmental crisis

The Ocean Acidification Information Exchange (OAIE) is an online community of scientists, educators, NGO and government employees, resource managers, fishers, aquaculturists, and other related professionals. The heart of the OAIE is interactive teams that come together on the website to learn, share, and suggest actionable strategies to deal with the ocean acidification problem.

Instead of promoting one-way information transfers to the website audience, the OAIE focuses on interaction and sharing. The community members actively participate in discussions and contribute content to the platform. They are divided into groups based on specific ocean and coastal acidification topics, and they build well-informed communities that deal with the ecological issue. Most of the site’s content and functionality require users to log in and post updates, documents, events, and links. Users can also add comments, like and follow posts, as well as join topic or region-based teams, some of which are private.

No ability to change, improve, or optimize

The old OAIE website was launched five years ago and was built on ASP.NET with several layers of Javascript. It was a big and outdated monolith that caused the team lots of challenges regarding flexibility and site performance as well as required significant efforts and resources to maintain. The team came to Five Jars when it was time to move to a more robust, more simple, and more efficient technology.

Diving into the discovery phase

At Five Jars, we admire impactful and mission-driven projects and were more than happy to help the Ocean Acidification Information Exchange community get a web resource that would assist them in achieving their goals. 

Before our engineering team could suggest any solution for the migration, our business analyst performed a detailed audit of the high-level requirements provided by the client team. We identified and detailed user profiles, mapping out their journeys on the platform, as there was no centralized or shared understanding of this information. Together with the client team, we went through all the functionality that was to be integrated into the new website and identified:

• Duplicated features that could be merged
• Outdated and unused functionality
• Flows that could be optimized or simplified

The step of requirements elicitation helped us optimize the engineering resources needed further for the website migration. After all the questions had been clarified with the OAIE team, we presented a phased roadmap on how we would bring their site to the next level.

Selecting the new technology

What the OAIE team needed was not a simple web resource for one-sided communication with their audience, but a place where the community would grow and professionals across different domains could interact with each other. After we had gathered all the requirements, we evaluated several options and suggested migration to Open Social, a community engagement platform based on Drupal.

Our tech choice was influenced by the fact that some of the necessary functionality was already pre-built, and that would help optimize the engineering costs for our client. Secondly, the solution offered us the required level of flexibility to add any custom functionality that we had in mind and also ensured simplified site administration and a smooth experience for all user personas.

Launching a website on Drupal Open Social and its customization

Setting up a new website on Drupal is quite a straightforward process and includes some basic steps that are shared across all new projects. Over the years, our team has developed our own Drupal launch checklist, and it helps us ensure a smooth and efficient launch with each case. For the OAIE website, the initial steps covered:

• Development environment setup and configuring Continuous Integration and Continuous Delivery for the project
• Project infrastructure setup
• Setting up new hosting for the website
• Optimizing and configuring the site map
• Building the website’s navigation according to the existing website

Our team also built page templates and layouts, set up basic content types, configured user roles and permissions, and applied front-end improvements for mobile-friendly pages. 

What our tech team spent more effort on was building and configuring the custom features required for the smooth UX of the website. They included: 

• The configuration of the admin panel with the same list of features as on the existing website
• Creating the ability to add multiple listings for events, updates, teams, and users
• Setting up notifications and regular email newsletter
• Configuring on-page filters, search on the website, and search results sorting

Projects tech stack

Complex data migration

After the website was technically ready, we were able to move to the next phase – data transfer, which was a huge undertaking. Since the old website was built on dated technology, it also had a very complex database structure. Our engineering team needed to compile the old code on Node.js with the new one on PHP (required by Drupal) to integrate the data into the new system and preserve all the relations.

Our team developed a detailed migration roadmap and ensured all the data was securely transferred to the new website with all the necessary settings configured. The key groups of structures we migrated included:

• User profiles, profile settings, and groups/teams
• Emails, phones
• Documents, resources, links, media files
• Posts, updates, comments, likes
• Landing pages, events, and more

Improved web content management

With the old website, the OAIE team had an admin panel that allowed them to add and update website content. Yet, its functionality was rather poor and allowed only adding some text and images and formatting it manually with spaces on the keyboard.

After setting up the new website on Drupal, our engineers could add simple but robust web content management functionality to allow administrators to work with the website more efficiently. We created a library of pre-built components that helped the team add new pages quickly. The existing content could also be easily updated. Our team then assembled extensive documentation and provided all supplementary consultations regarding the new admin panel functionality.

What we achieved 

The core task of this project was to migrate the existing old and big website to a more modern and flexible solution without any noticeable change for the existing users. Drupal-based solution Open Social became the technology we selected for the migration. The transition helped us upgrade the site's tech stack and streamline the information architecture. 

After migrating from a custom, legacy CMS to an Open Social platform, the OAIE team is no longer locked into costly maintenance of the old monolith website.  The saved resources can be invested in project development and innovation instead of licensing and maintenance fees.

We performed an extensive discovery phase that helped us transfer and integrate only used and relevant functionality and data. We made the site more flexible, scalable, and secure. Though there were no noticeable changes in UI, as the goal was to keep consistent with the original website design, the site became faster and free of legacy burdens.

Today, our collaboration with the Ocean Acidification Information Exchange team continues. Our engineers are focusing on further fine-tuning the website’s performance. We have planned several useful integrations for the end-users, as well as optimizing the content management flow for all the editors.