PT Etuya Enviro Alfa PT Etuya Enviro Alfa

Situs yang setara dengan kerja kita

Platform buatan Etuya dipakai kementerian dan pemerintah daerah, tetapi etuya.id masih memakai template 2018, belum memuat proyek terbaru, dan sulit dibaca di ponsel. Halaman ini merangkum redesign-nya: tiga arah desain, satu sudah dipilih dan berjalan dalam dua bahasa.

29 sampai 30 September 2026Semua opsi tersedia dalam bahasa Inggris dan IndonesiaLive di etuyadev.my.id/etuya-web

Ringkasan untuk pimpinan

Masalahnya

Situs lama menjual Etuya terlalu murah. CONNECT, CBT/RCBT, RANES, dan ABgI tidak tampil, halaman tidak dirancang untuk ponsel, SEO kosong, dan tautan KOICA sudah mati.

Yang sudah jadi

Tiga prototipe homepage dalam dua bahasa. Opsi B lengkap: Home, About, Services, Work dengan 11 studi kasus bersumber, dan Contact, dengan screenshot dari platform live.

Keputusan yang dibutuhkan

Setujui arah B atau gabungannya, konfirmasi nomor dan email resmi, kirim foto dokumentasi dan logo vektor. Setelah itu versi produksi bisa dimulai.

Tampilan hero Opsi A, Nusantara Signal
OPSI A, GELAP DAN SINEMATIK

Nusantara Signal

"We build the systems behind Indonesia's climate commitments." Peta partikel WebGL berubah menjadi alur PLAN, FUND, TRACK, lalu Signal log berisi platform yang bisa dicek langsung. Kesan: visioner, berskala nasional.

Tampilan hero Opsi B, Field Report
OPSI B, EDITORIAL DAN TERANG

Field Report

"Climate decisions deserve better data." Berwibawa seperti laporan iklim: perjalanan satu aksi iklim dari rencana sampai pelatihan, studi kasus dengan daftar sumber, dan FAQ untuk pengadaan. Kesan: tepercaya, berbasis riset.

Tampilan hero Opsi C, Living Lab
OPSI C, INTERAKTIF DAN CERAH

Living Lab

"Climate policy, running as software." Pengunjung memilih perannya, mencoba demo penandaan anggaran ala CONNECT, lalu membuka platform aslinya. Kesan: praktis, terbukti bekerja.

Kondisi situs sekarang

Hasil audit etuya.id tanggal 29 September 2026. Masalah terbesarnya bukan hanya tampilan: isi situs tertinggal jauh dari kondisi perusahaan saat ini, dan fondasi teknisnya menyulitkan pembaruan.

0,38xskala tampilan di ponsel 375 px (teks 17 px terbaca sekitar 6,5 px)
1tag meta di beranda: tanpa viewport, description, dan Open Graph
5 dari 10proyek di profil 2026 yang sudah tampil di situs
12tautan demo template yang tertinggal di kode
KRITIS

Tidak ramah ponsel

Tidak ada tag meta viewport. Di ponsel 375 px, halaman dirender selebar 981 px lalu diperkecil ke skala 0,38, sehingga teks nyaris tidak terbaca tanpa zoom. Padahal banyak pejabat dan mitra membuka tautan dari WhatsApp di ponsel.

KRITIS

Portofolio tertinggal dari Company Profile 2026

CONNECT (Kemenkeu), dashboard CBT/RCBT, RANES (Bappenas dan UNDP), Marine Debris E-Learning (KLHK dan GIZ), dan ABgI Knowledge Hub belum ada. Kemenkeu dan UNDP belum tercantum sebagai mitra. Proyek paling bergengsi justru tidak terlihat.

KRITIS

SEO hampir nol

Beranda hanya punya meta charset: tanpa meta description, Open Graph, maupun data terstruktur. Semua halaman proyek memakai judul yang sama persis, jadi Google dan pratinjau WhatsApp atau LinkedIn tidak bisa membedakannya.

TINGGI

Sisa template masih tertinggal

Situs dibangun dari template SaaSLand (DroitThemes). Masih ada 12 tautan ke demo template (Digital Shop, Home Gadget, dan lain-lain) di kode, dan halaman detail proyek memuat gambar dari server demo template.

TINGGI

Tautan dan gambar rusak

