Categories
Design & Development

Proses Redesign Web, Studi Kasus Spektakel.id

Kami memilih menggunakan Laravel. Fitur-fiturnya modern, salah satu framework MVC yang paling mudah dipelajari.

Banyak diantara teman-teman tahu (lebih banyak lagi yang tidak), bahwa sejak 2016, saya mendedikasikan sebagian besar waktu untuk mengembangkan sebuah platform web untuk seni budaya Indonesia: spektakel.id

Di tahap awal pengembangan web spektakel, tadinya web tersebut dibangun dengan Native PHP – mySql, tanpa framework, dengan tambalan jQuery di banyak tempat. Secara fungsi, awalnya web spektakel bertujuan untuk mendata acara-acara seni budaya dari seluruh Indonesia, mulai dari kegiatan festival budaya, tradisi, ritual, sampai gigs Punk Rock underground yang terdapat di balai desa nun jauh di pelosok.

Seiring berjalannya waktu, spektakel juga mulai mengeluarkan produk yang terkait dengan wisata seni budaya, kami namai sebagai Plesir!. Di luar itu, kami juga rutin menulis isu-isu ringan terkait budaya Indonesia, utamanya tentang budaya di ranah keseharian masyarakat. Outlet artikel-artikel ini di tempatkan di platform blog.

Mengelola tiga subdomain yang berbeda adalah hal yang cukup merepotkan. Memantau performa, analytics, optimasi search console, dan sebagainya. Tercetuslah ide untuk melakukan perombakan besar-besaran untuk platform ini. Saya ingin menyatukan semua produk spektakel dalam satu atap, sekaligus membangunnya dengan framework demi kemudahan pengembangan skala besar ke depan.

Ya, kami tidak melakukan revamp, melainkan redesign.1website redesign refers to a complete overhaul of the site. Assessing it’s navigation, it’s design, it’s call to actions – really everything that could be re-assessed with a view to giving a more effective user experience. With a revamp, your website structure could remain the same or maybe some new pages, corporate colours etc could be incorporated.

Before Redesign

Ini penting! Sebelum proses mendesain dimulai, kami melakukan doa bersama terlebih dahulu. Biar berkah.

Berikutnya adalah mulai menentukan struktur baru website. Akan seperti apa fungsi web dengan bentuk baru ini? Dalam konteks platform web spektakel yang sudah berjalan sebagai direktori kegiatan budaya, bagaimana data yang ada diperlakukan? Bagaimana dengan bentuk konten baru seperti artikel, foto, serta video? Bagaimana dengan kemungkinan membuka akses bagi member untuk mengirimkan tulisan, foto, dan sebagainya?

Pertanyaan-pertanyaan di atas cukup panjang juga proses pengambilan keputusannya. Setelah beberapa kali rapat, akhirnya baru bisa mulai terlihat berbagai kemungkinan struktur website nya. Dari hasil rapat-rapat itu, tampak jelas bahwa struktur database konten akan sangat berubah. Relasi-relasi antar tabel banyak juga yang berubah. Salah satu relasi tabel yang sangat merepotkan saat itu ialah relasi tabel user dan konten. Karena awalnya, web spektakel hanya melakukan input dari sisi admin, sedangkan di bentuk baru ini, entry bisa dilakukan oleh siapa saja yang mendaftar. Tugas admin dan editor adalah mengkurasi semua entry tulisan atau foto yang diunggah oleh pengguna.

Mulai Mendesain

Setelah struktur berhasil dikunci, tahap mendesain baru bisa dilakukan. Kami mulai menentukan prioritas-prioritas sesuai dengan hierarki informasi yang telah disepakati. Mana bagian yang harus tampil di bagian above the fold? Blok informasi apa yang harus muncul setelahnya? Apa panggilan aksi nya? Bagaimana konten video ditampilkan di halaman muka? Bagaimana dengan menu?

Karena struktur sudah dikunci terlebih dahulu, semua pertanyaan terkait keputusan desain tersebut bisa lebih mudah dijawab. Dalam proses mendesain kami jadi lebih leluasa untuk bermain di style dan identitas produk. Kami masih menerapkan pola lama dalam mendesain web ini, belum memakai design system, atau memutuskan desain dengan paradigma atomic design, misalnya.2A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

ilustrasi design system
Design homepage spektakel.id

Dari Desain ke Koding

Proses desain dan coding sebetulnya berjalan secara simultan. Walaupun memang untuk bagian front-end harus menunggu desainnya dikunci dulu.

Untuk framework, kami memilih menggunakan Laravel. Fitur-fiturnya modern, salah satu framework MVC yang paling mudah dipelajari. Lagipula untuk kemudahan kerja kolaborasi, Laravel masih jadi pilihan yang sangat baik. Belum lagi kemudahannya untuk dikembangkan bersama Vue, dan fitur mixing nya yang memudahkan mengkompilasi file-file css serta js.

Yang menjadi salah satu tantangan terberat kami dalam proses awal redesign adalah pemindahan database, serta penyesuaiannya dengan struktur baru. Seperti yang telah disebut sebelumnya, akan ada banyak relasi antar tabel yang mesti dibuat. Untungnya Laravel menawarkan banyak kemudahan dalam membuat relasi antar model, baik one to one, one to many, maupun many to many.

Salah satu hal yang saya syaratkan dalam pengerjaan pemindahan database baru ini adalah menyepakati semua nama tabel, model, serta controller sesuai dengan konsensus yang umum dipakai oleh komunitas Laravel. Ini untuk memudahkan kerja-kerja kolaboratif di kelak kemudian hari.

Keseluruhan proses dari mulai rapat konsep, mulai mendesain, hingga koding, kurang lebih memakan waktu satu tahun lamanya. Itu pun karena terbentur oleh pekerjaan-pekerjaan lain. Proses yang panjang, melelahkan, namun menyenangkan.

Pelajaran penting yang bisa saya ambil dari semua proses ini: (1) Menentukan arah produk itu mesti disepakati dan ditaati sejak awal. (2) Tidak ada ide yang brilian. Sesederhana apapun sebuah ide, kalau eksekusinya baik, itu sudah sangat bagus. (3) Bekerja dengan framework yang telah teruji, dengan komunitas yang berkembang dan aktif. Sebagai developer, kita tidak perlu pusing sendirian. Komunitas yang aktif sangat membantu dalam memecahkan masalah. (4) Taati konsensus, penamaan nama model, class, controller, nama tabel, dan sebagainya. Ini akan memudahkan pengerjaan. Juga membantu saat memerlukan bantuan dari komunitas.

N.B

Saya berasumsi bahwa tiap design yang dibuat oleh tim kami pasti sudah memakai paradigma mobile first. Responsive web itu mutlak!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.