Studi Kasus UX | Website Bandung Creative Hub

Anggit Syahril Ramadhan
6 min readNov 19, 2020

--

Kali ini saya akan bahas Studi Kasus untuk sebuah tempat di Bandung yang bernama Bandung Creative Hub.

Studi kasus ini dibuat dalam rangka saya mengikuti Challenge dari Mentify Design Challenge Special #Helarfest2020. Dan juga untuk melatih kemampuan saya dalam menjelaskan proses desain yang telah saya buat.

Oke langsung saja kita mulai dan Selamat membaca…

Latar Belakang

Latar belakang dari case study ini adalah kota bandung yang dikenal sebagai kota kreatif dan ditunjuk oleh UNESCO sebagai anggota baru dari UNESCO Creative Cities Network (UCCN) karena salah satu indikator terpilihnya bandung sebagai kota kreatif dunia berasal dari keberadaan masyarakat Bandung itu sendiri. Karena mereka dinilai menjadi pusat kreativitas yang ada di Bandung.

Dengan masyarakat nya yang kreatif pemerintah kota bandung ber-inovasi membuatkan wadah yang memfasilitasi para pelaku kreatif untuk saling berkolaborasi dan menciptakan sebuah karya, nama dari tempat itu adalah “Bandung Creative Hub” dengan hadirnya gedung creative ini pemerintah kota bandung berharap warga kreatif bandung bisa terdorong untuk mewujudkan mimpinya sesuai minat dan keahlian berkreasi.

Gedung ini resmi dibuka untuk publik pada Desember tahun 2017. Gedung ini menghabiskan dana dengan nilai sekitar Rp 40 M dan menjadi gedung yang terlengkap dan paling canggih di Indonesia.

Warga Bandung kreatif tinggal bawa gagasan saja untuk mewujudkan nya disini. Dengan fasilitas lengkap dan ide yang sangat baik ini Ridwan kamil mengatakan ini bisa membawa pertumbuhan ekonomi kreatif kota Bandung yang sangat besar.

Namun ada satu permasalahan disini , ternyata masih banyak masyarakat yang tidak tahu gedung itu dan fungsi gedung itu tidak tahu secara detail dan bagaimana pemanfaatannya karena informasi detail mengenai gedung ini sangat lah minim atau kurang ter-publish.

Analisa Masalah

berdasarkan asumsi saya, banyak orang yang mengetahui gedung ini khusus-nya urang bandung namun karena kurang ter-publishnya informasi-informasi mengenai gedung Bandung Creative Hub / Bandung Creative Hub ini apa secara detailnya ? apakah tempat nongkrong saja, atau bagaimana ? masih banyak pertanyaan-pertanyaan bagaimana mendapatkan informasi itu apakah harus search di google?

Gambaran Masalah

Berikut gambaran saya mengenai urang Bandung yang masih banyak pertanyaan tentang tempat ini.

  1. Nanda urang bandung mengetahui tempat itu. Namun hanya tau itu gedung tempat anak-anak muda nongkrong hanya sekedar tau bahwa itu tempat nongkrong.
  2. Alfi mengetahui tempat itu untuk mengadakan acara anak anak bandung. Namun lagi-lagi tidak tahu lebih lengkap masih sulit mencari informasi lengkap tentang tempat itu kurang tahu mengenai fasilitas apa saja yang ada didalamnya .
  3. Anton sudah mengetahui fungsi gedung itu untuk wadah kreatifitas anak-anak bandung. Namun anton mengetahui itu waktu awal pembukaan pada tahun 2017 info terkininya tidak mengetahui.
  4. Ananda tinggal di dekat gedung itu sudah pasti tahu dan pernah kesana untuk nongkrong, ananda mengetahui fungsi tempat itu adalah wadah untuk anak anak kreatif dan bisa meminjam tempat. Namun ananda belum tahu bagaimana cara meminjam dan apakah ada persyaratan dan lain-lain.

Kebutuhan User

Dari Masalah diatas, saya mengetahui kesimpulan yang dibutuhkan user. Berikut diantaranya:

  • Informasi Lengkap Mengenai Bandung Creative Hub Seperti deskripsi,menambahkan foto / gambar mengenai fasilitas
  • Fasilitas yang tersedia di Bandung Creative Hub beserta fungsinya
  • Informasi terkini dan terupdate dari Bandung Creative Hub dan tambahan dari saya menambahkan event apa yang sedang dilaksanakan oleh Bandung Creative Hub
  • Penjelasan tata cara peminjaman gedung Bandung Creative Hub

Pemilihan Platform

Asumsi saya untuk data diatas atau orang yang ingin mengetahui tempat itu dan atau bahkan ingin tahu cara meminjam tempat itu akan mencari melalui google search dan ketika di search di google begitu banyak informasi yang keluar membuat user bingung mana informasi yang benar dari sumber nya langsung.

