Summary
CLIENT
GIZ - Deutsche Gesellschaft für Internationale Zusammenarbeit
Bonn and Eschborn Germany
Mission
SIPET was conceptualized as a collaborative platform to support Southeast Asian countries in their transition toward sustainable energy systems. Backed by GIZ, the initiative focuses on fostering dialogue, knowledge sharing, and stakeholder engagement across governments, development agencies, the private sector, and academia. The platform’s mission is to drive actionable insights and cooperation around decarbonizing the power sector, in alignment with national climate commitments.
Services
User Experience Design
Information Architecture
UX Research & Documentation
User Flow Design
Wireframing & Prototyping
Interaction Design
UI Design (High-Fidelity Screens)
Accessibility & Usability Considerations
Design Handoff & Developer Collaboration
Cross-Department Team Communication
My Contributions
As a UX Designer, I led the user experience design of the SIPET platform, working closely with stakeholders from GIZ and partner organizations to translate complex energy transition goals into a user-friendly digital interface. My responsibilities included conducting stakeholder interviews, creating user personas, defining information architecture, and designing intuitive user flows and wireframes. I ensured that the platform’s layout and navigation aligned with the diverse needs of regional users — from policymakers to researchers. While I did not handle development, I collaborated with the technical team to ensure the final output aligned with the design vision.
DESIGNING THE Portal
Discovery
The initial phase focused on understanding SIPET’s mission to serve as a collaborative platform for stakeholders involved in Southeast Asia's energy transition. We engaged with key stakeholders from GIZ and partner organizations to gather insights on user needs, content expectations, and the functional objectives of the platform. This discovery process included reviewing reference materials, analyzing similar global initiatives, and identifying the priorities of government officials, researchers, and energy professionals who would use the platform.
The Process – Step 1
Planning the Portal Structure
With a clear understanding of the platform’s goals and target users, we moved on to defining the portal’s structure. We mapped out different user roles and access levels — ensuring that the platform’s navigation would serve both information seekers and contributors. We created detailed information architecture, wireframes, and flowcharts to visualize how users would interact with key features such as resource libraries, and various interactive tools. The design emphasized clarity, usability, and accessibility across diverse user groups.
Wireframe
After finalizing the portal structure and user flows, I developed high-fidelity wireframes that included visual elements and branding alignment — as requested by the stakeholders. These wireframes helped communicate not just layout and functionality, but also the look and feel of the platform from the very beginning.
The focus was on creating a clean, intuitive interface for accessing key content areas such as energy policies, regional reports, stakeholder discussions, and upcoming events. The high-fidelity designs made it easier for stakeholders to visualize the final output and provide meaningful feedback early in the process. These designs also streamlined communication with the development team and reduced friction during implementation.
UI Design
Following the high-fidelity wireframes, I created the complete UI designs for the SIPET platform, ensuring visual consistency, clarity, and alignment with GIZ’s branding. The goal was to create a clean, professional interface that could support a wide range of content while remaining accessible to stakeholders from various backgrounds.
While some visual guidelines were already defined, I refined and expanded the design system — including color palette, typography, iconography, and components — to suit the needs of the platform. The final UI emphasized usability, accessibility, and a structured layout that supports dense information without overwhelming users. These designs were handed off with detailed specifications and assets to the development team for implementation.
DESIGNING THE Admin Panel
Discovery
The discovery phase for the SIPET Admin Panel focused on identifying the needs of content managers, project leads, and administrators who would oversee the platform’s backend operations. We collaborated closely with the GIZ team and technical stakeholders to understand how content would be uploaded, moderated, and updated regularly across multiple sections of the platform.
Key areas explored included access control, content approval workflows, data categorization, and integration with external knowledge sources. This phase also involved reviewing how similar platforms handled admin functions and identifying gaps that SIPET’s admin interface needed to fill to support efficient, large-scale content management.
The Process – Step 2
Planning the Portal Structure
Based on the insights gathered, I defined the structure of the Admin Panel by mapping out roles and permissions for different types of administrators — such as editors, reviewers, and super admins. I also outlined task flows for managing resources like policies, discussions, events, and multimedia content.
I created functional flow diagrams and content grouping strategies to ensure clarity and ease of use within the panel. The structure was designed to minimize complexity while supporting scalable content operations, enabling the admin team to manage the dynamic nature of the SIPET platform efficiently.
Development, Test and Launch
Dev Collaboration
Once the designs were finalized, I worked closely with the development team to ensure accurate implementation of the UI components and admin functionalities. I provided detailed design specifications, assets, and behavior notes using tools like Figma, and joined sprint planning meetings to align on priorities.
We followed an agile process with regular check-ins and design walkthroughs, where I clarified user flows, interactions, and responsive behavior. I also reviewed staging builds to flag inconsistencies and provided feedback to maintain visual and functional integrity across the platform.
The Process – Step 3
usability testing
Before launch, we conducted multiple rounds of internal and stakeholder-led usability testing to validate the admin panel’s workflows and overall user experience. The focus was on ensuring clarity in content uploading, user role management, and approval flows.
Feedback was gathered from GIZ staff and content managers, which led to several refinements — including improved navigation hierarchy, visual alerts for pending actions, and tooltips for key functions. These iterations helped make the platform more intuitive and user-friendly for non-technical administrators.
Training documentation
To support platform handover and long-term usage, I created comprehensive training materials tailored for different admin roles. This included video walkthroughs, step-by-step manuals with annotated screenshots, and quick-start guides for recurring tasks.
These resources were designed to onboard new users quickly and reduce dependency on the core development or design team. We also conducted live demo sessions with the GIZ team to walk them through critical workflows, ensuring a smooth transition and confident platform adoption.
maintenance of THE Portal
Incorporate new modules
As part of the portal’s continuous evolution, we added new tools under Power Sector Resources to enhance the platform’s value. These modules present the progress of the energy transition in Indonesia, Philippines, Thailand, and Vietnam across multiple indicators. Built on the archetype framework, they reflect how power sectors can move from the status quo toward improved climate performance, supply security, and affordability. The tools also address key technical, economic, political, social, and institutional challenges to support the shift to a clean, secure, and affordable power system.
The Process – Step 4
Refine the existing website
With a clear understanding of the platform’s goals and target users, we moved on to defining the portal’s structure. We mapped out different user roles and access levels — ensuring that the platform’s navigation would serve both information seekers and contributors. We created detailed information architecture, wireframes, and flowcharts to visualize how users would interact with key features such as resource libraries, and various interactive tools. The design emphasized clarity, usability, and accessibility across diverse user groups.
