Single Buyer

Tenaga Nasional Berhad

Website

2025

UI/UX Designer

🧠 Context & Problem

Single Buyer, under Tenaga Nasional Berhad (TNB), plays a critical role in Malaysia’s electricity supply industry—managing the planning and procurement of electricity to ensure a reliable and cost-efficient energy system.

Despite its importance, the official website felt outdated and disconnected from the credibility and professionalism that the brand represents. The existing site posed several challenges:

  • Dense, jargon-heavy content without visual aids to guide comprehension

  • Outdated layout and UI, giving a poor impression of trust and innovation

  • Scattered navigation and unclear information architecture

  • No clear pathway for industry stakeholders, researchers, or the public to engage with the content

The objective of this design proposal was to reposition Single Buyer as a transparent, authoritative, and approachable public entity, while simplifying access to its data, reports, and regulatory functions.

🔍 Research & Insights

To benchmark best practices, I reviewed websites from energy regulators, system operators, and public utilities in both regional and international markets.

Organizations studied:

  • National Grid (UK)

  • ISO New England (US)

  • Energy Commission Malaysia (ST)

  • Singapore’s Energy Market Authority (EMA)

Key Observations:

  • Technical content should be layered and progressively disclosed—not overwhelming on first glance.

  • Sites that clearly serve different groups (e.g., public, industry players, researchers) improve usability.

  • Infographics, clean dashboards, and key data points upfront help explain complex roles.

  • A mobile-optimized experience is essential, especially for referencing reports or updates on-the-go.

These insights helped frame a more intuitive, informative, and modern web experience for Single Buyer.

🧪 Design Process

The proposal followed a strategic approach to rebuild trust and structure the content in a way that reflects the organization’s responsibility and vision.

Information Architecture Strategy

  • Reorganized content under clearer sections: Who We Are, What We Do, Publications & Data, and Resources

  • Designed clear landing pages for key initiatives such as planning, procurement, and performance monitoring

  • Created a stakeholder-specific approach: segmenting information for industry, academia, and the public

Wireframes & Content Mapping

  • Developed low-fidelity wireframes focused on:

    • Hero sections with strong messaging

    • Modular layouts for news, announcements, and reports

    • Dedicated page for Planning Outlook, Fuel Mix, and Annual Reports

Visual Language Direction

  • Proposed a visual identity that combines institutional trust with modern usability:

    • Balanced color palette: blue tones with warm neutrals

    • Open typography and ample white space

    • Iconography and charts to simplify heavy content

🔑 Key Features

The proposal included several design components to help Single Buyer communicate its mission effectively and serve a diverse set of users.

🧭 Simplified Navigation for Diverse Users

  • Clear primary navigation with dropdowns for Planning, Procurement, and Market Performance

  • Searchable document archive for reports, RFPs, and public releases

  • Breadcrumb trails and contextual links for better orientation

📊 Data-Driven Visual Components

  • Embedded charts and infographics to visualize:

    • Electricity demand trends

    • Generation mix over time

    • Procurement allocations and planning timelines

  • Downloadable datasets integrated into the UI for easy access

📰 Transparent & Active Updates

  • Highlighted “Latest Updates” section on the homepage

  • Dynamic content blocks for announcements, regulatory changes, and upcoming tenders

📱 Responsive, Accessible Design

  • Mobile-friendly layouts with large tap targets and collapsible menus

  • WCAG-informed color contrast and typography for readability

  • Lightweight performance optimized for public access on slower connections