A public benefit research organisation that helps companies embed sustainability across their operations and decision-making
The Embedding Project is a global public-benefit research project that helps companies embed social and environmental factors across their operations and decision-making. The organisation:
- Identifies and develops the tools companies need to embed sustainability;
- Brings together global companies, harnessing their collective knowledge to generate tools for the benefit of all; and
- Supports companies directly, where it can add value.
When The Embedding Project approached Pieoneers they were looking for a highly advanced tech partner who could come up with a solution for two challenges their users were experiencing:
- With the project growing at rapid pace, the EP team needed to upgrade and streamline the website’s navigation for both desktop and mobile.
- Administrators required a new interface that could facilitate making additions to their growing content database.
At Pieoneers we were able to address both issues and provide UX-UI expertise coupled with up-to-date technology solutions. Read on to learn the details of what has been accomplished.
It's refreshing to be able to have frank conversations to identify the right solutions. As a result, Pieoneers have provided realistic solutions that meet our needs.
Navigation & UI Optimization
Visualization of the Website Structure
To get a complete understanding of what content the website consists of we created of a visual sitemap:
The sitemap analysis revealed a few issues, including:
- duplicate content on various pages
- pages not accessible from anywhere on the website
We also designed a mindmap of the all pages for the new website. It allowed us to communicate our vision to the client, and use it as a reference in the development phase.
One of the navigation enhancements implemented by Pieoneers was addition of breadcrumbs. They allow users to be aware of where they are on the website and provide the ability to go backwards; a simple yet powerful way to reduce frustration and streamline UX.
We analysed footer navigation usage in Google Analytics and found that the resources links weren't being used as intended, so we removed it to optimise the website structure.
We also enhanced the layout of the remaining footer and changed the link colour to blue to match the rest of the website as well as the branding guidelines. The result is a neat, compact, easy-to-use footer navigation:
Our site users have been pleased with the site's navigability. They've told us that it feels designed to meet their needs. Pieoneers helped us to significantly improve UX.
All New Content Management Tools and Technology Stack
Rapid expansion of the website content and structure required a new admin area. The EP team approached us with three straighforward requirements:
- Full contol over website content.
- Easy-to-use CMS that doesn’t require any coding experience from team staff.
- Fast performance.
Here’s the technology stack we used to address those requirements:
A tool that we love and rely on for our very own website, Contentful allows content and presentation separation. It provides storage and admin facilities available for non-tech team members. Distributed content can be integrated into digital platforms and interpreted to meet the needs of the user.
Contentful is fairly user-friendly once you get to know its quirks. It has been functional in allowing us greater control over our website content and resources.
Building a Functional Design:
The Embedding Project Wheel
The Embedding Wheel is a key navigational point for the website. It represents how pathways, practices and resources are organised in the project database. Moreover, the entire Embedding Project branding and design is based on the wheel concept. The original concept of using the wheel was developed by Dr. Stephanie Bertels and the project's original developer. Pieoneers updated the wheel with a modern technology stack that allowed the Embedding Project to function on mobile devices and provide a better UX on all platforms.
Pieoneers built the website from scratch with Contentful and Gatsby.js. With the new stack in place, it was crucial to keep all of the wheel’s features both functional and easy to maintain.
Content for the wheel segments is pulled from Contentful using GraphQL, which is built into Gatsby.js.
Wheel rendering is implemented using a D3.js library, designed to build complex graphs based on the data provided.
Adding new content to the wheel is automated and doesn’t require any development work or technical background from EP staff. For example, once a new practice page is created in Contentful, a new segment of the wheel is added automatically.
- UI&UX analysis
- Google Analytics data analysis
- Sitemap visualisation
- CMS integration
- Web development
- CI/CD implementation