Halaman SIMBANGDA (work_02.html) menampilkan "File not found", gambar iphonex1.png di beranda gagal dimuat (404), dan tombol "Visit Website" proyek KOICA mengarah ke koicaindonesia.id yang domainnya sudah tidak terdaftar (NXDOMAIN).

TINGGI

Tautan ke toko template

Halaman detail proyek masih memuat tautan "droitthemes.net/buy/saasland" (halaman pembelian template) dan gambar dari server droitthemes.com. Pengunjung yang jeli akan melihat situs ini dibangun dari template.

TINGGI

Kontak tidak konsisten

WhatsApp di situs 0821-2529-9990, sedangkan di PDF 2026 0821-3456-1990. Email di situs info@etuya.id, di PDF etuyaenviroalfa@gmail.com. Alamat kantor Permata Hijau tidak muncul sama sekali di situs.

TINGGI

Profil perusahaan tidak tersampaikan

Tidak ada halaman About (menu "About" hanya melompat ke bagian layanan). Empat disiplin tim, cara kerja, alamat, dan posisi "Data-to-Nature Nexus" tidak dijelaskan. Belum ada versi Bahasa Indonesia.

SEDANG

Fondasi teknis usang

HTML statis dengan jQuery 3.2.1, Bootstrap 4, WOW.js, Slick, Isotope, dan Typed.js. Tidak ada CMS, sehingga setiap proyek baru harus ditambahkan manual oleh developer.

SEDANG

Identitas visual tidak sejalan

Palet biru, merah muda, dan ungu berasal dari template, sementara profil 2026 memakai navy, hijau, dan motif alam-data. Logo hanya tersedia sebagai PNG 156x40 px, jadi buram di layar retina. Perlu versi SVG.

SEDANG

Copy perlu disunting

"Our Colaboration Partner", "Let's Our Work Talk!", dan "developments transformation" terbaca kurang profesional bagi mitra internasional. Hero "Cope Climate Change with Technology" juga janggal secara tata bahasa.

SEDANG

Visual generik

Ilustrasi ikon stok dan mockup perangkat tidak memperlihatkan kekuatan asli Etuya, yaitu platform nasional yang benar-benar dipakai kementerian.

Bahan baru dari Company Profile 2026

PDF yang kamu kirim menjadi sumber utama konten. Semua fakta di prototipe diambil dari PDF ini dan dari situs sekarang, tanpa tambahan klaim.

  • Positioning"Driving Digital Transformation for Environmental and Economic Resilience" dan "Multidisciplinary Expertise at the Data-to-Nature Nexus".
  • Empat disiplinTeknologi informasi, meteorologi dan geografi, energi terbarukan, serta teknik sipil.
  • Tiga layananApplication Development, Data Dashboard and Analysis, Strategic Environmental Consulting (integrasi kebijakan dan kerangka M&E).
  • Proyek unggulan baruCONNECT (machine learning untuk penandaan anggaran iklim, Kemenkeu), CBT/RCBT, RANES (Bappenas dan UNDP), System Dynamics berbasis Powersim di AKSARA, Marine Debris E-Learning (KLHK dan GIZ).
  • Sembilan mitraEmpat kementerian (Bappenas, Kemenkeu, Kemendagri, PUPR) dan lima lembaga internasional (ADB, GIZ, UNDP, WRI, KOICA).
  • Kantor dan kontakBelleza BSA lantai 1 unit 106, Permata Hijau, Jakarta Selatan. Telepon (021) 5064 5040 dan +62 821 3456 1990.
Logo Etuya versi navy
Logo Etuya versi putih

Logo baru (dengan daun di huruf e) diambil dari PDF dan dibuat transparan untuk prototipe. Untuk produksi tetap perlu file vektor asli.

#14284BNavy judul
#2D366BNavy logo
#1577BDBiru situs
#139068Hijau profil
#58FAC3Hijau glow

Tiap opsi memakai bagian berbeda dari palet ini: A hijau glow di atas gelap, B biru situs di atas kertas, C gradien penuh sebagai karya visual.

Bahan baru: screenshot dari platform live

Diambil langsung dari halaman publik pada 29 September 2026 dengan Chrome headless, tanpa login. Screenshot ini dipakai di studi kasus dan galeri Opsi B, sehingga pengunjung bisa langsung mencocokkan dengan platform aslinya lewat tombol "Visit the platform".

