A High-Tech Platform Created to Help Companies Embed Environmental Sustainability Across their Operations and Decision‑Making
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.
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:
- Visitors having a hard time navigating the breadth of information hosted in the database.
- 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.
Based on our needs, they’ve been very honest and have been able to give us good recommendations.
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 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.
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.
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:
Users are pleased with the site’s navigability. Pieoneers provided expert advice that significantly improved UX.
New Content Management Tools and Development Stack
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:
- Full contol over website content.
- Easy-to-use CMS that doesn’t require any coding experience from team staff.
- Fast performance to compensate for busy SFU servers.
Here’s the tech 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 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.
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.
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.
- UI&UX Analysis
- Google Analytics Data Analysis
- Sitemap Visualisation
- CMS Integration
- Web Development
- CI&CD Implementation