KEY ESG platform launch

UI, UX

Mar 7, 2024

KEY ESG platform launch

About KEY ESG

KEY ESG is a SAAS startup for Private Equity companies collecting and reporting on ESG data across their portfolio. It consists of two connected platforms, one for the fund manager and one for companies.

Environmental, Social and Governance (ESG) consists of a wide spectrum of metrics from carbon emission activities to workforce health and safety stats. It’s a challenge for fund managers to collect hundreds of data points across portfolios with dozens of companies.

I joined KEY ESG as they were recruiting their initial team of engineers and had built out a proof of concept (POC) to solve this problem which they were testing with initial clients.

The challenge

Our initial clients wanted to use the KEY ESG platform to conduct their ESG data collection for the 2022 reporting year. However the POC had known technical and usability issues that needed to be rapidly solved to make it fit for purpose. Core functionality had been built out but it was difficult to work out how to use.

Research and goals

At the point I joined, the team already had a good idea of the current problems from testing with clients and internal analysis.

[POC screenshots]

The initial POC enabled companies to input dozens of ESG metrics required by regulation and for fund managers to see and extract this data within their platform. However, there were a number of issues with this:

  • Fund managers had no visibility on what was being collected, how each company was progressing and whether they were complete or not.

  • Company users had no guidance on how to get started, which metrics to complete and how to know if they were finished or not.

In addition, there were usability issues identified in testing:

  • The data input screens were cluttered and confusing

  • The app used unhelpful technical jargon such as ‘Data intelligence cube’

  • Navigation was unclear and users would lose where they were and what they were doing

  • The calendar selector made it easy to enter overlapping entries

  • Users could accidently opt out of data points with no clear way of getting them back

The team had learnt a lot, but it was not yet usable or useful.

Due to tight timeframes, we needed to rapidly resolve these problems to get the product ready for real world use. There was no scope for redesigning the experience, I needed to work with what we had.

I ran a workshop with the founders and engineers to map out how these users flows needed to work.

[User journey map]

To avoid a large redesign I looked to layer in a step by step, guided approach to the existing core user tasks. This session helped the team arrive at a consensus on the steps, content and actions throughout the journey. It also helped me understand from the engineers what was technically feasible within the given timeframes.

Exploration and wireframes

I wireframed the new fund manager platform user flow which guided them through setting the data collection requirements for their portfolio. My goals were to give the fund manager one place to setup and monitor on-going data requests to their portfolio, giving them visibility on progress.

[Wireframes]

I checked in with the team to make sure we were still aligned before moving onto high fidelity prototypes.

This new flow also needed to connect up with the company platform.

My idea was to replace the overwhelming screen of tiles with a list view in a persistent panel on the left. This list would indicate status and make navigation quicker and easier helping to overcome some of the usability issues identified earlier. It also meant the existing data input interface could be maintained without rebuilding it.

[Status screenshots]

It would also automatically be filtered down by the fund manager requirements defined in the new fund manager flow. Input dates were locked in to prevent errors and other smaller UI improvements were identified that were low effort, high impact.

The team spent two sprints working on these improvements, one for the fund manager flow and one for the company improvements. The team had not yet recruited a product manager so I stepped in to fulfil some of these responsibilities to ensure delivery went smoothly.

Usability testing

Our main concern was the company platform where the majority of user activity would occur. I ran 5 rounds of usability testing with the new changes to company platform. Each round went through 3 tests to examine different areas of the experience:

  • Setup and configure your London Office

  • Enter the electricity usage for one of your sites

  • Import a spreadsheet of employee salary data

We discovered some further minor usability issues through this process but validated that the new approach was clear and easy to understand.

Launch outcomes and next steps

Our launch version of the product was used by over 50 companies to collect data for the ESG regulation ‘SFDR’ as well as the Greenhouse Gas Protocol carbon emissions. It proved successful and our fund managers were able to create their annual ESG reports based on the data collected.

We surveyed the user base after launch and I interviewed several companies on their experience so far.

They fed back to us that the process was far easier than the existing method of spreadsheet capture and email communication. They wanted more in-app reporting, analysis and data validation. There were also still unresolved usability issues which we looked to solve when it made sense within our roadmap schedule.

Product evolution over 2023

We continued to evolve the product in collaboration with our users over 2023. I worked with the founders to build a mental model diagram to unpack every area of the customer journey through the ESG reporting process. This helped generate discussion around which parts of this journey we wanted to support with app functionality, helping to define out long term vision of the product.

[mental model diagram]

Over time the fund manager data requests flow evolved with more functionality such as deadlines, reminders, notifications and custom ESG metrics. We introduced entirely new features to review and drill into data within the app.

We also reintroduced the original tiled metric library as a way to freely explore all available ESG metrics.

[Fund manager screenshots]

The company platform evolved dramatically to support more and more complex data collection requirements, particularly around carbon emission calculation. We learnt more about the problems surrounding data collection in large organisations who had data sitting in different sites, across departments and data owners around the world.

[Company platform screenshots]

Design system

When I joined the company, the design system look and feel had been based on a template that was not aligned to the company brand guidelines. It had also only partially been followed by the engineers and so there was a mismatch between the implemented components and the figma design system.

I evolved the figma design system to match the brand guidelines and developed a modern look and feel to help differentiate our product from our competitors who typically had out-dated, clunky interfaces. I worked closely with the engineering team to bring the figma files and production components into alignment.

[design system screenshots]