From 0 to 1: Build a ESG Hub
A one-stop platform to help companies and investors to accelerate ESG journey
Client
Buzzword
Timeline
October 2021 - Janurary 2022
Role
Product Lead
Illustration
Motion Design
Device
Web platform
Background
Environmental, social, and governance (ESG) criteria are a set of standards for a company’s operations that socially conscious investors use to screen potential investments. This poses new challenges for finance managers, because professional, rigorous ESG management and the preparation of internal and external reports can be both time-consuming and expensive.
Building an ESG program is no longer a ‘nice to have’ – it’s a ‘must-do.’ But it can be difficult, complex, expensive, and time-consuming.
How do we create an efficient, user-friendly, and streamlined digital tool for companies and investors to map and accelerate the way forward no matter where they are on the ESG journey?
Designed For
Testimonial
In terms of the product results, BuildESG runs pretty well after launch. 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 need was a website with just a couple of charts.
But after discussing the problem and defining the structure, user flows and information architecture thoroughly, we found that the product is way more than charts. The challenge we faced is the product's complex functions, different types of users and pages impacting 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 & Iterations
（All the design below is based on the asset manager view）
Homepage
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.
Problems
It’s a little redundant as it functions the same as the top navigation bar. The home page should include more valuable functions and content.
To make information acquisition more effective, providing snapshots and portals allow 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
-
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
I partnered with the product manager from Buzzword to conduct several user interviews to determine two user types’ workflow and goals.
The Goal
-
Provide both Asset Managers + portfolio companies with a better sense of the maturity level 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
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.
-
Space Taken. The “Asset Manager Assessment” card is no longer useful after users finish all the assessments. Similarly, the other two cards are not working until the users finish the assessments.
-
Obscure. No overview or clear guidance of what to do first. Hard to determine if that's the item users want. Users may need to click back and forth to find out.
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
-
Designed 2 tabs representing “Asset Manager” and “Portfolio Company”.
-
Users can down-select the company they need.
-
Each card represents an assessment. It shows details including status, progress, and update time with actions buttons that users can interact with.
-
No overview for all the companies.
An asset manager needs to manage more than 10 companies. It’s difficult to see the overview and comparison among all the companies. -
Too many noises to focus on the main task.
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.
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, which includes everything about the portfolio company.
-
Moved Due Diligence Assessment, Capital Project Assessment, and Vendor Assessment to Additional Resources.
-
Changed the top navigation bar to a vertical sidebar as more tabs were added to best utilize the space and ensure consistent access.
-
Changed "View Results" to "View Responses". "Results" sounds confusing as they’re responses users submitted, not results that have been analyzed.
-
Intuitive. Asset Manager's items and Companies' items are in different tabs.
-
At-a-glance. Users can see an overview to learn what the status is.
-
Concise. Users don’t need to scroll to find the item they need.
Portfolio Company Performance
The goal for this page is to offer an aggregated view of all of an asset manager’s portfolio companies. This view is only available to Asset Managers.
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.
-
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.
Reflections
Don’t be afraid of ambiguity
Ambiguity is a natural part of the design process. As product designers, we should learn to embrace it and use it as an opportunity to explore new ideas. Define the problem based on the limited resources and ask questions to gain a deeper understanding of the problem. Use quick sketches, wireframes, and rapid prototypes as visual aids to convey the ideas to stakeholders, team members, and users, helping them better understand the problem for getting further information and direction.
Get Development Team involved in the early stage
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 set up the database. That way we’ll ideate a design solution that can make a perfect balance. Even though the direction may change later, identifying potential technical constraints and possibilities earlier will help designers to create more feasible interfaces and interactions and better user experience, which will also prevent costly rework later on.
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.
Always keep user-centered and simplify the UX
After the whole process of user research, defining problems and looking for solutions, product managers and designers may have even more context than the users do. We should always step back to focus on users‘ needs and pain-points on every stage to eliminate distractions and make sure users can stay focused on their tasks.