Beranda CONNECT
CONNECT, berandaconnect.kemenkeu.go.id/beranda
Dasbor penandaan anggaran iklim di CONNECT
CONNECT, dasbor CBTconnect.kemenkeu.go.id/beranda/#charts
Pusat Dokumentasi Kebijakan Iklim CONNECT
CONNECT, publikasiconnect.kemenkeu.go.id/publikasi
Halaman Tentang CONNECT
CONNECT, tentangconnect.kemenkeu.go.id/tentang
Beranda ABgI
ABgI, berandaabgi.or.id
Sebaran potensi dan instalasi biogas
ABgI, peta biogasabgi.or.id/data-information
Kalkulator potensi biogas skala industri
ABgI, kalkulator biogasabgi.or.id/kalkulator-biogas
Publikasi bioenergi dan biogas
ABgI, publikasiabgi.or.id/publikasi

Temuan saat mengecek platform live

Bukan bagian dari redesign, tapi penting untuk tim karena platform ini ditampilkan sebagai portofolio.

CONNECT produksi

Beberapa panel di beranda gagal dimuat. Endpoint rekap_anggarandetail_total_pengurangan_kerugian_* di backend-connect.kemenkeu.go.id mengembalikan 404, data_anggaran_kl_by_jenis_sektor diblokir CORS, dan beranda.js melempar beberapa error. Satu angka utama tampil "N/A". Kemungkinan versi FE dan BE produksi tidak sejalan.

ABgI

Halaman abgi.or.id/map/ mengembalikan HTTP 500, dan beranda memunculkan satu error JavaScript. Peta di halaman Data dan Informasi tetap tampil.

AKSARA (pprk.bappenas.go.id)

Dilindungi tantangan anti-bot Cloudflare, jadi tidak bisa (dan tidak boleh) diambil otomatis. Kalau ingin screenshot AKSARA terbaru, ambil manual dari browser yang sudah login, lalu kirimkan untuk dimasukkan.

KOICA map

Domain koicaindonesia.id sudah tidak terdaftar. Di situs baru proyek ini tetap tampil dengan screenshot lama tanpa tautan keluar.

RANES dan Marine Debris

Tidak ditemukan URL publik. Tetap memakai tampilan tipografis dan potongan gambar dari company profile.

Struktur situs baru

Situs lama hanya satu halaman panjang ditambah tujuh halaman proyek. Struktur baru memberi setiap proyek halaman studi kasus sendiri, menambahkan halaman profil yang sesungguhnya, dan hadir dalam dua bahasa.

etuya.id /en /id
  • HomeCerita singkat, bukti, dan ajakan kontak (lihat alur di kanan)
  • AboutProfil, Data-to-Nature Nexus, 4 disiplin, cara kerja, kantor
  • ServicesSatu halaman per layanan, dengan proyek terkait
    • Application Development
    • Data Dashboards & Analysis
    • Strategic Environmental Consulting
  • WorkIndeks dengan filter area, mitra, dan jenis layanan
    • 10 studi kasusAKSARA, CONNECT, CBT/RCBT, RANES, System Dynamics, Climate Resilience, Waste Calculator, AKSARA E-learning, Marine Debris, KOICA Map
  • InsightsRiset dan dokumen kebijakan, kegiatan capacity building
  • Partners9 mitra dan peran Etuya di tiap kerja sama
  • ContactFormulir, WhatsApp, telepon, peta kantor
Sudah ada, diperbaruiHalaman baru

Alur cerita homepage

  1. Siapa dan untuk apaHero: platform data iklim untuk Indonesia.
  2. Bukti kepercayaan9 logo mitra tepat di bawah hero.
  3. Apa taruhannyaTarget NDC 31,89% dan 43,20% pada 2030, dan mengapa itu persoalan data.
  4. Siapa kamiEmpat disiplin di pertemuan data dan alam.
  5. Apa yang kami kerjakanTiga layanan.
  6. BuktinyaEkosistem AKSARA, CONNECT, dan proyek lain.
  7. Cara kerjaDari regulasi sampai kode yang berjalan, lalu pelatihan pengguna.
  8. AjakanSatu label kontak yang konsisten, WhatsApp, email, dan alamat.

