top of page

BuildESG Hub

Client:

BuzzWord​

​

Role:

Design Lead

Motion Design

ESG criteria are a set of standards for a company’s operations nowadays that socially conscious investors use to screen potential investments.

Our goal is to help private equity companies (both asset managers and their portfolio companies) accelerate their ESG journey through an efficient, user-friendly, streamlined approach and demonstrate their ESG progress.

Target Users.

Asset Managers

(users who invest in 10-20 potential companies)

​

  • Improve internal ESG operations of Asset manager

  • Monitor the ESG journey of the companies within their portfolio

​Companies

(users who need to know if they're qualified for ESG standards)

​

  • Improve internal ESG operations

  • Report their ESG progress/journey to Asset Managers 

Problem.

Strong Resources & Tools

❌

Limited resources. Can only contact consulting firms

Track Progress

❌

Hard to track 

Affordable

❌

Expensive. Over $15,000 for only one assessment (generally needs more than 10)

Efficient

❌

Time-consuming. Can take 9 months

Solution.

✅

BuildESG offers the tools and resources for companies. They can do everything including taking assessments, viewing results, tracking performance, and connecting experts in our one-stop platform

✅

Easy to track. BuildESG allows companies to do assessments themselves. They can easily know where they are and what they need to do to achieve their goal

✅

Has the best cost performance ratio

✅

Take less than 2 months

Testimonial.

“BuildESG provides a great way to improve the steps we're taking to make our ESG progress more efficient than I thought. We want help managing our continued improvement, connecting us with resources, and sharing best practices.”

- Bill Gress, CEO, Prototek

“We recognize that ESG is a growing movement and we need to improve to keep up. It's what we're focusing on and getting plans in motion with BuildESG ’s help by the end of Q1.”

- Todd Seyfert, CEO, Feradyne

“I believe the Assessment was very thorough and appeals to a wider audience, given my past experience with the GRI framework.”

- Sue Bruning, VP of Marketing and Communications, Sustainability Council Chairperson, Cascade

“The BuildESG Assessment is particularly relevant and useful to us, which was missing from the B corp assessment in the past.”

- Liz Gaston, Marketing and Communications, AgBiome

“We pulled together the EHRs manager, the VP of HR, CFO, and COO to complete the Assessment, which took us 35 minutes and gave us an opportunity to talk about our ESG goals. BuildESG gives us access to the best resources. We are now using the BuildESG Assessment as a baseline to build on.”

- Rick Stepien, CEO, Ideal Tridon

“BuildESG is very thorough. We are just trying to figure out how to even do this and start it off. We needed help defining KPIs along with other reasonable objectives and goals in these areas. We needed someone to stimulate the conversation and get the juices flowing.”

- Chris Farrar, CEO, Velocity

“The BuildESG Assessment did a good job of tracking where we are and where there are opportunities to shore things up”

- Caryn Doyle, CFO, Teasdale

In terms of the product results, BuildESG Hub runs pretty well after launch and is a great success. 🎉We have achieved the goal effectively and have been highly praised by the client's executives.

However, the process is not easy...🤯

When we received the client's request at the beginning, what they needed was a website with just a couple of charts. 

But after discussing the problem with them and defining the structure, user flows and information architecture thoroughly, we found that the product is way more than charts. The challenges we faced were the product's complex functions, different types of users and pages impact each other, and lack of background knowledge of ESG and the target audience. It's absolutely a challenging B2B product.💪

Let's see how we ideated and iterated the design solutions and collaborated with the team and client to find out the best option.

Ideation & Iteration.
(All the design below is based on the asset manager view)​

Home page

Version 1:

At an early stage, we didn’t receive many contexts. The structure and user flow were still in progress. The client just wanted to list all the quick accesses to the pages with illustrations.

Home.jpg

🏆Final Version:

Problem

It’s a little redundant as it functions the same as the navigation bar on the top. As a home page, it should include more valuable functions and content.

 

Solution

To make the information acquisition more effective, providing snapshots and portals allows the users to get the key info they need rapidly. So we:

  • Added quick access to the assessment

  • Added ESG Snapshot that shows scores and progress of assessments

  • Added Notifications section

​

Pros:​

  • Informative. Allow users to quickly learn a snapshot of asset manager and portfolio companies' performance and notifications.

  • User-Friendly. Provide quick access to the asset manager assessment whether users want to start, continue or track it.

Dashboard

​

  • Gives both Asset Managers + portfolio companies a better sense of how mature they are in their ESG journey, offers a starting point for finding ways to improve

  • Gives Asset Managers a view of how their portfolio companies are doing in terms of ESG

Version 1:

Problem

The client wanted users to find the item they need quickly but there are many portfolio companies. If listing all the companies, it’ll take too much space and request too much scrolling.

​

Solution

We ideated the information architecture from the action standpoint and added 3 cards, Asset Manager Assessment, Results, and Performance. Users can down select the item they need from the drop-down menu by clicking the Select button.

​

Users don’t need to scroll to find the item they need, but it appeared a couple of new issues:

  • Obscure. No overview. Hard to determine if that's the item they want. They also may need to click back and forth to find out

  • Too many clicks. They need to at least click 3 times to achieve their task

Sitemap_dashboard_version1.png
Dashboard_version1.png

Version 2:

Problem

As one of the key goals is to help users demonstrate their progress, it’s vital to show the details such as how many questions they’ve completed, what the assessment status is, etc.

 

Solution

So we ideated the structure and layout and did the following:

  • Added 2 tabs representing 2 item categories, Asset Manager and Portfolio Company.

  • Users can down select the company they need.

  • Each card represents an item. It shows details including status, progress, and update time.​

Sitemap_dashboard_version2.png
Dashboard_version2.png

🏆Final Version:

Problem

Since an asset manager needs to manage more than 10 companies, it’s better to have an overview of all the companies.

Due Diligence Assessment, Capital Project Assessment, and Vendor Assessment are additional assessments Right now it looks like they’re main assessments as users can see them at first.

 

Solution

To make the user experience logical and friendly, we rethought the structure and did the following changes:

  • Changed Dashboard to Asset Manager Performance that only includes the asset manager assessment. Users can view scores, view responses, and track performance if it’s complete.

  • Moved all the portfolio company's assessments to a new tab, Portfolio Company Performance. To make it more clear, everything about the portfolio company will be on that page.

  • Moved Due Diligence Assessment, Capital Project Assessment, and Vendor Assessment to Additional Resources.

  • Changed the horizontal navigation bar on the top to a vertical sidebar on the left as more tabs were added, it needs more space.

  • Changed "View Results" to "View Responses". "Results" sounds confusing as they’re responses users submitted, not results that have been analyzed.

​

Pros:

  • Intuitive. Asset Manager's items and Companies' items are in different tabs.

  • At-a-glance. Users can see an overview to learn how the status is.

  • Concise. Users don’t need to scroll to find the item they need.

Sitemap_asset manager performance.png
final design_asset manager performance.png

Portfolio Company Performance​

​

  • Offer an aggregated view of all of an asset manager’s portfolio companies. This view is only available to Asset Managers.

Sitemap_portfolio company performance.png

To let the users learn more comprehensively about their portfolio company performance, we discussed with the client and decided to add different views including ESG Maturity & Scores, KPI Processes & Initiatives, Action Items, and Maturity Heatmap.

​

We asked the client for all the data we need and organized it.

scores.jpg
score detail.jpg
heatmap.jpg

Pros:

  • Flexible & Informative. Users can have a quick understanding of their companies’ performance through Summary. They can also dig into it more through different tabs and details to even learn the response of each question/metric.

  • Organized. There is massive data on this page. Users can easily figure out the structure through the tabs and sub-tabs.

Policies​

​

  • Allow companies to track their policies and create the policies they lack

  • Keep all the related policies in one place. Companies can upload new policies and maintain old policies

Sitemap_policies.png

Version 1:

In the beginning, the client had a vague idea of this. They wanted to have default categories to lead the users to upload their policies. Starting from the category standpoint, we ideated the first wireframe:

  • There are 2 tabs, Open Policies and Archived Policies.

  • There are default categories when users go to the Policies page for the first time

  • Users can upload policies under the corresponding category

  • Category is expandable if there are multiple policies under it

  • Category doesn't have the drop-down button if there is only one policy

 

Designed that way, we found that there are two issues:​

  • Confusing. If there are more than 1 policy under the category, it’s hard to divide if it’s a category or policy

  • Chaotic. If users want to keep the old versions of the policies, putting all the old policies together may be too chaotic as there are many parameters (company name, policy category, date)

Policies_v1.jpg

🏆Final Version:

Since the same policy can be under different categories, we used the label concept to solve this problem and ideated from the item standpoint.

  • Policy can have multiple labels.

  • Added label filter. Users can filter the labels to find the policies they need.

  • Users can rename the policy after it's uploaded.

​

Pros:

  • Clear. Current policies are sorted by name. Users can label them as different categories

  • Organized. Archived policies are sorted by year. Easy to trace back to old versions

Reflection​.

Always Think From a Further Perspective at an Early Stage

Focusing on the structure and user flows based on the strategy and scope is the most priority when working on the sketches and wireframe. We need to keep an eye on the team to make sure we’re still on the right track in case we dwell on the details.

Discuss Backend With the Development Team ASAP

To make sure the team is on the same page, communicating with the product manager and the developer team is necessary. When we have a plan for the strategy and scope, it’s good to have meetings with the development team to discuss how we want to setup the database. That way we’ll ideate a design solution that can make a perfect balance. Even though the direction may change later, it doesn’t hurt to give them a heads-up and helps the design team know the constraints.

“Create, Edit and Delete” Are a Family

For any function, we need to think about how many user permissions we want the users to have. If we allow users to create, no matter it’s an item, post, comment, label, or saved search, we must provide the user permission to edit and delete. If it makes the structure and user flow too complex, we need to rethink the function and limit the user permissions.

List All the Common Cases

If an idea needs to be considered depending on the case, using a tick comparison chart can help outline all the common cases and view it at a glance.

E.g., I created a tick comparison chart to make it easier to understand and help the team keep on the same page while brainstorming.

Always Simplify UX

We always need to make the user experience as simple as possible by simplifying the information, functions, structure, user flows, etc.

If some function makes the UX too complicated, we need to think about hiding, moving, organizing, or even deleting some of the non-core functions.

E.g., the client requested a live typing function while multiple users leaving comments for the assessment answers, which will make it way too complex. Also, it’s not necessary for this product. We don’t need to put everything in it. Users can view the answers and communicate outside this platform. So we persuaded the client to delete this function to simplify the UX.

Design Thinking Is Critical for Every Team Member

Design thinking helps the team understand the target users, challenge assumptions, and redefine problems so that we can make sure we’re on the same page and right track. 
Every design has a reason behind it. After the whole team experiences the iterative process, we’ll know how our product works and why it’s the best solution we’ve chosen. It also helps keep everything including logic, user flows, design, and microcopy consistent and takes the product to the next level.

bottom of page