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 two 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 user research, relying on SME collaboration and competitive analysis to define core user scenarios. Based on the research, we got this core problem:
Core Problem
Corporates are drowning in fragmented data without clear compliance guidance in ESG reporting.
We translate this into insights:
Insights
Corporates need professional guide and efficient collection tool in ESG reporting.
For the MVP, my design strategy centered on clear value proposition realization and establishing user trust from the first touchpoint.
I complemented a simplified, friction-free workflow that ensures a seamless first-use experience.
Clear Start point
A CTA-driven landing experience to promote immediate user activation.
Guided Pipeline
A linear workflow that leads users seamlessly from select standard frameworks to final disclosure.
Streamlined Data Entry
Divided lengthy collection forms into separate cards, removed the hierarchy of indicators to help users focus on completion and 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
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
ESG Literacy Level
High
Platform Time
Daily
Primary Goal
Compliance &
Task Management
Background
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
After users reported a lack of focus on the dashboard, I researched the underlying data collection process and identified a critical insight: users prioritize tracking progress for the active reporting period over historical or aggregate data.
Before
Consolidating all disclosure periods into a single view lacked clear prioritization.
After
A focused single-period interface defaults to the current disclosure period, highlighting completion status for an at-a-glance overview.
Customized Dashboard
Side-by-side layout pairs data selection with live previews, making sure every adjustment is visible and predictable.
Translating Data Density into Intuitive Clarity
Avoided data overload by grouping information into distinct viewing scenarios, enabling multi-format data exploration on a single page.
Offload Mundane Tasks to AI Agent
We introduced an AI assistant to automate routine tasks, such as tracking submission progress for organizational boundaries. This allows users to stay on top of the reporting cycle and nudge unsubmitted entities with a single click, saving them valuable time.
We ensure user agency by keeping a "human-in-the-loop"—all AI-driven actions must be explicitly confirmed by the user before proceeding.
The Contributor
Supplier
ESG Literacy Level
Low
Platform Time
Periodically
Primary Goal
Task Execution
Background
They view data entry as an administrative burden and are prone to errors if the system is confusing.
Design Focus
Guidance & Simplicity
A wizard-style, step-by-step interface with clear instructions to minimize cognitive load and prevent errors.
Familiar & Task focus Data Entry
Data collection is a critical section for our users. But user feedback highlighted major bottlenecks in our data collection process. Analysis revealed two primary issues:
Steep Learning Curve
Infrequent users (suppliers) found the software counter-intuitive, leading to frequent inquiries.
Poor Discoverability
Essential tools were scattered, leading to inefficient, manual processes.
Embedding AI Agent - OCR tools 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.
The Decision Maker
Executive
ESG Literacy Level
Low
Platform Time
Occasionally
Primary Goal
ROI & Strategy
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.
AI-Augmented
Decision Making
An embedded AI chatbot empowers executives by instantly generating data summaries and industry benchmark comparisons, facilitating faster, data-driven decision-making.
The Solution
Designing for Consistency
Unified Home Experience for Diverse Users
Design Strategy
To streamline a multi-stakeholder system with minimal dev effort, I restructured the underutilized homepage to serve diverse user personas. Addressing feedback on system complexity, I audited workflows and isolated universal “Personal Tasks” from role-specific “Corporate Tasks”.
Testing & Iteration
Following testing of a graphical workflow and progress tracker, I opted to retain legacy entry points. Validations proved that detailed data-collection progress cluttered the information for non-ESG managers, who benefit more from a simplified, task-driven interface.
A/B test version
Final design
Unified Workflow & Design Language
Meanwhile, 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.
Consistent Design Languages
As ESGhub grew comprehensive and complex, it is vital to build design systems to make sure the design language of the product consistency.
