SPORTBEAT
Monggopesen Design Challenge #1
Halo medium readers, kali ini artikel nya bakalan panjang banget jadi terimakasih sekali untuk yang nanti baca artikel ini sampai selesai.
Jadi beberapa waktu kebelakang, atasan saya ngasih saran buat bikin challenge di team design monggopesen, selain buat latihan Ui/Ux nya lebih terarah, juga biar komunikasi antara team design lebih bagus lagi.
Sehari setelah itu saya dan Rahmat Raditya langsung bikin Roulette jadi kita pilih satu nomor kemudian diacak nanti akan keluar nomor random yang isinya Kategori dan Pattern nya apa, dan kebetulan kemarin dapet kategori Health & Fitness dengan pattern Event.
Okedeh dari situ sel-sel otak langsung ngumpul ngadain rapat buat brainstorming, yang akhirnya terbayang satu ide yang mau dibahas, yaitu aplikasi portal untuk event-event olahraga, terus di portal itu kita bisa;
- Lihat event apa aja yang ada di bulan ini.
- Detail event tersebut (tanggal, jam, lokasi, map dll).
- Bisa beli tiket event nya.
Nah dari ide dasar itu mulai ditentuin satu user flow yang mungkin bisa dipresentasiin dan memenuhi kebutuhan ide yang disebutkan diatas, karna sungguh sangat tidak memungkinkan semua user flow dibahas karna tentu bisa memakan waktu yang sangat banyak, akhirnya diputuskan untuk membahas satu flow dimana user bisa melihat event yang tersedia sampai user bisa melihat tiket yang sudah dibeli dengan menampilkan detail event dan barcode yang akan digunakan untuk register ketika acara nantinya.
Sebelum kesana kemari, yu kita definisikan dulu beberapa hal untuk bisa lebih akurat dalam pembuatan aplikasinya.
Sebelum terlalu jauh saya membuat satu persona untuk mewakili cerita dalam proses pembuatan one flow application ini, agar jalannya proses ini terasa lebih hidup karna ada aktor didalamnya.
Dibawah ini adalah satu persona sederhana, Gabby(Gabriella) adalah user yang ingin ikut dalam acara olahraga, tapi dia tidak tau dimana ia bisa menemukan informasi acara olahraga, aplikasi yang dibuat ini nanti akan menjawab kebutuhan Gabby dan membantu Gabby untuk ikut di acara yang akan diadakan bulan ini, semoga Gabby merasa terbantu terus ngajak jalan sama yang bikin desain ini ya hahaha.
Jadi tujuan utamanya kita adalah membantu Gabby dalam mencari acara olahraga yang mungkin menarik untuknya, juga membantu Gabby membeli tiket acara tersebut dengan mudah darimanapun kapanpun.
Nah sekarang kita sudah menentukan tujuan yang ingin kita capai, terus gimana cara kita sampai ke tujuan itu?
Kalem dulu ya.. untuk menjawab itu saya membuat satu Task Flow yang bisa membantu kita untuk membedah sedikit demi sedikit langkah yang harus kita ambil untuk membantu Gabby.
Setelah mendeskripsikan step yang mungkin bisa kita ambil untuk membantu Gabby, langsung kita buat rancangan Information Architecture nya, jadi untuk membantu Gabby mencapai tujuannya, saya membuat dua menu, yaitu menu Tiket dan menu Event, nah kedua menu ini akan jadi inti dari design challenge kali ini.
Disini bisa dilihat apa saja yang mungkin ada di aplikasi yang akan di design ini, seperti informasi event nya, map, harga tiket dan lain-lain.
Untuk menu tiket ini sendiri dibuat lebih mudah, user hanya bisa melihat informasi tiket yang sudah dibeli, barcode dari tiketnya, juga status pembayaran tiket yang dibagi menjadi tiga, yaitu;
- Waiting for payment
Status ini digunakan jika tiket yang ingin dibeli belum terkonfirmasi pembayarannya atau belum dibayar oleh user. - Ready to go
Status ini digunakan ketika tiket sudah dikonfirmasi pembayarannya dan user sudah bisa menggunakan tiket ini di waktu acara. - Ticket Canceled
Dan status tiket ini digunakan ketika user tidak melakukan pembayaran dalam waktu yang ditentukan atau ada kesalahan pada sistem.
Nah dari informasi ini saya langsung membuat low-fi designnya, tapi karna terlalu banyak eksperiment yang dilakuin jadi agak kurang memungkinkan untuk diupload disini, jadi langsung aja ke high fidelity designnya.
Untuk melihat event apa yang ada di bulan ini, Gabby harus masuk ke menu event yang ada di menu paling atas untuk Desktop, dan Bottom Navigation di mobile.
- Menu Event
Menu yang berisi kumpulan event yang ada di bulan ini. - My Tickets
Menu yang berisi list dari tiket yang sudah kita beli sebelumnya.
Di menu Event kita bisa melihat event apa yang sedang terjadi di bulan ini, apakah Lisa Black Pink ngadain event juga haha.. yah yang pasti event nya itu adalah event olahraga yang sesuai sama tema kita di design challenge kali ini.
Nah karena fokus utamanya pada event yang ada di bulan ini makanya dibuatlah tampilan event dengan card, juga ada gambar yang relevan sama acaranya, biar makin menonjol dan terlihat lebih menarik, di card event ini digunakan warna biru biar ada sedikit kombinasi warna biar hidup lebih berwarna haha.
Oke di desain event ini bisa dilihat beberapa poin penting;
- Tanggal
Untuk tanggal dari acara ini, dibuat lebih menonjol supaya user lebih bisa dengan mudah melihat tanggal acara ini. - Tanda Panah
Sebetulnya tanda itu tidak perlu, tapi saya ingin mengajarkan user bahwa card itu bisa di klik dan kita bisa melihat detail dari event tersebut, jadi biar nanti user ga harus menerka-nerka gitu, langsung tau kalau card nya bisa di klik. - Article Card
Article card ini nantinya akan membawa user ke satu page baru yang berisi versi full dari artikel tersebut, jadi di setiap event akan ada satu artikel yang tujuannya untuk encourage user untuk ikut di event terkait.
Untuk desain mobile juga tidak berbeda jauh hanya disesuaikan saja dengan ukuran layar, mungkin ada beberapa hal yang dikurangi juga penempatan artikel terkait event berada di bawah card event.
Untuk penerapan desain di mobile, menu yang tadinya berada diatas sekarang mayoritas nya berada di bawah, supaya lebih mudah dijangkau oleh jari user, tapi ada satu menu yang ditempatkan diatas, menu tiket ditempatkan di pojok kanan atas, alasan utamanya adalah pemanfaatan ruang, karena menempatkan 5 menu dibawah dirasa memakan ruang bernafas dari elemen-elemennya itu sendiri.
Kenapa harus menu tiket yang dipisahkan diatas?
Karena frekuensi penggunaan menu ini tidak terlalu signifikan, hanya orang-orang yang sudah membeli tiket saja yang biasanya melakukan interaksi dengan menu ini.
Nah selanjutnya adalah detail dari event itu sendiri, ada beberapa hal yang dijelaskan disini, diantaranya ;
- Nama event
- Tanggal dilaksanakan event
- Informasi spesifik terkait event (jam mulai, jarak tempuh maraton, lokasi start dan finish)
- Peta event
- Harga tiket event
- Foto terkait event
Informasi ini dibuat sedemikian rupa, penempatannya diberikan jarak yang lumayan lebar agar pengguna dapat dengan mudah mengelompokkan informasi sehingga proses diterimanya informasi juga nantinya akan terasa lebih mudah.
Gabby bisa langsung membeli tiket dengan menekan tombol Buy Now dan aplikasi akan langsung menampilkan check out seperti dibawah ini.
Pada halaman ini ditampilkan informasi check out, serta informasi pemegang tiket, agar nantinya ketika tiket di cetak setiap pemegang ID bisa memiliki tiketnya masing masing, maka dari itu sebelum check out dilanjutkan, Gabby harus memasukkan nama dan ID dari temannya sesuai jumlah tiket yang dibeli oleh Gabby.
Tidak berbeda jauh, hanya saja pada versi mobile ukuran komponen nya disesuaikan agar cukup dengan ukuran layar mobile, juga ada beberapa adjusment agar nantinya tidak terasa terlalu sesak penempatan komponen nya.
Ketika check out Gabby bisa memilih jumlah tiket yang ingin dia beli, setelah itu Gabby harus menentukan ingin menggunakan metode pembayaran yang mana, untuk menampilkan metode-metode pembayaran yang tersedia, saya gunakan pop up pada versi desktop (A), dan untuk versi mobile, akan muncul layar baru yang hanya menampilkan metode pembayaran yang tersedia (B).
Untuk memilih ini Gabby hanya harus melakukan satu kali klik, karena jika sudah dipilih, maka layar akan otomatis kembali ke layar check out sebelumnya, hal ini diharapkan dapat mengurangi effort dari user pada saat melakukan check out.
Setelah Gabby memilih salah satu payment method, Gabby akan diarahkan ke halaman payment information yang berisi;
- Bank yang dipilih
- Batas waktu pembayaran tiket
- Akun management tiket aplikasi sportbeat
- Jumlah yang harus dibayar
Dari sini jika Gabby sudah membayar, Gabby bisa langsung membuka menu My Ticket dengan menekan tombol Status Payment.
A. Tampilan ini adalah tampilan default yang berisi list tiket yang sudah dibeli
B. Tampilan ini adalah tampilan yang muncul di desktop ketika kita menekan salah satu tiket tersebut.
Pada menu My Ticket ini Gabby bisa melihat tiket apa saja yang sudah dibeli oleh Gabby, tiket ini akan tersusun dalam urutan waktu acara, dan jika tiket sudah tidak bisa digunakan atau waktu acara sudah terlewat maka text status Ready to Go akan dihilangkan dari tiket tersebut.
Di ticket list akan diberitahu jumlah tiket yang sudah dibeli, kemudian jika Gabby menekan salah satu tiket, pada detail tiketnya akan diperlihatkan siapa saja pemegang tiket, lengkap dengan ID nya, juga ada tombol untuk print tiket, share tiket dan QR code.
Print disini adalah print detail ticket beserta QR code untuk keperluan user jika dirasa perlu.
Tidak jauh berbeda dengan versi desktop, di versi mobile komponen nya disesuaikan kembali dengan ukuran layar mobile, kemudian dikurangi satu tombol yaitu tombol print, karena dirasa untuk penggunaan umum fungsi print tidak digunakan, malah menggunakan QR code untuk otomatis melakukan print tiket berdasarkan QR code yang di scan.
Nah dari apa yang dibutuhkan Gabby kita bisa menyimpulkan sendiri apakah aplikasi ini bisa;
- Memberikan informasi event yang tersedia di bulan ini.
- Menyediakan informasi detail event.
- Menyediakan jasa untuk pemebelian tiket event yang diinginkan.