Template studi kasus: ringkasan (mitra, peran Etuya, teknologi) lalu konteks dan regulasi, apa yang dibangun (modul), arsitektur teknis, galeri, hasil yang bisa diverifikasi, proyek terkait, dan ajakan kontak. Migrasi: URL lama seperti work_01.html diarahkan (redirect 301) ke /en/work/aksara dan seterusnya supaya peringkat pencarian tidak hilang.

Tiga opsi secara detail

Semua opsi berbagi konten, alur cerita, dan aturan kualitas yang sama: responsif sampai lebar 360 px, mode gerak dikurangi (prefers-reduced-motion), kontras AA, dan SEO dasar lengkap.

OPSI A

Nusantara Signal

Konsep
Etuya sebagai mesin data di balik aksi iklim nasional. Tampilan gelap sinematik yang sejalan dengan slide gelap di profil 2026 (navy dan hijau bercahaya).
Momen puncak
Satu sistem partikel WebGL yang terus hidup: peta Indonesia berubah menjadi skenario emisi (PLAN), tiga wadah mitigasi, adaptasi, dan co-benefit (FUND), jaringan pelaporan (TRACK), lalu daun digital di penutup.
Susunan
Hero peta partikel, marquee mitra, cerita target lalu PLAN, FUND, TRACK dengan fakta bersumber, sejarah AKSARA dari 2012 sampai modul-modulnya, indeks proyek dengan pratinjau, alasan memilih ETUYA, cara kerja, Signal log platform live, FAQ, penutup daun. Tersedia dalam EN dan ID.
Teknologi
Three.js + GLSLGSAP ScrollTriggerSplitTextFlipDrawSVGLenisGeist
Kekuatan
  • Kesan pertama paling kuat dan paling "teknologi terbaru".
  • Cerita PLAN, FUND, TRACK merangkum semua proyek dalam satu alur.
Perlu diperhatikan
  • Paling berat untuk laptop kantor lama dan HP kelas menengah.
  • Teks di latar gelap perlu disiplin kontras; produksi paling mahal.
OPSI B

Field Report

Konsep
Etuya sebagai konsultan lingkungan yang berwibawa. Terasa seperti membuka laporan iklim dari lembaga kelas dunia: tenang, tegas, dan mudah dibaca pejabat maupun donor.
Momen puncak
Halaman berubah menjadi bidang biru penuh. Kalimat komitmen NDC Indonesia terisi kata demi kata saat di-scroll, lalu terbuka ke foto hutan mangrove. Di hero, kursor menjadi lensa yang mengubah garis kontur topografi menjadi titik data.
Susunan
Hero lensa topografi, mitra, manifesto NDC dengan skala 38 provinsi dan 514 kabupaten/kota, perjalanan "One climate action, followed", spread proyek dengan fakta bersumber, angka (karya kami dan konteks Indonesia), alasan memilih ETUYA, platform yang bisa dicek, penutup. Ditambah halaman About, Services (5 cara bekerja sama, 8 FAQ), Work dengan 11 studi kasus bersumber, dan Contact, semuanya EN dan ID.
Teknologi
Canvas 2D generatifMarching squaresCSS scroll-driven animationGSAP ScrollTriggerNewsreader variableSchibsted Grotesk
Kekuatan
  • Paling kredibel dan paling mudah dibaca, sangat cocok untuk kementerian dan lembaga donor.
  • Ringan dan paling mudah dikembangkan ke halaman dalam.
Perlu diperhatikan
  • Kesan "teknologi" lebih halus dibanding A dan C.
  • Bergantung pada foto berkualitas; idealnya foto dokumentasi Etuya sendiri.
OPSI C

Living Lab

Konsep
Etuya sebagai studio produk yang platformnya benar-benar berjalan di kementerian. Cerah, modern, dan mengajak pengunjung mencoba sendiri.
Momen puncak
Demo "Tag a budget line": pengunjung mengetik atau memilih mata anggaran (misalnya "Rehabilitasi mangrove di wilayah pesisir") dan melihat kata-katanya dipilah ke mitigasi, adaptasi, atau co-benefit. Diberi label jelas sebagai ilustrasi dari ide CONNECT.
Susunan
Hero gradien shader dengan screenshot asli CONNECT dan ABgI, bento Plan, Fund, Track, Teach, "Built for your role" (4 peran), demo penandaan anggaran, peta platform dengan dialog dan galeri, cara kerja, "Verify it", 8 FAQ, panel ajakan. Tersedia dalam EN dan ID.
Teknologi
WebGL shaderView Transitions APIPopover / dialogContainer queriesClipboard APIGSAPPlus Jakarta Sans
Kekuatan
  • Paling meyakinkan soal kemampuan teknis karena pengunjung bisa mencoba.
  • Font Plus Jakarta Sans buatan foundry Indonesia (Tokotype) memberi sentuhan lokal.