Melihat permasalahan yang ada, Website adalah pilihan yang sangat tepat untuk menjadikan portal informasi mengenai Bandung Creative Hub dan salah satu media untuk memperkenalkan kepada masyarakat luas tidak hanya untuk orang bandung saja bahkan dunia bisa mengetahui melalui website profile sederhana itu.

Wireframe

Pada tahap ini saya tidak membuat sketsa pada kertas dikarenakan waktu nya yang sangat singkat maka saya langsung membuat wireframe pada software Figma.

Berdasarkan yang dibutuhkan oleh user, saya mencoba membuat website ini menjadi 6 page.

Dan berikut adalah wireframe dari landing page

Landingpage

Page 1

  • homepage /hero section — bagian memperlihatkan foto Gedung dan Title dan juga subtitle
  • tentang kita — bagian deskripsi singkat mengenai Bandung Creative Hub
  • fasilitas — bagian memperlihatkan fasilitas yang tersedia di Bandung Creative Hub
  • foto ruang -ruangan / tempat— bagian foto” tempat yang bisa digunakan di Bandung Creative Hub
  • acara tedekat — bagian memberikan informasi acara terdekat yang dilaksanakan di Bandung Creative Hub
  • bch Info update — bagian informasi terupdate mengenai Bandung Creative Hub
  • prosedur peminjaman — bagian menjelaskan tata cara / prosedur peminjaman tempat di Bandung Creative Hub
  • lokasi — bagian memberikan informasi lokasi Bandung Creative Hub berada

berikut adalah wireframe dari informasi Fasilitas dan detail nya

Fasiltas dan Detail

Page 2

  • Nomor 1 informasi ruang fasilitas — bagian memperlihatkan foto fasilitas ruangan apa saja yang tersedia
  • Nomor 2 Detail dari salah satu fasilitas — bagian memperlihatkan detail dari salah satu ruangan dari informasi lantai , fungsi ruangan / tempat dan juga menampilkan foto ruangan

berikut adalah wireframe dari informasi Acara Terdekat dan detail nya

Acara Terdekat dan Detail

Page 3

  • Nomor 1 informasi Acara terdekat — bagian memperlihatkan nama, tumbnail poster acara terdekat apa saja yang ingin diselenggarakan
  • Nomor 2 Detail dari Acara tedekat — bagian memperlihatkan detail dari salah satu acara terdekat seperti poster acara, tanggal dan waktu pelaksanaan dan deskripsi dari acara tersebut

berikut adalah wireframe dari informasi 16 Sub-sektor Kreatif

Subsektor

Page 4

  • informasi sub-sektor — bagian memperlihatkan informasi subsektor apa saja yang tersedia di Bandung Creative Hub

berikut adalah wireframe dari halaman Tentang Kami

Tentang Kami

Page 5

  • informasi tentang kami — bagian menjelaskan apa itu Bandung Creative Hub dan juga ada link untuk submit proposal pengajuan peminjaman tempat.

berikut adalah wireframe dari halaman Kontak Kami

Kontak Kami
  • informasi kontak kami — bagian memperlihatkan informasi kontak yang bisa dihubungi, Waktu Operasional dan juga alamat dari Bandung Creative Hub.

Pembuatan Hi-Fi Design

Setelah membuat Wireframe, kini saatnya mengubahnya menjadi lebih menarik dan berwarna.

Proses high fidelity adalah proses mengubah wireframe yang telah dibuat sebelumnya menjadi tampilan website yang sebenarnya, di tahap ini saya menambahkan konteks pada desain. Mulai dari pewarnaan dan bentuk juga menambahkan copy dan konten yang membuat desain lebih mudah dipahami.

Landing Page
Halaman Informasi > Fasilitas
Halaman Detail Fasilitas
Halaman Informasi Acara Terdekat
Halaman Detail Acara Terdekat
Halaman Informasi 16 Sub-sektor Kreatif
Halaman Tentang Kami
Halaman Kontak Kami

Dengan begitu, diharapkan Website Bandung Creative Hub dapat menyelesaikan masalah yang ada, dan memudahkan masyarakat dalam mencari informasi mengenai Bandung Creative Hub.

Sekian case study dari saya…

Terima Kasih

Akhirnya selesai juga case study ke 2 yang saya buat. Jangan lupa mampir ke case study yang pertama ya….

Case study ini saya buat untuk bahan pembelajaran bagaimana menjelaskan proses desain yang telah saya buat. Semoga bisa terus belajar dan lebih baik lagi.

Saya ucapkan banyak terimakasih kepada mas Dwinawan yang sudah banyak membuat artikel di medium sebagai bahan pembelajaran untuk saya.

Silahkan tuliskan pertanyaan atau saran di kolom komentar agar artikel yang saya buat selanjutnya dapat menjadi lebih baik.

Sekian dan Terima kasih.

“Good design is about process, not product” — Jared Sinclair.

--

--