Perjalanan Saya Menjadi UI/UX Amatir

Yeffrey Saputra
8 min readJul 22, 2018

--

Pada awalnya saya memang tidak bercita-cita menjadi designer, saya memang suka design dari sekolah dan mulai berkenalan dengan Photoshop dan Corel, tapi tidak pernah terlintas di pikiran saya untuk menekuni design dengan serius. Menurut saya saat itu bahwa hanya dengan menjadi seorang programmer lah, saya bisa masuk ato bekerja di bidang IT. Untuk itu saya kuliah dengan mengambil jurusan IT yang akhirnya bisa lolos di tahun 2011.

Kuliah di IT membuat saya belajar banyak hal, salah satunya adalah bahwa SI ato web yang baik itu juga harus didukung desain visual yang keren pula. Dari situ saya mulai mencoba untuk mendalamai desain lebih banyak. Alhamdulillah setelah itu saya diberikan kesempatan menjadi Graphic Designer di sebuah perusahaan majalah di ibukota. Dari situ saya belajar bahwa desain itu juga harus menyesuaikan market dan audience. Menurut saya, desain yang baik itu bukan hanya desain yang indah, penuh warna dan balance, tapi desain juga harus sesuai dengan kebutuhan audience atau market yang kita tuju. Desain juga harus memikirkan apakah instalasi nya susah, layouting nya nyaman atau tidak, bahkan sampai cost produksi yang dikeluarkan.

Setelah 1 tahun lebih di ibukota saya mencari tantangan lain. Berawal dari saat itu saya akan berkeluarga dan membina rumah tangga di ibukota itu saat itu sangat berat, saya mencari industri kreatif lain di Jogja. Dan saya dipertemukan dengan salah satu Developer game terbesar di Indonesia untuk menjadi Game Designer. Dalam hati saya “Wah pasti enak banget bikin game brati bisa nge-game sambil kerja” emang gak salah sih, tapi ternyata banyak sekali proses di dalam nya. Dari situlah saya mulai tahu istilah User Experience (UX). Intinya kalo di dalam game, user itu harus dimanjakan matanya dengan UI yang “stunning”, tapi game juga harus nyaman pas dimainkan. Selain itu saya juga belajar tentang game balancing dan sedikit tahu gimana mengatur milestones dan task management. Karena di tempat saya ini, kita harus bisa memberikan ETA yang tepat karena sangat mempengaruhi proses produksi tim keseluruhan.

6 tahun di industri game membuat saya berpikir bahwa saya harus mempunyai spesialisasi. Berbekal ilmu yang saya dapat tentang UI/UX di game, saya mencoba membuat UI untuk apps. Dan ternyata suram :D. Ada saja yang terasa aneh ketika melihat UI nya. Saya coba baca artikel tentang UI/UX dan tetap masih susah dipahami. Akhirnya teman menyarankan saya untuk mencoba Binar. “Wes to yep coba Binar wae, wong yo gratis trus entuk ilmune juga”. Kayaknya emang gak ada salahnya saya coba. Lalu saya ajak sohib saya untuk ikut daftar di Binar juga. Sohib saya ini tempat saya tukar pikiran tentang apapun dan beliau ini telah mengajarkan saya banyak hal termasuk dari beliau saya jadi tau dasar dari desain itu harusnya bagaimana.

Singkatnya, kami berdua diterima di batch-7 Binar Academy di team yang berbeda. Saya masuk menjadi anggota Team E, setelah pembagian team kami mendapatkan tema Seni dan Budaya. Lalu PM kami ngajakin buat meetup 1 team. Mbak PM ini meminta kami untuk gathering idea sebanyak-banyaknya. Dari mbak PM ada masukan untuk nama apps ini adalah KRAMA yang filosofinya dalemm beud. Balik lagi ke ide, ide saya saat itu bikin apps tentang tourism. Setelah saya sampaikan, dari teman-teman team ada pertimbangan bahwa kemungkinan team lain juga akan membuat hal yang serupa, dalam hati saya “bener juga sih” sedangkan saya sendiri belum menemukan sesuatu yang unik dari ide saya tadi. Lalu muncul lah ide “bagaimana kalau kita mewadahi seniman atau komunitas indie yang pengen mengadakan event tapi belum mempunyai venue atau EO?”. menurut saya “Nice beud idenya” . Setelah itu team mulai memikirkan kira-kira feature apa saja yang dibutuhkan. Saya juga mulai mencatat kira-kira apa yang dibutuhkan.

Pulang dari meetup, di kepala saya mulai penuh tentang flow yang bisa mewadahi ide dari team tadi. Saya berikan deadline lusa akan pitch tentang flow yang akan digunakan. dan jadilah flow Krama v01 seperti ini:

Flow KRAMA v01

dari flow diatas saya komunikasikan dengan team membahas fitur yang ada di dalamnya, dan ternyata untuk implementasinya lumayan susah. Lalu kita cari masalah lain dan muncul masalah baru yaitu “ tidak semua orang tau adat istiadat di tempat budaya, terutama larangan dan aturan khusus di tempat budaya tertentu. Solusi yang saya berikan adalah “kita buat apps yang didalamnya terdapat info penting sekaligus memberikan experience kepada usernya dan memberikan petunjuk cara mengakses tempat budaya itu.”

Lalu saya design lagi flow yang sesuai dengan solusinya sekaligus fitur apa saja yang mendukung di dalamnya seperti berikut

Flow KRAMA v02

