ESG Labs
AI-powered compliance, delivering intelligent ESG insights
Product designAI compliance
🌐 Compliance & Sustainability
Ethan's day isn't about spreadsheets, it's about pure survival. As Chief Sustainability Officer (CSO), he navigates the challenging world of Environmental, Social, and Governance (ESG) regulations facing his company, guarding against potentially devastating fines and penalties.
Traditional manual tracking simply cannot keep pace with the deluge of updates arriving from all corners, each a potential trigger for disaster. 😟
This account details the design process behind ESG Labs, an AI-driven platform conceived and built in three months to confront this very problem that Ethan and many others face daily.
I directed the UX research and product design efforts, working through considerable uncertainty to produce an initial version that offers CSOs clear understanding and practical direction, transforming regulatory pressures into addressable activities.
01. Challenge
The regulation avalanche
Keep the poor picture of our CSO in your mind as you think of having to review new and updated regulations on a daily basis from all parts of the globe.
What's the problem?
- Chief Sustainability Officers (CSOs) and their teams are overwhelmed by the sheer volume, velocity, and complexity of global Environmental, Social, and Governance (ESG) regulations.
- They lack efficient, reliable tools to automatically identify applicable regulations across diverse jurisdictions, interpret their specific impact, prioritize compliance actions, and track ongoing changes.
- This leads to significant time wasted on manual research, a high risk of non-compliance, resulting in fines and reputational damage, and difficulty demonstrating ESG progress to stakeholders.
Ethan, CSO (top 10 multinational)
02. Project goals
Deliver a new ESG product on the new tech stack
Our central business aim was to allow Ethan to manage the demanding territory of ESG regulations. We wanted to lessen his exposure to financial and reputational risk and provide lucid, practical guidance.
To assess the success of the initial version and confirm its value before a broader release, we established the following performance indicators tied to our goals:
GOAL 1
Clarity and direction
KPI: Reduced time spent on regulation discovery
Decrease the average time Ethan and his team spends manually searching for and identifying applicable regulations by at least 20% compared to their previous methods (assessed via user surveys and time-tracking during beta testing).
KPI: Increased accuracy of surfaced regulations
Achieve a user rating of 4 out of 5 or higher on the applicability of regulations surfaced by the platform for their specific business profile.
GOAL 2
Efficient decision making
KPI: Improved issue identification rate
Increase the number of potential compliance issues accurately flagged by the platform per user session compared to previous benchmarks (assessed via platform analytics and user feedback), aiming for a 25% improvement.
GOAL 3
Comprehensive compliance
KPI: High user satisfaction
Obtain an average user satisfaction score of 4.0 out of 5 or higher on post-beta surveys concerning the platform's ease of use, clarity, and overall effectiveness.
GOAL 4
Data transparency
KPI: Confirmed willingness to pay
Secure confirmation of willingness to pay from Ethan for the platform post-beta from at least 60% of participating beta customers.
03. My role
UX research and product design lead
Creating partnerships
Partnering with a talented cross-functional team of designers, product managers, data scientists, and engineers, I led the UX design, translating user research from discovery sessions into intuitive visual concepts and user flows. My focus was on creating actionable design solutions that addressed user needs.
- Led the UX research in collaboration with product owner
- Led and defined the user experience
- Managed cross functional collaboration and facilitation
- Conducted usability testing
I also needed to acquaint myself with a new tech stack involving technologies such as Next.js, Vercel deployment, Clerk and FaunaDB!
04. Target user
Why the Chief Sustainability Officer?
The Chief Sustainability Officer (CSO) is a critical decision-maker and budget holder for ESG initiatives. Targeting them directly is essential for driving adoption of our AI-powered ESG compliance platform.
Long term vision
Ethan is tasked with ensuring his organisation's long-term sustainability and aligning operations with evolving investor expectations.
Risk management
Ethan is responsible for identifying and mitigating ESG-related risks that could lead to regulatory penalties, reputational damage, or governance scandals.
Operational efficiency
Ethan drives initiatives that improve operational efficiency through sustainable practices, such as energy conservation, waste reduction, and employee well-being.
05. Research
Talking to customers
Our major research initiative was a customer advisory program that was to inform the product discovery process. These are structured interviews and workshops designed to gather in-depth qualitative feedback from target users.
The research stages
The Jobs To Be Done (JTBD) framework
This is a core element, focusing on understanding the underlying needs and motivations of users rather than just their surface-level preferences. It aims to uncover what 'jobs' users are trying to accomplish with compliance solutions.
The team broke users activities down into job steps which are more digestible chunks of a user journey. Within the critical area of ESG compliance, we found three main job steps as the most relevant and urgent.
Example of how the team structured job steps
Customer advisory board
These are structured interviews and workshops designed to gather in-depth qualitative feedback from target users. The emphasis is on understanding user perspectives, challenges, and needs.
In-depth Interviews
The 50 minute conversations are designed to elicit detailed qualitative insights from senior compliance leaders. The focus is on exploring their experiences, needs, and feedback on product concepts.
I personally conducted several of these 50 minute interviews alongside the product owner, focusing specifically on probing user workflows, pain points related to existing tools, and reactions to early value propositions.
The Product owner acted as the subject matter expert provided regulatory context, while I focused on usability and behavioral questions, synthesizing notes afterwards to feed into our JTBD analysis.
The product team working with the complex content we must design for
06. Discovery
Critical steps for our customers
Our JTBD research yielded 19 job steps. The team prioritised three job steps because these were the most frequently mentioned pain points:
Job step 2
Identify the relevant internal policies, regulations, and standards for each product/company in each market.
Job step 3
Interpret the relevant regulations and standards to understand how they impact your products/company.
Job step 16
Stay on top of upcoming changes in the relevant regulations or standards. The focus is on exploring their experiences, needs, and feedback on product concepts.
We then crafted user stories like, 'As a CSO, I want to see a personalized dashboard that shows me the regulations that apply to my company, so that I can focus on the critical issues.' This is what drove our MVP.
Main pain points discovered
Users across industries struggle to keep up with evolving global regulations. Manual tracking is inefficient, and automated solutions are highly desired.
Users face difficulties with fragmented reporting processes and struggle to connect compliance actions to revenue impact.
ESG compliance is seen as both a risk mitigation strategy and a potential source of competitive advantage.
Mapping out the journey
Storymapping is a powerful way to map and visualise the user's journey through your product or service, in a visual and dynamic manner. Taking the job stories as a base, I diagrammed many possibilities because of what we learned about users' motivations. I outlined the steps the user might go through, plus issues that arise and then add behavioural techniques that will keep users on track.
07. Ideation
How might we...
The major question was 'how might we create an AI-powered ESG platform that simplifies compliance and empowers informed decision-making'
As the facilitator, I designed and ran this workshop to ensure we captured diverse perspectives from product, engineering, and QA.
Ideation workshop for MVP 1
Attendees
Product team, Engineering team and QA. I was the facilitator.
Objective
To build a shared understanding of what a seamless experience looks like for a Compliance executive in a ESG world. Collaboratively explore conceptual ideas for the Compliance Executive journey.
Task
Map out a best-in-class product that empowers ESG executives to confidently take the necessary steps to comply with ESG regulations, while prioritizing actions that have the most significant impact on their business
Groups
The team was split into three groups to make the session more manageable and give a chance for everyone to contribute to the session.
Team 1: Focused on user experience and clear actions
Team 2: Focused on initial setup and different compliance perspectives
Team 3: Focused on experiment approach and granularity of actions
Takeaways from sessions
The team discussed and agreed on the app flow and the following approach:
- User centric approach
- Automation is crucial
- Data driven compliance
- Multiple compliance perspectives
- Granular action items
- Prioritisation based on risk and deadlines
- Ethical considerations
- Need for monitoring
Release timeline
The team also came up with a timeline of features we wanted to launch, from most critical with willingness to pay in mind at the beginning.
08. AI integration
AI driven design and iterative refinement
Given that our product was AI powered, I saw the importance of designing for AI from the ground up. Using Vercel's v0, I was able to rapidly create interactive prototypes, allowing us to test design concepts with users early in the process. This accelerated our iteration cycle and helped us gather valuable feedback.
Prototyping and iteration
To accelerate our design process I used Vercel's v0 for AI powered prototyping. It allowed us to rapidly generate interactive prototypes based on text prompts, allowing us to quickly test and validate design concepts with users.
Benefits of v0 for iterative design
- Rapid prototyping: v0 quickly creates interactive prototypes, speeding up the creation of testable designs.
- Realistic content: Showing realistic content to customers saves time and is more meaningful.
- Easy prompting: Easy to use natural language prompts which allowing for flexible design exploration.
Initial design exploration and validation
Our initial design exploration focused on the primary interface, considering two main concepts. I used v0 to quickly prototype these concepts and then validated them with users to understand their preferences. A key finding was that users, contrary to our initial assumptions, preferred text heavy displays over more visual dashboards. Visuals were there to support content.
⭐ Concept one: Visual dashboard
A traditional dashboard approach with rolled-up data and high-level summaries, emphasising charts and graphs.
⭐ Concept two: Detailed content list
A content-rich list focused on providing specific regulatory information and actionable details, prioritising text and structured data.
User driven design refinement
User testing of the v0 prototypes revealed that CSOs preferred a hybrid approach, but with a strong emphasis on text-based information. They needed a balance of high-level overviews and the ability to drill down into specific regulatory details, presented in a familiar report-like structure inspired by McKinsey reports.
UX copy audit
A big part of my role was ensuring the language was correct. With a background in copywriting, I conducted a comprehensive UX copy audit, which involved:
- Learning from experts: During initial discovery, I paid close attention to the language used by compliance officers, noting key phrases, terminology, and any points of confusion.
- Terminology: I compiled a comprehensive sheet of all UX copy, labels, phrases, and potentially problematic jargon.
- Collaboration: I collaborated with marketing, customer service, legal experts, and other teams close to our users to validate the accuracy and appropriateness of the language.
- Refinement: The validated language was then incorporated into our prototypes and designs, and further refined based on user feedback during testing.
This ensured that the language was clear, concise to ensure a more intuitive and effective user experience.
AI design principles
I established a set of core AI design principles to guide us in our process. Some key examples include:
Design for variability
Use multiple outputs: Recognize the inherent variability of generative AI. When a user inputs product specifications, the AI might generate different compliance strategies over time as regulations evolve or new information becomes available.
Design for imperfection
Offer ways to improve outputs: Acknowledge and handle errors gracefully. Designing for graceful failure is crucial in AI systems.
Design for multimodal interaction
Recognising different ways of interaction: Consider how voice commands, image recognition, or augmented reality (AR) could enhance the user experience in a compliance context, beyond text-based input.
👉 View all AI design principles
09. Collaboration
Balancing AI automation with human expertise
A central tension in the development of of the MVP was determining the appropriate level of AI automation and when to incorporate human oversight. Design and engineering held differing views on this, particularly concerning the generation and validation of compliance actions.
Engineering’s drive for automation
Engineering were keen to maximise AI automation to improve efficiency and reduce manual effort. They believed the AI could accurately generate detailed compliance actions directly from regulatory texts.
Design’s emphasis on human oversight
Design, however, emphasised the crucial role of human expertise, especially in the context of high-risk compliance decisions. Our user discovery sessions consistently highlighted the need for human validation. Users expressed concerns about:
- Oversimplification: AI potentially missing critical nuances in regulatory language or failing to account for specific company contexts.
- Lack of trust: Users hesitation to rely solely on AI-generated actions without a clear understanding of the AI's reasoning.
- Accountability concerns: A need for a clear chain of accountability in the event of non-compliance, something AI alone cannot provide.
To address these user concerns and ensure responsible AI implementation, design advocated for a process where AI generates suggested actions, but human experts review, validate, and customise them. I proposed UI elements that would:
- Clearly differentiate: Visually distinguish between AI-generated suggestions and human-validated actions.
- Facilitate review: Provide tools for experts to easily edit, annotate, and approve/reject AI suggestions.
- Document rationale: Record the rationale for any changes made by human experts, enhancing transparency and auditability.
The collaborative approach
In the end adopted a collaborative approach, combining the strengths of AI and human expertise. The AI is used to accelerate the process by generating initial action suggestions, but human experts retain control and accountability by reviewing and validating those suggestions. This approach balances efficiency with accuracy, trust, and responsible decision-making.
Design also worked closely with the data scientists to ensure that the AI algorithms were trained on relevant data sets and that the results were presented in a user-friendly manner. This involved providing clear explanations of how the AI worked and ensuring that the AI's output was aligned with user needs.
10. Design approach
Content first design for clarity and usability
Beyond AI integration, our overall design approach was heavily influenced by the need for clarity and usability. This led us to adopt a content first strategy, prioritising clear and concise communication.
Content first approach
Since finding out how our target user wanted to consume content, I drew inspiration from publications and websites our target users (executives and P&L owners) frequently read, such as the Harvard Business Review and McKinsey Quarterly.
Content rich McKinsey report
This approach informed our microcopy and content strategy, ensuring that all text was:
- Informative: Providing accurate and up-to-date information on ESG regulations.
- Engaging: Presenting information in a clear and compelling way.
- Easy to understand: Avoiding jargon and technical terms.
Proposed information architecture for MVP
AI UX patterns
AI has changed how I interact with technology. While fundamental design principles remain true, the evolution of AI interfaces demand a new approach to user interaction. Here is a selection of patterns I used. Examples of patterns I employed included:
Suggestions
Sample suggestions guide users by offering potential next steps in a conversation, presented as a list of 3-5 options.
Primary sources
Providing specific reference points helps guide the AI's response, offering a richer dataset for analysis than a single prompt.
Nudges
Nudges provide in-app guidance, alerting users to AI features and how to utilize them effectively, especially during onboarding.
Citations
Citations enable users to trace information back to its origin, as AI aggregates data from multiple sources to provide comprehensive responses.
👉 View the collection of AI UX patterns
11. Visual approach
Leveraging shadcn/ui for rapid development
To accelerate the development of our Minimum Viable Product (MVP), I chose to utilise the shadcn/ui component library. Shadcn/ui provided a collection of pre-styled, accessible, and customisable React components, which significantly streamlined our front-end development process.
Component examples
Customisation and branding
While shadcn/ui offered a solid foundation, I recognized the importance of establishing a unique visual identity for our platform. Therefore, I undertook a customization process to align the components with our specific branding guidelines. This involved:
- Colour palette refinement: Overriding the default shadcn/ui colour scheme with our brand's primary and secondary colours.
- Typography adjustments: Implementing our brand's chosen fonts and font styles across all components to ensure consistency.
- Component variations: Extending and modifying certain shadcn/ui components to accommodate specific functional and design requirements not covered by the library's defaults.
12. Solution
Delivering actionable ESG intelligence
The final product delivers a user-friendly platform through clear visuals and intuitive design. It provides actionable insights, streamlines workflows, and allows for informed decision-making. The product was launched as a beta program with select customers, demonstrating their willingness to pay for its capabilities.
In the design process, I concentrated heavily on the list pages and detail views. I recognized that these were the 'magic' for the customer.
The list view, as shown below, was designed to provide a clear and efficient overview of relevant regulations, offering users the option to switch between a card based and a more table like presentation of the data.
List view
The list view provides a high-level summary of regulations. Notice the use of:
- Clear categorisation: Regulations are grouped by risk level, making it easy for users to prioritize.
- Key information at a glance: Date added, regulation title, and a short summary are visible, allowing for quick scanning.
- Actionable elements: Compliance status indicators and 'Mark as not applicable' options are readily available, enabling efficient workflow management.
- Visual hierarchy: New items and high-risk regulations are visually distinguished to draw user attention.
Details view
The regulation detail view offers a deep dive into individual regulations. Key design elements include:
- Emphasis on criticality: The critical alert immediately informs the user of the regulation's importance.
- Concise summary: A summary provides a quick overview of the regulation's scope and impact.
- Official information: Official name and entry into force date are clearly displayed for reference.
- 'Why it is relevant' section: This section provides tailored guidance, outlining specific actions the company needs to take to comply. This is crucial for turning information into action.
- Clear structure and formatting: Bullet points and headings improve readability and comprehension of complex information.
13. Outcomes
Happy beta customers 😊
Prior to piloting our new product with select customers, the team defined key metrics to measure our proposed streamlined compliance review process.
Tracking
We created a Gainsight dashboard to track duration times for user actions (regulation searches, regulation assessments and status changes), session recording tool FullStory to review users interactions. We also gave customers a short questionnaire to complete.
23%
Reduction in time spent searching for relevant regulations
To put in context, the average amont of regulations reviewed went up from 12 regulations to 25!
34%
Increase in flagged compliance issues
These are the average number of compliance issues per customer flagged on our platform because of more relevancy.
4/5
Average user satisfaction score based on surveys
Customers loved that they could now see what was relevant for them and the system flagged what was most critical.
Tremendous information and insights. Looks really good.
Director of FP&A, Honeywell
That's amazing. Quite frankly, it's not easy what you just did there.
Former Head of Sustainability, Lexmark
20%
Increase in the willingness to pay from beta customers
This shows that the platform's value proposition clearly resonated with our target audience, including the star of our show CSO Ethan! 👏
14. Learnings
Growing as an AI designer
What I learned
- Designers now have an extra layer of daily uncertainty when it comes to desiging for AI.
- The importance of frequent communication, especially with engineering and data team.
- There is a challenge of balancing the perceived 'magic' of AI with the need for user trust and expectations.
- Using AI to rapid prototyping speeded up our design time and made it easier to communciate the design vision to customers and engineering.
Areas for future iteration
- Spend more time user testing that is specifically focused on AI driven features.
- Explore how to visually explain AI decision making to communicate with users.
- Better onboarding experiences that explain the AI and its limitations.
