Loading image 1...

01/02

MHUCoalWebsite&CMS

Portal Korporat dan Keberlanjutan untuk Perusahaan Tambang, Dikerjakan Bersama Cipta Dua Saudara

Client
MHU Coal, Indonesia
Year
2024
Timeline
3 bulan
Category
Pengembangan Web / UI/UX
UI Goal
Menyampaikan operasi tambang lewat sudut pandang keberlanjutan tanpa berubah menjadi arsip brosur.
VISUAL STYLE
Panel visual besar dengan pesan singkat, memberi ruang pada fotografi lapangan.
LAYOUT SYSTEM
Bagian yang disusun mengikuti tema, sehingga pembaca bisa memilih yang relevan baginya.
PRIMARY DEVICE TARGET
Pemangku kepentingan, regulator, komunitas sekitar, dan calon mitra.
MHU Coal Website & CMS
Karya Unggulan

MHU Coal Website & CMS

Portal Korporat dan Keberlanjutan untuk Perusahaan Tambang, Dikerjakan Bersama Cipta Dua Saudara

Gambaran

Portal Korporat dan Keberlanjutan untuk Perusahaan Tambang, Dikerjakan Bersama Cipta Dua Saudara

Portal korporat MHU Coal menyampaikan operasi tambang lewat sudut pandang keberlanjutan, bukan lewat angka produksi. Isinya mencakup ringkasan perusahaan, kerja lingkungan, operasi dan logistik, energi terbarukan, konservasi, warisan budaya, rencana pascatambang, dan pengembangan masyarakat. Javapixa mengerjakannya bersama Cipta Dua Saudara: desain UI/UX, frontend Next.js, dan CMS dengan backend Go.

Tantangan

Masalah

Organisasi industri biasanya perlu menyampaikan banyak hal sekaligus: produksi, lingkungan, komunitas, warisan budaya, dan rencana pascatambang. Tantangan sebenarnya bukan menulis kontennya, melainkan menyusun hierarki informasi supaya situsnya tidak berubah menjadi arsip brosur yang tidak terbaca siapa pun. Tim komunikasi juga harus bisa menerbitkan sendiri tanpa meminta bantuan developer setiap kali.

Solusi

Struktur situs dibangun mengikuti tema, bukan mengikuti struktur organisasi, dengan panel visual besar dan pesan singkat di setiap bagian agar pembaca bisa memilih yang relevan baginya. Frontend memakai Next.js, dengan CMS bertulang punggung Go sehingga tim komunikasi bisa memperbarui konten, laporan, dan profil video sendiri. Desain UI/UX dikerjakan lebih dulu agar hierarkinya sudah selesai sebelum satu baris kode ditulis.

PerjalananVisual

Showcase Proyek

Loading image 1...

Tangkapan Layar 1

Visualisasi proyek dan desain antarmuka

01/02
Navigasi

StackTeknologi

01

Next.js

Framework Web

02

Go

Backend

03

CMS

Manajemen Konten

04

Figma

Desain UI/UX

FiturUtama

[01]

Struktur Berbasis Tema

Bagian disusun mengikuti tema seperti lingkungan, operasi, energi terbarukan, warisan budaya, dan rencana pascatambang, bukan mengikuti bagan organisasi perusahaan.

[02]

Panel Visual dan Pesan Singkat

Tiap bagian dibuka dengan panel visual besar dan kalimat pendek, sehingga pembaca bisa memindai dulu sebelum memutuskan mana yang ingin dibaca lengkap.

[03]

CMS untuk Tim Komunikasi

Konten, laporan, dan profil video dapat diperbarui sendiri oleh tim komunikasi tanpa meminta bantuan developer.

[04]

Profil Video

Materi audio visual disediakan untuk pembaca yang lebih mudah memahami informasi lewat video daripada teks panjang.

[05]

Bagian Lingkungan dan Komunitas

Perlindungan habitat, pembibitan, konservasi air, flora lokal, konservasi, warisan budaya, dan pengembangan masyarakat mendapat ruangnya sendiri.

ProsesKami

Pandangan detail tentang bagaimana kami mewujudkan proyek ini dari konsep hingga kenyataan melalui metodologi kami yang terbukti.

01
Durasi
1 bulan

UI/UX dan Hierarki Informasi

Memetakan seluruh materi yang harus disampaikan, lalu menyusunnya menjadi tema dengan hierarki yang jelas di Figma sebelum masuk ke pengembangan.

Hasil
Peta Konten
Desain UI/UX
Hierarki Tema
02
Durasi
1,5 bulan

Frontend dan CMS

Membangun frontend dengan Next.js dan CMS dengan backend Go, termasuk struktur konten agar tim komunikasi bisa menerbitkan sendiri.

Hasil
Frontend Next.js
CMS dengan Backend Go
Struktur Konten
03
Durasi
0,5 bulan

Konten dan Peluncuran

Mengisi konten awal, menyiapkan profil video, pengujian lintas perangkat, lalu peluncuran bersama Cipta Dua Saudara.

Hasil
Pengisian Konten
QA Lintas Perangkat
Peluncuran
  • 01Konten disusun mengikuti tema, sehingga pembaca bisa langsung menuju bagian yang relevan.
  • 02Tim komunikasi dapat menerbitkan dan memperbarui konten sendiri lewat CMS.
  • 03Profil video disertakan untuk pembaca yang lebih mudah menangkap informasi secara audio visual.
  • 04TODO: lengkapi dengan hasil yang dapat diverifikasi dari klien bila tersedia.

Ingin sesuatu seperti ini?

Berikut layanan Javapixa yang mengerjakan proyek ini.

MHU Coal Website & CMS - Portfolio | Javapixa Creative Studio