Embedding Project logo

A public benefit research organisation that helps companies embed sustainability across their operations and decision-making

Background

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.

The Mission

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:

  1. With the project growing at rapid pace, the EP team needed to upgrade and streamline the website’s navigation for both desktop and mobile.
  2. 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.

Dr. Stephanie Bertels

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.

Dr. Stephanie Bertels, Founder and Executive Director, Embedding Project

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:

Embedding Project website 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.

Embedding Project mindmap

UI Enhancements

Breadcrumbs

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.

Breadcrumbs screenshot

Footer Navigation

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.

Old footer screenshot

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:

New footer screenshot
Dr. Stephanie Bertels

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.

Dr. Stephanie Bertels, Founder and Executive Director, Embedding Project

All New Content Management Tools and Technology Stack

Requirements

Rapid expansion of the website content and structure required a new admin area. The EP team approached us with three straighforward requirements:

  1. Full contol over website content.
  2. Easy-to-use CMS that doesn’t require any coding experience from team staff.
  3. Fast performance.

Solution

Here’s the technology stack we used to address those requirements:

Contentful logo

Contentful

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.

Gatsby logo

Gatsby

Gatsby.js is a React based Javascript framework. It generates static web pages that can be deployed on dozens of servers without complicated setup. Gatsby.js is bundled with GraphQL, a data query language that allows easy integration with Contentful. The result is a low-maintenance, cost-efficient, blazing-fast website.

Author photo

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.

Communications Manager, Embedding Project

Building a Functional Design:
The Embedding Project Wheel

Concept

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.

Embedding Wheel

Challenge

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.

Solution

Contentful + GraphQL

Content for the wheel segments is pulled from Contentful using GraphQL, which is built into Gatsby.js.

D3.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.

Contentful Practice EditingArrow downEmbedding Wheel Practice

Project Outcomes

  • UI&UX analysis
  • Google Analytics data analysis
  • Sitemap visualisation
  • CMS integration
  • Web development
  • CI/CD implementation

Building something great? Tell us about it.

Contact us today

or Book an Appointment

More Projects We Delivered

See all case studies