A High-Tech Platform Created to Help Companies Embed Environmental Sustainability Across their Operations and Decision‑Making

Background

The Embedding Project is a brainchild of the Simon Fraser University Beedie School of Business. As a global public-benefit research initiative, their goal is to help companies embed social and environmental factors across their operations by providing them with research and operations guidance through their vast database accessed through the web dashboard. By choosing your own pathways, The Embedding Project helps you achieve your sustainability goals in a custom‑tailored experience.

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. Visitors having a hard time navigating the breadth of information hosted in the database.
  2. Website admins struggling with slow and tangled interfaces, unable to fully control website content.

At Pieoneers we were able to address both issues and provide our UX&UI expertise coupled with up-to-date tech solutions. Read on to learn the details of what’s been done.

Sinead Sprigg

Based on our needs, they’ve been very honest and have been able to give us good recommendations.

Sinead Sprigg, Communications Manager, The 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 the 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.

Breadcrumbs screenshot

Footer Navigation

We analysed footer navigation usage in Google Analytics and found that the resources links were barely used, so we agreed to remove this section altogether.

Old footer screenshot

We also optimized the layout of the remaining footer and changed the link colour to blue to match the rest of the website. The result is a neat, compact, easy-to-use footer navigation:

New footer screenshot
Sinead Sprigg

Users are pleased with the site’s navigability. Pieoneers provided expert advice that significantly improved UX.

Sinead Sprigg, Communications Manager, The Embedding Project

New Content Management Tools and Development Stack

Requirements

The main pain point of the Embedding Project team was the old admin area. It was slow, complicated, and lacked basic content editing features. Their 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 to compensate for busy SFU servers.

Solution

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

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

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.

Sinead Sprigg

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.

Sinead Sprigg, Communications Manager, The Embedding Project

Building a Functional Design: The Embedding 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.

Embedding Wheel

Challenge

Since we decided to build the website from scratch with Contentful and Gatsby.js, it was crucial to keep all of the wheel’s features functional and easy to maintain.

Solution

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

Wheel rendering is done by 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 tech 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
bulb

Building something great? Tell us about it.

Contact us today

More projects we’ve delivered:

See all case studies