2022 - 2026
Product Design
UX Design
ESGhub
From Friction to Flow
Architecting an Enterprise ESG Platform
ESGhub is an ESG data management SaaS platform that helps enterprises efficiently collect, report, and analyze sustainability data.
I joined ESGhub at its 0-1 concept stage and quickly grew to lead design for its entire lifecycle. My work focused on establishing data integrity, achieving cross-stakeholder ease of use, and delivering a cohesive product experience.
Company
MioTech
Product
Web App
My Role
Lead Designer
Context
The opportunity
As ESG (Environmental, Social, and Governance) becomes the key metric for measuring long-term business health, companies are facing mounting pressure from regulators, investors, customers, and employees to improve transparency and performance.
The core challenge
The complexity of Data management &
lack of professional guidance of ESG disclosure
Fragmented data across emails, PDFs, and spreadsheets turned cross-departmental and supplier coordination into a massive time sink, trapping users in endless manual follow-ups and validation.
Our journey of ESGhub experience these three stages
0-1 MVP
Prioritizing Speed-to-Value
For the 0-1 phase, our primary goal was to launch a lean MVP and validate our value proposition in the real market.
Narrowing down the problem
To achieve this rapidly, we bypassed lengthy upfront research, relying on SME collaboration and competitive analysis to define core user scenarios. Based on these insights, we decided to focus on:
Focus Area
Reporting
Target User
ESG managers
Core Problem
Drowning in fragmented data without clear compliance guidance
MVP Launched Design
Automated Frameworks
Professional Indicator Library
Provide imbedded professional indicator library with comprehensive information.
Smart Structuring
Auto-generated reporting structures based on globally recognized frameworks (like GRI) to ensure professional compliance.
End-to-End Reporting Workflow
Guided Pipeline
A linear workflow that leads users seamlessly from select frameworks to final disclosure.
Streamlined Data Entry
Divided lengthy collection forms into separate, focused cards to significantly reduce cognitive load.
1-N Feedback-Driven Iterations
Taming System Complexity
at Scale
Once the MVP was live, we pivoted to a feedback-driven iteration cycle, leveraging support tickets and interviews with active users. Based on these insights and in-depth research, our platform evolved from a basic reporting tool into a comprehensive management and strategy ecosystem.
New challenges appear as the platform grows
As the platform’s scope and complexity increased, new layers of friction emerged.
I synthesized this fresh feedback and deep dive to the core workflow, uncovering three core design challenges to tackle in this phase.
01
The platform bridges diverse domains—each with unique data standards and workflows. It usually need more time for users to navigate the system effectively.
How might we create a clear & cohesive experience across independent yet deeply interconnected modules?
02
The platform serves a diverse range of stakeholders with different mental models, professional backgrounds and target.
How might we design a platform that stays professional for domain experts yet accessible for small-scale suppliers?
03
The flat presentation of data slows down decision-making by requiring manual review and interpretation.
How might we use UX to transform raw data into a "decision cockpit" that accelerate making strategic decisions?
The Solution 01
Progressive Onboarding
Breaking the learning curve
into manageable moments
Recognizing that a lengthy, one-time tutorial creates cognitive fatigue, I adopted a "Distributed Onboarding" strategy to guide users naturally as they explore the platform.
The Solution 02
Role-based design
tailored to diverse user perspectives
While all users access a unified system, we adopted a context-aware design strategy. We analyzed the primary user for each functional module and tailored the interface to match their specific mental models, technical proficiency, and business goals.
The Operator
ESG manager
Working Sections
Task Delegation & Tracking
Target Setting & KPI Management
Data Validation
Background
A domain expert with high data literacy. They deal with complex compliance standards (GRI, SASB) daily and require granular control.
Design Focus
Efficiency & Density
They need information-dense views to manage workflows quickly without excessive clicking.
Macro & Micro Progress Management
Displays the overarching data collection progress while allowing users to monitor the specific status of individual collection units simultaneously.
Information-Dense Summaries
Prioritizes tabular layouts to help domain experts quickly browse, cross-reference, and verify data points corresponding to specific compliance indicators.
The Contributor
Supplier
Working Sections
Data Submission Portal
Compliance Certification Upload
Background
Low-to-mixed digital literacy. They view data entry as an administrative burden and are prone to errors if the system is confusing. They are often not ESG experts.
Design Focus
Guidance & Simplicity
A wizard-style, step-by-step interface with clear instructions to minimize cognitive load and prevent errors.
Action-Oriented Task List
Recognizing that a supplier's primary goal is task completion, we applied prominent color indicators to pending items, differentiating them from the passive monitoring view used by managers.
Familiar & Task focus Data Entry
To reduce the learning curve and accelerate submission, we replaced standard forms with a familiar, Excel-style spreadsheet layout. We also stripped away irrelevant technical jargon, empowering suppliers to focus entirely on the data entry.
The Decision Maker
Executive
Working Sections
Executive Dashboards
Industry Benchmarking
Risk Overview
Background
High-level strategic thinker with extremely limited time. Low patience for operational details or complex navigation. They care about ROI, risk, and brand reputation.
Design Focus
Clarity & Insight
Visualizations must be "glanceable"—delivering key insights and trends instantly without requiring interpretation.
Top-Down Layout Strategy
Organizes content logically from high-level strategic summaries at the top to operational details at the bottom, matching the executive's mental model.
Purpose-Driven Chart Selection
Selects specific data visualization formats based on the data type, minimizing cognitive load and accelerating the discovery of key insights.
Strategic Use of Color
Utilizes red and yellow indicators to highlight risks and performance gaps instantly.
Applies different color blocks to differentiate data ranges, allowing for quick cross-referencing and data mapping.
The Solution 03
Unified Workflow Standardization
To mitigate the complexity of a multi-module platform, I enforced consistency across the product:
Standardized Patterns
I unified the workflows and UI components for similar operational tasks across different domains (e.g., the "Data Request & Collection" pipelines for ESG, Carbon, and Supply Chain modules).
Impact
This consistency reduced the learning curve for users by reinforcing a shared mental model, while simultaneously lowering technical debt for the engineering team through component reuse.
Harmonized Workflows
Data disclosure processes—whether for ESG or Carbon domains—share a standardized core workflow. This ensures a predictable user experience while retaining the flexibility to adapt to specific contextual needs.
Component Standardization
Uniform UI components are deployed for identical tasks across different flows. For instance, the exact same component set is utilized universally whenever a user needs to select ESG disclosure metrics.
AI Extension
AI-Powered Workflows
Empowering the User Journey
Rather than adopting AI for the sake of novelty, we carefully evaluated the user journey to identify where it could drive the greatest efficiency. We strategically integrated AI assistants into these three specific stages:
Automated Data & Audit Linkage
AI-powered OCR automates high-volume data extraction directly from uploaded files. Crucially, it establishes a direct, clickable link between the extracted data and its source document, ensuring both operational efficiency and complete audit traceability.
Accelerating Report Creation
We leveraged Generative AI to instantly transform structured data into readable narrative text. Coupled with multi-language support, this empowers writers to focus on high-level refinement rather than tedious manual drafting.
Executive Insight
An embedded AI Assistant empowers executives by instantly generating data summaries and industry benchmark comparisons, facilitating faster, data-driven decision-making.