Perlu diperhatikan
  • Gaya produk bisa terasa seperti startup jika tidak dijaga wibawanya.
  • Demo interaktif perlu dirawat dan diuji saat konten berubah.

Bantu memilih

Geser bobot sesuai prioritas Etuya. Nilai tiap opsi (skala 1 sampai 5) adalah penilaian desain saya setelah meninjau prototipe, bukan data pengguna. Bawa ke diskusi tim sebagai titik awal.

A. Nusantara Signal0.0
B. Field Report0.0
C. Living Lab0.0

Perbandingan singkat

AspekA. Nusantara SignalB. Field ReportC. Living Lab
Kesan yang dibangunCanggih, visioner, skala nasionalBerwibawa, riset, tepercayaInovatif, praktis, terbukti bekerja
TemaGelap, hijau glowTerang kertas, biru kobaltTerang, gradien merek
Animasi utamaPartikel WebGL yang berubah bentuk mengikuti scrollKontur topografi generatif, isian kata demi kata, scroll horizontalShader gradien, kartu 3D, demo interaktif, transisi tampilan
Bobot halamanPaling berat (Three.js dan data peta)Paling ringanSedang
Cocok untuk halaman dalamPerlu versi yang lebih tenangSangat cocok, sistemnya siap dipakai ulangCocok untuk studi kasus produk
Perkiraan usaha produksiTertinggiTerendahMenengah

Teknologi untuk versi produksi

Tim frontend Etuya sudah memakai React, TypeScript, Tailwind, dan Vite. Rekomendasinya memanfaatkan keahlian itu tanpa mengorbankan kecepatan dan SEO situs profil.

Astro + React islandsHalaman statis yang sangat cepat untuk SEO, dengan komponen React hanya di bagian interaktif. Alternatif: Next.js App Router.
Tailwind CSS v4 + design tokensWarna, tipografi, dan radius sebagai variabel CSS, sama persis dengan prototipe terpilih.
GSAP + LenisScrollTrigger, SplitText, dan Flip kini gratis penuh. Three.js hanya dimuat bila opsi A dipilih, dan dimuat belakangan (lazy).
CMS headlessSanity, Payload, atau Strapi supaya tim bisa menambah proyek, publikasi, dan mitra tanpa developer. Awal yang lebih murah: Astro Content Collections + MDX.
Bilingual EN dan IDURL /en dan /id dengan hreflang, konten dikelola per bahasa di CMS.
SEO dan migrasiMeta dan Open Graph per halaman, JSON-LD Organization, sitemap.xml, redirect 301 dari URL lama.
Gambar dan asetAVIF dan WebP responsif otomatis, logo SVG, foto dokumentasi asli Etuya menggantikan foto contoh.
HostingCloudflare Pages, Vercel, atau Netlify: CDN global, HTTPS, dan pratinjau untuk setiap perubahan.
Standar kualitasTarget Lighthouse 90+, LCP di bawah 2,5 detik, WCAG 2.2 AA, dan dukungan prefers-reduced-motion.

Langkah berikutnya

Perkiraan kasar untuk 1 sampai 2 developer. Durasi akhir tergantung opsi yang dipilih dan kesiapan konten.

MINGGU 1Putuskan dan siapkan kontenPilih opsi atau kombinasi, finalkan copy EN dan ID, kumpulkan foto dan logo vektor.
MINGGU 2Design system dan halaman kunciHome, indeks Work, template studi kasus, About, Contact.
MINGGU 3 SAMPAI 5BuildAstro, CMS, animasi, bilingual, formulir kontak, dan isi 10 studi kasus.
MINGGU 6Uji dan rilisUji perangkat, aksesibilitas, dan performa, redirect URL lama, lalu rilis.

Yang perlu dikonfirmasi dari tim Etuya