Studi Kasus UX | Aplikasi Girder untuk Teknik Sipil
Hallo Medium,
Pada kesempatan kali ini saya akan mencoba melakukan eksplorasi atau studi kasus mengenai sebuah aplikasi yang akan saya desain untuk memenuhi beberapa kebutuhan mahasiswa khsusnya mahasiswa teknik sipil. Aplikasi ini ditujukan untuk memberi kemudahan bagi pengguna dalam mendapatkan referensi atau bahan belajar yang mudah di akses dimanapun dan kapanpun. Proses eksplorasi ini akan saya bagi dalam beberapa tahapan agar permasalahan utama dapat terjawab dengan terstruktur.
Studi Kasus?…
Pada dasarnya, studi kasus akan mengacu pada design thinking process dimana proses-proses yang dilakukan memiliki 5 (lima) tahapan utama yang saling terikat dan terus beriterasi. Seperti pada gambar dibawah ini, proses pada design thinking umumnya dapat digambarkan sebagai berikut.
Maksud dari iterasi pada design thinking process dalam gambar diatas yaitu apabila sebuah produk telah berhasil dibuat, tetap harus dilakukan riset berupa evaluasi untuk mengetahui “apakah produk yang dihasilkan benar-benar memenuhi kebutuhan pengguna atau tidak?”, kemudian “apakah pengguna akan terus menggunakan produk tersebut atau tidak?”, dan “apakah produk tersebut mudah digunakan atau tidak?”.
Seiring berjalannya waktu, kebutuhan pengguna juga akan semakin beragam, maka diperlukan riset secara berulang agar produk dapat terus digunakan mengikuti perkembangan zaman.
Memiliki empati/kepekaan terhadap sebuah permasalahan merupakan hal paling dasar yang harus dimiliki. Setelah menemukan sebuah permasalahan, kemudian dilakukan riset bahwa apakah permasalahan tersebut benar-benar penting dan memiliki keharusan untuk diselesaikan. Apabila hasil riset mengatakan bahwa hal tersebut menjadi kebutuhan yang harus diselesaikan, dilanjutkan dengan mendefinisikan ide-ide atau solusi yang akan menjawab permasalahan tersebut. Setelah menemukan solusi, dilakukan pembuatan model atau prototype yang akan mendeskripsikan hasil brainstorming. Apabila prototype telah selesai dibuat, kemudian dilakukan pengujian/testing kepada pengguna (usability testing). Hal ini menjadi penting karena hasil dari pengujian akan menentukan apakah produk siap untuk di develop atau tidak.
1. Latar Belakang
Ketika saya mendapatkan kesempatan menjadi mahasiswa baru dalam program studi teknik sipil di salah satu Perguruan Tinggi Negeri, saya merasa cukup kesulitan dalam mendapatkan referensi sebagai bahan belajar. Mungkin bagi sebagian orang adalah hal yang wajar ketika masih cukup kebingungan saat menjadi mahasiswa baru. Namun saya mendapati bahwa beberapa teman saya yang dengan mudah memahami materi dan mengerjakan kuis di kelas. Padahal kami sama-sama mahasiswa baru. Lalu apa yang menjadi pembeda bahwa dia dapat memahami materi di kelas sedangkan yang lainnya termasuk saya belum memahaminya?
2. Analisa Masalah
Permasalahan berdasarkan asumsi saya adalah…
Lebih dahulu tahu. Ya, pada akhirnya saya mengambil hipotesis bahwa bukan pintar dan bodoh yang menjadi permasalahan utama, melainkan mereka hanya lebih dahulu mengetahui apa yang dipelajari dikelas. Saya yang pada awalnya memiliki rasa ingin tahu yang kurang menjadikan saya cukup tertinggal dalam akademik. Hal ini akan menjadi dampak buruk yang besar ketika hingga akhir kuliah seseorang seperti saya terus mengalami ketertinggalan dalam proses pembelajaran. Apalagi untuk mahasiswa lainnya yang aktif berorganisasi dan atau berkompetisi diluar kampus yang mengorbankan waktu kelasnya sehingga apabila tidak ada sarana pendukung akan semakin tertinggal oleh kurikulum.
Singkat cerita, setelah saya lulus saya baru benar-benar berpikir bahwa dengan berkembangnya teknologi, sudah seharusnya seseorang dapat belajar dan mendapatkan kemudahan dalam mengakses materi serta referensi belajar dimanapun dan kapanpun. Pemikiran ini diperkuat dengan terjadinya pandemi Covid-19 yang mengubah sistem pembelajaran menjadi serba daring, sehingga mahasiswa dipaksa untuk belajar lebih mandiri dan kreatif. Hal ini akan semakin menyulitkan mahasiswa baru untuk beradaptasi.
3. Brainstorming
Berdasar pada permasalahan diatas, saya mencoba mencari tahu hal apa yang dapat menyelesaikan permasalahan tersebut atau setidaknya dapat mengurangi permasalahan tersebut. Dan saya mendapatkan ide untuk mendesain sebuah produk berupa aplikasi yang sebisa mungkin dapat menyelesaikan masalah tersebut. Untuk mendapatkan hasil produk yang baik dan dapat bermanfaat, saya melakukan riset berupa fitur apa saja yang dibutuhkan sebuah aplikasi untuk menunjang calon pengguna, yang dalam hal ini calon pengguna adalah mahasiswa teknik sipil.
Metode yang saya gunakan dalam riset kali ini adalah interview secara online dengan menggunakan google form kepada calon pengguna untuk merumuskan pendapat-pendapat serta masukan dari calon pengguna. Dalam melakukan riset kebutuhan, saya menggunakan Divergent Thinking dimana saya mencari sebanyak mungkin ide untuk solusi yang “mungkin” (possible solution) bisa ditawarkan kepada calon pengguna dalam interview agar responden lebih terfokus untuk menentukan fitur manakah yang lebih dibutuhkan dan dapat menjadi solusi dari permasalahan utama dengan efektif. Tentunya juga saya menyiapkan satu bagian dimana calon responden yang memiliki ide/fitur yang penting baginya untuk dapat dituliskan dalam form.
Setelah melakukan interview, saya mendapatkan beberapa jawaban sebagai fitur-fitur utama yang diharapkan, antara lain:
· Materi dasar mata kuliah umum dalam bidang teknik sipil.
· Soal dan pembahasan terkait materi umum.
· Informasi mengenai referensi buku fisik maupun e-book yang menunjang pembelajaran.
· Forum diskusi antar pengguna.
· Fitur Schedule untuk jadwal kuliah maupun jadwal ujian.
User Need…
Selain fitur utama, calon pengguna juga memberikan masukkan beberapa fitur tambahan, antara lain:
· Games/Mini-games ketekniksipilan
· Fitur Remainder
Untuk fitur games/mini-games yang dimaksudkan adalah berupa kuis ringan terkait ketekniksipilan yang dapat berguna untuk menguji pemahaman materi pengguna. Kemudian untuk fitur Remainder mirip dengan fitur schedule, hanya saja fitur Remainder dikhususkan sebagai pengingat deadline tugas.
4. Business Modal Canvas
Tujuan dibuatnya Business Modal Canvas adalah untuk mengetahui seberapa besar potensi bisnis yang dihasilkan dalam membuat sebuah produk. Pada aplikasi yang akan saya desain memiliki peluang bisnis yang besar. Hal ini dikarenakan aplikasi tersebut merupakan satu-satunya aplikasi pembelajaran yang berbasis pada bidang keteknikan khususnya teknik sipil. Dalam peluang bisnis, banyak segmen yang dapat bekerjasama baik dalam bidang penjualan buku, hingga membership untuk fitur premium.
5. User Persona
Setelah mendapatkan konsep dan ide untuk desain produk, saya membuat user persona dalam bentuk karakter fiksi. Hal ini dimaksudkan untuk menjadi acuan dan batasan dalam mendesain aplikasi. Beberapa user persona antara lain sebagai berikut:
6. Perancangan User Flow
Berdasarkan fitur yang dimuat dalam aplikasi, terdapat beberapa user flow ketika membuka aplikasi tersebut, antara lain:
· Membuka Materi Teknik Sipil
· Membuka Soal-soal dan Pembahasan
· Membuka Informasi Referensi Buku Keteknisipilan
· Membuka Forum Diskusi
· Membuka Kuis/Latihan Soal
· Membuka Fitur Remainder dan Fitur Schedule
Untuk lebih jelasnya, user flow dapat dilihat pada bagan alir berikut ini.
7. Wireframe / Lo-Fi Mockup
Setelah memiliki user flow, langkah selanjutnya yang saya lakukan adalah mendesain wireframe. Wireframe atau sering disebut sebagai Lo-Fi (Low Fidelity) Mockup merupakan tampilan dari desain aplikasi yang akan dibuat. Sebelum memulai wireframe menggunakan software, saya juga melakukan tahapan sketching dengan kertas & pencil. Tujuan dibuatnya wireframe/Lo-Fi adalah untuk memberikan gambaran berupa tata letak atau layout dalam aplikasi yang akan di desain. Wireframe boleh dibuat dengan tidak memuat konten asli. Berikut merupakan sketch yang saya buat dengan menggunakan kertas untuk mendapatkan gambaran layout awal.
Setelah membuat sketch menggunakan kertas untuk mendapatkan gambaran awal layout dari aplikasi tersebut, saya juga membuat wireframe/Lo-fi menggunakan software/tools. Terdapat beberapa software/tools yang bisa digunakan untuk membuat wireframe seperti Balsamiq, Sketch, dan lain sebagainya. Sedangkan pada kesempatan kali ini saya menggunakan bantuan tools Whimsical. Dengan menggunakan bantuan Whimsical, saya dapat membuat layout dengan ukuran yang lebih proporsional.
Dalam kasus tertentu, beberapa designer seringkali melewati tahapan sketching dengan menggunakan kertas & pencil sehingga langsung membuat wireframe menggunakan software/tools. Bahkan ada juga designer yang melewati proses wireframe sehingga setelah membuat user flow mereka langsung membuat desain Hi-Fi (High Fidelity) Mockup.
Saya sendiri menggunakan Whimsical untuk membuat wireframe. Alasannya adalah saya ingin mencoba dan menambah pengetahuan saya dalam menggunakan software sebanyak-banyaknya. Berikut ini merupakan hasil eksplorasi wireframe yang saya buat menggunakan software Whimsical.
8. Warna dan Desain
Pada proses selanjutnya, adalah membuat Hi-Fi mockup. Namun, dibutuhkan beberapa item seperti style guide termasuk grid setup, whitespace rules, color palette, typography, UI components, hingga logo dan tagline. Tahapan ini semua dilakukan agar desain memiliki sebuah panduan sehingga aplikasi yang dibuat tidak berbeda antara satu frame dengan frame lainnya.
Tahapan pemilihan warna merupakan salah satu tahapan yang sangat penting. Dalam kasus kali ini, warna primer dalam aplikasi yang saya gunakan adalah warna biru. Menurut psikologi warna, warna biru dapat menggambarkan ketenangan, kestabilan, produktif serta keberhasilan. Warna biru juga dapat berarti kesedihan atau kegelisahan, sehingga dalam hal ini tentu harus dipadukan dengan warna-warna sekunder sebagai pendamping yang juga cocok agar tidak terjadi kesalahan dalam penerjemahan psikologi warna.
Pada pembuatan nama serta ide logo, saya menggunakan nama dan bentuk dari “Girder”. Girder merupakan sebuah struktur bangunan yang erat kaitannya dengan dunia teknik sipil. Girder memiliki fungsi sebagai penopang struktur atas jembatan/jalan layang. Struktur girder juga berfungsi sebagai struktur yang menyalurkan beban berupa beban kendaraan diatasnya untuk dikirimkan ke struktur bawahnya yaitu pier/abutmen agar dapat diredam sehingga tidak terjadi persimpangan beban/gaya. Hal ini yang memaknai bahwa aplikasi Girder yang saya desain dapat menjadi wadah berupa struktur/sistem yang akan menyalurkan pengetahuan dari seseorang yang akan diterima orang lainnya.
9. Hi-Fi (High Fidelity) MockUp
Setelah mendapatkan tata letak maupun gambaran flow dalam aplikasi, selanjutnya saya membuat Hi-Fi (High Fidelity) Mockup. Hi-Fi Mockup merupakan bentuk desain dari sebuah produk yang berisi konten sebenarnya. Hi-Fi juga memuat warna, font hingga grid yang nantinya akan digunakan sebagai prototype hingga acuan dalam proses develop/coding. Dalam pembuatan mockup terdapat beberapa software yang dapat digunakan antara lain Figma, Adobe XD, InVision, dan lain sebagainya. Figma merupakan tools yang saya gunakan pada desain mockup kali ini karena saya sendiri lebih nyaman dan familiar untuk menggunakan figma. Berikut merupakan High Fidelity Mockup yang saya buat.
10. Usability Testing
Setelah prototype selesai dibuat, kemudian saya melakukan usability testing kepada calon pengguna aplikasi. Hal ini dilakukan untuk mengetahui dan menguji apakah mereka sebagai calon pengguna dapat dengan mudah mengoperasikan desain tersebut atau tidak. Hasil dari usability testing kemudian dapat menjadi masukan sebagai langkah dari revisi. Proses ini akan terus beriterasi hingga kemudian desain siap untuk di programming/develop.
Dan hasil dari usability testing kali ini-pun cukup baik. Saya menerima beberapa feedback yang baik agar desain lebih mudah dan nyaman untuk digunakan.
Sekian studi kasus dari saya, semoga dapat menginspirasi teman-teman.
Terima kasih sudah menyempatkan waktu untuk membaca. Saya sangat terbuka jika teman-teman ingin bertanya atau memberi masukkan.
Peace ✌️😁