KRAMA v02 ini main feature nya adalah memberikan info termasuk didalamnya video, photo dan info tentang sebuah tempat budaya dan juga event dan makanan khas di sekitar tempat budaya itu. Selain itu kita juga berikan fitur “My Trip” yang di dalamnya user dapat merencanakan kepergian dan mendapat info tentang rute ke tempat tujuan , haran kami fitur pendukung ini akan memudahkan user agar merasakan full experience di tempat budaya yang dituju.

Setelah flow ini saya sampaikan ke team, saya meminta developer kami untuk mulai research tentang google map API dan method yang harus disiapkan sembari saya membuat mockup yang nantinya akan kita presentasikan pada Party Class pertama. Mockup nya seperti berikut:

Mockup KRAMA v02

Sampailah kami pada Party Class I, ini semacam Ujian Tengah Semester bagi saya. PM kami sengaja mencari waktu di akhir dengan harapan kami mendapat feedback sebanyak-banyaknya dan krusial. Dan benar, kami memang hanya mendapat 1 feedback langsung dari Mbak Alamanda tapi sangat krusial. intinya beliau berkata “Apps kalian dengan masalah yang diangkat gak relevan”…..(weee kok isoh) batin saya. Setelah saya liat lagi, saya berasumsi sepertinya ini karena fitur pendukung kami jadi lebih menonjol daripada fitur utama kami, dimana fiur utama kami yang sebenarnya adalah “memberikan info tentang larangan di suatu tempat budaya”.

Hari berikutnya saya coba membuktikan asumsi saya tadi. Dan benar, ketika prototype saya berikan ke user yang saya temui, mereka rata-rata mengakses menu “My Trip” lebih lama daripada menu yang lain, bahkan ada beberapa yang langsung tertarik untuk mengakses menu “My Trip”. Akhirnya saya yakinkan ke team untuk menghapus fitur My Trip.

Selain itu, Mockup KRAMA v02 tadi coba saya perlihatkan ke beberapa kawan yang terbiasa develop apps android, feedback yang paling krusial adalah “design mu kaku banget jep”(T_T). Lalu saya tweak lagi dan jadilah KRAMA v03 seperti ini(p.s. flow nya lupa saya simpan dimana jadi ndak saya tampilakn :p)

Mockup KRAMA v03

Sudah agak sedikit lebih mendingan memang daripada versi sebelumnya :). Setelah itu saya konsultasikan ke dev iOS kami dengan harapan design ini bisa di adaptasikan ke iOS. Dan…. luput….dari transisi, menu flow, dan visual nya tidak “ng-iOS” sama sekali. setelah beberapa feedback dan saya cari contoh apps iOS ternyata user behavior iOS memang beda.

Transisi menu, menu flow, derajat ke-roundedan(ntah istilahnya apa), dan bahkan ternyata di iOS itu tidak ada radio button. Selain itu, ketika apps ini saya perlihatkan lagi ke user ternyata pemilihan background navigasi saya yaitu biru dan dipadu merah soft itu kurang nyaman terutama ketika apps ini dibuka di outdoor siang hari. Semacam tidak harmonis dengan konten di body apps. Hal itulah yang mendasari perubahan di versi berikutnya.

Selain itu ada masukan dari BE kami bahwa adanya menu “cuisine” itu jadi kurang relevan karena makanan yang kita cantumkan tidak memiliki “atribut” yang sama dengan place dan event. Maksudnya, makanan ini jadi seperti berdiri sendiri karena tidak ada keunikan ato rule khusus tentang makanan padahal rule ini yang akan kita angkat untuk menu place dan event. “bener juga sih” disamping itu saya prediksi waktu untuk survey dan pengumpulan database nya sendiri akan membuat timeline menjadi sangat mepet.

Saya juga mendapat masukan dari user yang menginiginkan agar cara mengakses info itu dibuat sesingkat mungkin. Istilahnya, mereka itu memakai apps ini agar bisa mendapat info tentang tata krama itu secepat mungkin. Akhirnya jadilah KRAMA v04 yang hanya dengan “slide and click” user sudah bisa mengakses fitur utama kami. User tidak perlu masuk menu terlalu dalam dan memahami menu macam-macam untuk mendapatkan solusi. dannn… mockup nya seperti ini

Mockup KRAMA v04 (Android)
Mockup KRAMA v04 (iOS)

Selain Android dan iOS, KRAMA juga ada di platform web, web kami menampilkan info sama dengan apps kami. Fungsi dari web kami adalah untuk manajemen konten yang nantinya akan terupdate di apps dan web kami. untuk mockup nya seperti ini

Mockup KRAMA v04 (WEB)

Mockup diatas adalah amunisi kami untuk Party Class 2. Di party class 2 ini kita masing-masing dari tiap divisi mempresentasikan progress sekaligus fitur dari semua platform termasuk metode tes dari QA. Setelah Party Class 2 team kami mengejar implmentasi yang belum selesai termasuk pengetesan yang harus dilakukan. Disamping itu kami juga harus mempersiapkan presentasi yang benar-benar bisa menunjukkan kelebihan apps kami untuk Showcase.

Showcase pun tiba, Alhamdulillah berkat kerja keras team kami, Mbak Puji, Nyoman, Ridho, Rifqi, Mbak Sofi, Pak Sigid, Ijul, Ipank, Mas Adam, Sem, san Mas Andy, Prototype KRAMA untuk Android, iOS, dan Web selesai. dan Alhamdulillah Team kami menjadi Best Team di Batch 7.

Thanks Binar. Thanks Team. GGWP

Team E, Best Team Batch-7 Binar Academy

--

--