BAB III
PELAKSANAAN KERJA MAGANG
3.1. Kedudukan dan Koordinasi
Pada bagian ini, penulis menjabarkan kedudukan penulis dan proses koordinasi selama melaksanakan kerja magang di PT Dana Kini Indonesia.
1. Kedudukan
Kedudukan penulis pada kerja magang adalah sebagai UI/UX designer yang dibimbing oleh Lydia Leslie sebagai supervisor . Penulis merupakan UI/UX designer satu-satunya di PT Dana Kini Indonesia, sehingga penulis bertanggung jawab atas mayoritas desain tampilan media-media Danakini, terutama pada aplikasi mobile dan website OPS. Desain tampilan ini disimulasikan dalam bentuk prototype dengan software Figma. Selain itu, penulis juga bekerjasama dengan Rizky Pahlevi sebagai business analyst untuk melengkapi detail-detail pada tampilan dari sisi teknis .
Gambar 3.1. Bagan Kedudukan
2. Koordinasi
Alur koordinasi selama kerja magang dimulai dengan brief oleh supervisor melalui Google Meet mengenai proyek. Selanjutnya penulis berkoordinasi dengan business analyst untuk mengetahui detail-detail yang tidak dibahas oleh supervisor . Detail yang dibahas termasuk susunan kata yang digunakan, simulasi angka yang ditampilkan, tombol-tombol atau input field , pop-up, dan skenario-skenario yang ingin disimulasikan dalam prototype.
Gambar 3.2. Bagan Alur Koordinasi
Selanjutnya, penulis mengerjakan prototype sesuai dengan brief dan detail yang telah dibahas dengan business analyst. Dalam tahap pengerjaan, penulis memastikan bahwa perubahaan desain memiliki elemen desain yang sama sehingga konsisten dan satu nada dengan desain yang saat ini. Setelah menyelesaikan prototype, penulis akan memperlihatkan kepada supervisor untuk disetujui. Kemudian business analyst akan mempresentasikan prototype kepada user-user yang terlibat. Jika ada munculnya perubahan atau kekurangan mengenai prototype saat meeting bersama user, maka akan disampaikan kepada penulis oleh supervisor untuk melakukan diubah.
3.2. Tugas yang Dilakukan
Berikut adalah daftar proyek-proyek yang penulis telah melakukan selama kerja magang di PT Dana Kini Indonesia.
Tabel 3.1. Detail Pekerjaan yang Dilakukan Selama Magang
No. Proyek Keterangan
1 Pembuatan prototype Website 'kiniCintaku' dan 'kiniFlexi'
Merancang prototype untuk produk 'kiniCintaku'
& 'kiniFlexi' dalam Figma sesuai dengan website yang sudah ada.
2 Update Aplikasi mobile Danakini (Android) dan website OPS Danakini
Mengupdate prototype dalam Figma sesuai dengan perubahan yang diminta.
3 Redesain UI/UX Aplikasi mobile Danakini
Merancang desain UI baru untuk aplikasi mobile Danakini.
3.3. Uraian Pelaksanaan Kerja Magang
Selama penulis melakukan kerja magang di PT Dana Kini Indonesia, penulis sebagai UI/UX designer ditugaskan beberapa proyek terkait dengan desain prototype untuk aplikasi dan website OPS Danakini. Untuk proyek pertama, penulis diberikan tugas yang membuat prototype dari website yang sudah ada untuk menguji kemampuan penulis. Setelah menyelesaikan uji coba tersebut, penulis diberikan tugas untuk mengubah dan mendesain prototype mobile app dan website OPS Danakini sesuai dengan perubahan yang diberikan oleh supervisor.
Prototype ini dibuat untuk memperlihatkan alur kerja aplikasi kepada pihak-pihak yang berkepentingan. Selain itu, prototype juga akan digunakan sebagai dasar untuk IT developer coding aplikasi dan sebagai materi untuk mengajarkan cara pemakaian kepada konsumen.
Dalam laporan ini penulis hanya akan menjabarkan proses pengerjaan tiga proyek utama yaitu pengerjaan prototype website untuk produk 'kiniCintaku' dan 'kiniFlexi', pengerjaan prototype mobile aplikasi dan website Danakini, dan pengerjaan desain ulang untuk UI aplikasi mobile Danakini.
3.3.1. Proses Pelaksanaan
Berikut adalah penjabaran proses pelaksanaan ketiga proyek yang penulis telah melakukan selama kerja magang.
3.3.1.1. Website 'kiniCintaku' dan 'kiniFlexi'
Tugas pertama yang penulis diberikan oleh supervisor adalah membuat prototype dari dua produk di website Danakini yaitu 'kiniCintaku' dan 'kiniFlexi'. prototype ini selanjutnya akan digunakan oleh tim marketing untuk mengajarkan cara gunanya kedua produk. Jangka waktu untuk pengerjaan tugas ini adalah 2 minggu untuk setiap produknya.
1. Brief
Penulis pertama diberikan brief oleh supervisor melalui Google Meet . Pada brief ini, penulis diberitahu detail tugas seperti bagian yang ingin dibuat menjadi
prototype, skenario-skenario yang ingin dimasukin, dan juga hasil akhir yang diharapkan. Batasan untuk membuat tugas ini adalah proses pengajuan step satu sampai enam untuk produk 'kiniCintaku' dan 'kiniFlexi', dan juga proses registrasi dan melihat riwayat pengajuan. Selain itu, penulis diarahkan untuk menanya kepada Suryadi, salah satu tim IT, jika ada kendala dalam penggunaan website tersebut.
Gambar 3.3. Website Danakini
2. Riset
Setelah selesai brief, penulis lanjut melakukan riset terhadap website yang diberikan. Riset dilakukan lebih untuk melihat alur website dan komponen desain yang digunakan dalam website tersebut. Untuk alur website, penulis pertama melewati pengajuan kedua produk pada website dalam sudut pandang pengguna pertama dan mencatat alurnya dalam bentuk flowchart. Selain itu, penulis juga catat informasi-informasi lainnya seperti pop-up, skenario tambahan, dan inputan yang bersifat autofill.
Gambar 3.4. Flowchart Website Danakini
Karena desain prototype diharapkan untuk mirip dengan website yang existing , penulis menggunakan inspect element untuk mengetahui typeface, hex warna, gambar, dan kode icon di setiap halamannya. Penulis juga menggunakan fungsi ini untuk membuat layout tampilan website lebih konsisten dengan membuat setiap ukuran layar 1440 x 960 px. Selain ini, penulis juga mengambil banyak screenshot untuk mendukung proses pembuatan.
Gambar 3.5. Proses Penggunaan Inspect Element
3. Pembuatan Prototype
Menggunakan program Figma, penulis membuat prototype menggunakan alur dan aset desain yang telah dikumpulkan oleh penulis di tahap riset. Selama pembuatan prototype, penulis tetap melakukan cross check sehingga tidak ada sebuah proses dan layar yang tertinggal. Setelah selesai prototype, penulis melakukan testing sendiri untuk memastikan semua alur sudah lengkap dan tombol dapat dipencet.
Selain itu, penulis juga meyakinkan bahwa semua kata-kata pada setiap halaman tidak ada yang salah.
Gambar 3.6. Hasil Akhir Prototype
4. Melaporkan Hasil Akhir dan Revisi
Setelah selesai prototype, penulis memberikan link prototype kepada supervisor.
Ketika sudah dikonfirmasi kepada supervisor , penulis diarahkan untuk membagikan link tersebut kepada salah satu tim marketing, Wynne, sehingga dapat digunakan untuk keperluan tim marketing.
Wynne selanjutnya menginformasikan secara langsung kepada penulis beberapa skenario yang kekurangan atau belum dimasukan kepada prototype.
Setelah memperbaiki prototype sesuai dengan feedback , penulis kembalikan
prototype kepada Wynne. Ketika tidak ada perubahan lagi dari Wynne, penulis memberitahu supervisor bahwa tugas penulis sudah selesai dilakukan.
3.3.1.2. Aplikasi Mobile dan Website OPS Danakini
Setelah selesai membuat tugas yang sebelumnya, penulis diberikan file Figma untuk aplikasi mobile dan Website OPS Dana kini. Tugas penulis adalah untuk membuat perubahan dan melakukan update ketika adanya perubahan-perubahan.
Perubahan ini bisa sekecil memperbaiki susunan kata pada sebuah halaman hingga mendesain ulang sebuah halaman yang telah ada.
Tergantung tingkat perubahannya, penulis diberikan waktu pengerjaan antara 1 hari sampai 1 minggu. Pengerjaan tugas ini bersifat paralel proyek redesain aplikasi Danakini, tetapi memiliki prioritas dan diselesaikan terlebih dahulu ketika ada perubahan.
1. Briefing Detil Perubahan Dengan Supervisor
Proses briefing dimulai ketika supervisor membuka rapat melalui Google Meet. Supervisor selanjutnya membahas perubahan-perubahan yang disetujui oleh user dan juga menjelaskan aspek-aspek desain yang akan diubah. Penulis juga terkadang diajak mengikuti meeting langsung bersama user dimana penulis langsung diberitahu perubahan-perubahan dan mencatatnya sehingga tidak perlu diberikan brief dengan supervisor .
Gambar 3.7. Brief Alur Aplikasi dan Perubahannya
2. Briefing Detil Perubahan Dengan Business Analyst
Selanjutnya penulis akan membahas detil-detil perubahan bersama business analyst . Pembahasan disini lebih berupa detail konten dalam perubahan tersebut. Beberapa detail yang dibahas termasuk susunan kata yang digunakan, simulasi angka yang ditampilkan, tombol-tombol atau input field , pop-up, dan skenario-skenario yang ingin disimulasikan dalam prototype.
Gambar 3.8. Rapat Bersama Business Analyst
3. Pembuatan Prototype
Dalam tahap ini, penulis menggunakan file Figma dari UI/UX designer sebelumnya dan mengubahnya secara langsung dalam file tersebut. Dalam pembuatan prototype, penulis mengikuti desain dari layar-layar sebelumnya sehingga desain aplikasi tetap konsisten dan menggunakan komponen yang sama dengan layar-layar sebelumnya. Beberapa desain komponen yang disamakan termasuk header atau footer, menu, icon, tombol, input field, pop-up, dan susunan kata yang sama. Jika ada sebuah perubahaan yang tidak memiliki kesamaan dengan layar-layar lain, penulis membuat desain sendiri tetapi tetap menggunakan estetika desain dari layar-layar sebelumnya.
Berikut adalah beberapa contoh perubahan yang telah dilakukan oleh penulis. Pada perubahaan pertama, penulis diminta untuk tulisan pada onboarding sehingga lebih sesuai dengan konsep Danakini. Penulis
mengecilkan gambar pada onboarding karena perubahan kata yang diberikan lebih banyak dari yang sebelumnya.
Gambar 3.9. Perubahan Susunan Kata
Selanjutnya, penulis diminta untuk membuat halaman step 3 'kiniCintaku' lebih nyaman untuk dipakai karena banyak pengguna memiliki kendala dalam menginput produk. Penulis mengidentifikasi beberapa masalah terutama pada jika pengguna ingin menghapus produk.
Di desain sebelumnya, pengguna harus scroll down untuk menghapus produk dan tombol hapus tersebut hanya akan menghapus produk yang paling terakhir ditambah. Jika pengguna telah memasukkan sepuluh produk dan ingin menghapus produk ke-4, pengguna harus menghapus enam produk terakhir untuk menghapus produk ke-4 tersebut. Maka dari itu, penulis menambahkan tombol hapus untuk setiap produknya. Selain itu, penulis juga menambahkan kotak untuk memisahkan setiap produknya sehingga pengguna dapat lebih mudah untuk membedakan per produknya.
Gambar 3.10. Perubahan Desain
Yang terakhir, penulis diminta untuk menambahkan tombol hitung untuk menghitung jumlah pinjaman, menambahkan field untuk input promo, dan menambahkan desain untuk memilih tenor di halaman pengajuan 'kiniFlexi'. Selain itu, penulis juga diminta untuk mensimulasikan skenario sesuai dengan desain-desain tersebut. Skenario yang dimaksud dapat dijabarkan sebagai berikut.
a. Setiap kali pengguna menginput nominal pada jumlah pinjaman, pengguna harus pencet tombol hitung supaya sistem dapat kalkulasi b. Setelah selesai kalkulasi, pengguna dapat memilih promo
c. Halaman promo akan muncul yang mengandung promo-promo yang tersedia pada saat itu
d. Jika promo telah dipilih, periode yang tersedia akan muncul
Pertama penulis membuat desain untuk tombol hitung. Tombol hitung disini dibuat menggunakan warna hijau sehingga memiliki kontras dengan tombol-tombol lainnya. Tombol ini diletakkan di sebelah kanan dari field
input jumlah pinjaman untuk memberitahu pengguna bahwa alur selanjutnya adalah untuk memencet tombol tersebut.
Berikutnya penulis membuat halaman untuk memperlihatkan daftar promo yang tersedia. Disini, penulis memperhatikan hierarki pembacaan sehingga pengguna fokus untuk membaca judul terlebih dahulu. Icon yang digunakan pada halaman ini diambil dari halaman lain yang sudah ada.
Selanjutnya tombol ‘Gunakan’ diletakan di setiap promo dan akan kembalikan pengguna ke halaman pengajuan sebelumnya. Jika pengguna memencet salah satu kotak promo, maka akan memunculkan pop-up yang mengandung syarat dan ketentuan promo tersebut. Dari pop-up ini pengguna juga dapat memilih untuk menggunakan promo tersebut.
Gambar 3.11. Halaman Promo
Selanjutnya, penulis membuat tampilan untuk memilih periode.
Periode yang tersedia dijabarkan dalam kotak dengan bentuk 2x2 menggunakan ilustrasi yang sudah ada. Dalam setiap kotaknya, terdapat informasi mengenai bulan dan nominal angsuran per bulannya. Informasi
yang diutamakan adalah bulannya dan diikuti oleh nominal. Maka dari itu, penulis menyesuaikan ukuran font untuk memberikan emphasis. Warna yang digunakan pada kotak-kotak tersebut diambil dari warna brand Danakini dan jika dipencet, kotak lainnya yang tidak terpilih berubah menjadi warna abu.
Gambar 3.12. Halaman Pengajuan 'kiniFlexi'
Untuk prototype website OPS Danakini yang hanya digunakan oleh pihak internal Danakini, penulis tidak terlalu fokus kepada desain prototype tetapi lebih kepada alur setiap layar dan interaksi. Disini penulis mensimulasikan skenario secara lebih detail dibanding pada aplikasi sehingga tidak ada yang kekurangan.
Salah satu perubahan yang penulis telah lakukan adalah dimana penulis diminta untuk membuat halaman rincian tagihan yang memiliki empat pilihan yang dapat diakses dari tombol dropdown ‘skema pembayaran’. Setiap
pilihan memiliki input field dan tabel yang berbeda, sehingga penulis membuat tampilan untuk setiap pilihannya.
Gambar 3.13. Halaman Setiap Pilihan
4. Revisi
Ketika penulis telah menyelesaikan sebuah perubahan, penulis akan melaporkan kepada supervisor . Supervisor akan mengecek dan memastikan perubahan telah diimplementasikan dengan baik dan benar. Jika ada perubahaan tambahan atau kekurangan, penulis akan memperbaiki prototype dan melaporkan kembali kepada supervisor.
3.3.1.3. Redesain Aplikasi Danakini
Sebulan setelah penulis melalui kerja magang, penulis diberikan tugas untuk membuat desain baru untuk aplikasi mobile Danakini. Dalam tugas ini, penulis diberikan kebebasan untuk mengubah alur dan desain mobile aplikasi. Penulis akan berkoordinasi dengan Augustin sebagai kreatif executive ketika adanya keperluan untuk bimbingan, pertanyaan, perubahaan besar, dan meminta nasihat.
1. Brief Proyek
Penulis pertama menghadiri rapat untuk brief desain ulang UI/UX aplikasi mobile yang diikuti oleh Yogi sebagai legal, risk, dan compliance manager , Michael sebagai partnership executive dan Agustina sebagai kreatif executive . Pada brief ini, penulis diberitahu latar belakang dari aplikasi yang sekarang dan mengapa ingin diubah. Selain itu penulis juga diberitahu harapan yang diinginkan dari hasil akhir, apa yang harus dihindari, dan juga beberapa contoh-contoh aplikasi yang dapat dijadikan referensi.
Dalam rapat ini, penulis mencari tahu detail lebih yang dapat mengerucutkan proses pembuatan aplikasi mobile. Beberapa aspek-aspek yang ditemukan adalah:
a. Pengguna aplikasi adalah wanita dan pria dengan rentang usia 45 sampai 60 tahun (primer) dan 21 sampai 45 tahun (sekunder).
b. Kebangsaan Indonesia dengan kelas ekonomi C sampai D.
c. Sedang bekerja (karyawan) atau pemilik usaha mikro.
d. Ingin membuat aplikasi lebih modern, trusted dan tidak monotone . e. Tidak ada kompetitor, tetapi beberapa contoh perusahaan dengan
servis yang mirip adalah Kredivo, Finmas, Indodana , dan Investree . f. Harapan ingin lebih kepada aplikasi Gojek, Grab, Shopee, dan OVO .
2. Riset
Tahap riset adalah tahap dimana penulis mempelajari alur dan desain aplikasi lebih dalam, dan juga brainstorming ide dan referensi dari aplikasi lainnya.
Dalam tahap ini, penulis berkomunikasi dengan Agustina untuk menentukan desain dan alur untuk desain tampilan baru.
Sebagai referensi, penulis mengutamakan untuk menggunakan beberapa aplikasi yang disebut saat brief, khususnya aplikasi Gojek, OVO, dan Investree. Tiga aplikasi ini dipilih karena paling sering disebut saat brief.
Selain tiga aplikasi tersebut, penulis juga mencari referensi desain UI lainnya melalui internet.
Selanjutnya, palet warna ditentukan menggunakan warna-warna yang memiliki hubungan erat dengan brand Danakini, yaitu biru tua, jingga dan biru muda. Warna utama yang akan digunakan pada aplikasi adalah biru tua, dan diikuti oleh warna jingga dan biru muda sebagai warna sekunder.
Gambar 3.14. Palet Warna
Setelah menentukan palet warna, penulis lanjut untuk menentukan keyword. Menggunakan informasi yang didapatkan dari brief, penulis dapat menyimpulkan tiga kata kunci yaitu modern , dipercayai, dan chromatic.
Modern disini artinya untuk mengikuti tampilan yang lebih kekinian sehingga tidak tertinggal zaman. Karena Danakini merupakan layanan dalam bidang finansial, sangatlah penting untuk meningkatkan kepercayaan terhadap penggunaan produk-produk Danakini. Maka dari itu, dipercayai dipilih sebagai salah satu keyword. Chromatic disini artinya memiliki warna yang banyak atau cerah. Kata ini dipilih sehingga desain dapat memberikan kesan yang cerah dan menarik menggunakan warna-warna yang tersedia.
Ketiga keyword digunakan karena inilah kesan yang ingin penulis diberikan kepada pengguna. Selain itu, keyword ini juga mendukung harapan user dalam desain akhir aplikasi Danakini. Akhirnya, penulis membuat moodboard yang menyimpulkan kesan untuk aplikasi akhir.
Gambar 3.15. Moodboard
Selain penentuan moodboard , penulis juga melakukan banyak diskusi dengan Agustina tentang alur dan fitur-fitur pada aplikasi. Yang didiskusikan disini berupa kendala ketika menggunakan aplikasi dan aspek-aspek desain yang bisa dikembangkan. Dari diskusi ini, penulis menyimpulkan perubahan yang dapat diubah dalam aplikasi yang sekarang. Perubahan tersebut dapat dijabarkan sebagai berikut.
a. Dasbor terlalu membosankan jadi seluruh tampilan ingin diubah.
b. Alur untuk beberapa fitur dapat diubah menjadi lebih efektif.
c. Layout ingin dibuat menjadi lebih rapi.
d. Jenis tombol dan pop-up tidak konsisten.
e. Icon-icon diubah menjadi lebih jelas dan cantik.
f. Typeface yang sekarang dipakai kurang baik.
g. Membuat tampilan untuk fitur-fitur yang sudah ada dan yang kedepannya akan dimasukan ke dalam aplikasi.
3. Pembuatan Wireframe
Dalam pembuatan wireframe, penulis membuat sketsa kasar untuk brainstorming ide untuk mengeksplor tampilan aplikasi. Karena tidak semua halaman diubah ulang, penulis hanya melakukan sketsa kasar untuk halaman tertentu. Halaman-halaman yang tampilannya hanya memerlukan layout ulang, penulis langsung membuat perubahan dalam Figma .
Gambar 3.16. Sketsa Kasar Wireframe
4. Pembuatan User Interface
Pada tahap ini, penulis menentukan aspek-aspek visual yang digunakan dalam aplikasi. Penentuan aspek visual user interface mengacu kepada informasi dari tahap brief dan tahap riset. Aspek visual yang dibahas disini adalah icon, typeface dan tombol-tombol.
Dalam pembuatan icon, penulis mengacu kepada teori Landa (2014) dimana sebuah icon sebaiknya menggambarkan secara akurat bentuk objek dengan menggunakan campuran dari bentuk dasar dan sudut pandang yang paling jelas. Selain itu, icon yang digambarkan berdasarkan objek yang dapat dikenali secara umum. Dan yang terakhir adalah konsistensi desain icon sehingga terbentuknya sebuah sistem yang jelas dan serupa.
Penulis pertama melakukan sketsa kasar terhadap icon-icon yang memerlukan desain ulang. Untuk icon-icon yang menurut penulis sudah
sesuai, penulis tidak mengubahnya. Setelah menemukan gambaran terhadap tampilan, penulis mengambil icon-icon dari sketsa kasar dan dibuat ke digital .
Gambar 3.17. Sketsa Kasar Icon
Karena pengguna aplikasi merupakan orang yang berusia lanjut dengan pengetahuan minimal terhadap teknologi, penulis memastikan untuk membuat icon-icon menggunakan desain yang simpel dan terus terang. Untuk icon sistem seperti dasbor atau profil, penulis menggunakan desain yang filled dengan detail yang minimal.
Gambar 3.18. Icon Sistem
Sebaliknya untuk icon produk, penulis mendorong kesan warna-warni dengan membuat produk-produk mencolok di mata pengguna. Gaya icon disini menggunakan shading dan lighting dengan sudut pandang objek yang terlihat dari depan. Dibanding dengan icon sistem, icon produk memiliki lebih banyak detail untuk mendeskripsikan lebih jelas produk-produk Danakini.
Gambar 3.19. Icon Produk
Menurut Golombisky dan Hagen (2010), penggunaan font sans serif umumnya digunakan pada layar digital karena memiliki kemudahan untuk keterbacaannya. Selain itu, karena aplikasi ini berbasis Android , penulis dianjurkan untuk menggunakan typeface dari Google Fonts. Maka dari itu, jenis font yang paling sesuai adalah sans serif dari Google Fonts.
Kesan yang penulis ingin sampaikan melalui typeface lebih berfokus kepada kata kunci dipercayai tetapi tetap terlihat rigid sehingga memperlihatkan aspek keseriusan dalam mengurus finansial pengguna. Dari sini, penulis menemukan empat typeface yang sesuai yaitu Open Sans, Roboto, Montserrat, dan Raleway. Setelah melakukan pencocokan dengan masing-masing typeface, penulis memutuskan untuk menggunakan Raleway sebagai typeface utama untuk judul dan tombol, dan Roboto sebagai typeface sekunder untuk body text dan subheading.
Gambar 3.20. Typeface yang Digunakan
Selanjutnya untuk tombol, penulis memastikan bahwa setiap tombolnya memiliki penjelasan atau judul sehingga mempergampang penggung untuk mengerti fungsi tombol tersebut. Selain itu, icon-icon dibuat lebih kecil atau setara dengan tulisannya sehingga pengguna dapat lebih fokus kepada tulis. Secara desain, penulis menggunakan tombol dengan ujung yang rounded dan memiliki bayangan sehingga memberikan emphasis dibanding komponen yang tidak bisa dipencet.
Gambar 3.21. Menu, Tombol, dan Input Field
5. Relayout
Pada tahap relayout, penulis menggunakan aspek desain dari tahap sebelumnya dan diimplementasikan kepada tampilan aplikasi yang sebelumnya. Pada aplikasi sebelumnya, desain yang digunakan untuk setiap produk berbeda karena beda orang yang membuatnya. Maka dari itu, relayout dilakukan sehingga dapat memperbaiki hirarki typeface, jarak antara komponen, ukuran icon, ukuran tombol, dan lain-lainnya.
Penentuan sistem grid mengacu kepada teori oleh Landa (2014).
Menurut Landa, single column cocok digunakan untuk layout layar-layar pada mobile phone dan website karena bentuk gridnya yang simple. Maka dari itu, penulis menggunakan sistem grid yang single column atau manuscript. Untuk
margin kiri dan kanan, penulis menyesuaikan dengan margin sebelumnya yaitu 20 px. Di tahap ini, penulis fokus untuk membuat seluruh halaman konsisten tanpa mengubah isi dalam halaman tersebut. Berikut adalah beberapa contoh halaman yang telah di relayout dengan mengimplementasi aspek desain pada tahap user interface.
Gambar 3.22. Halaman di Relayout
Karena halaman dasbor memiliki perubahan terbesar, penulis membuat beberapa tampilan alternatif sehingga memberikan pilihan terhadap desainnya.
Dalam pembuatan dasbor, penulis berfokus kepada tata letak tombol pada header dan juga bagaimana sehingga seluruh fitur-fitur ditampilkan dengan jelas dan tetap terlihat bagus. Ketiga desain dasbor ini memiliki fitur-fitur yang sama, tetapi peletakan tombol dan desain yang berbeda.
Gambar 3.23.Tampilan Alternatif Dasbor
Setelah menyelesaikan desain ulang, penulis lanjut membuat prototype menggunakan alur yang sama dengan aplikasi yang sebelumnya. Untuk memastikan prototype sudah sesuai, penulis meminta bantuan dari Agustina dan Rizky Pahlevi untuk melakukan user testing. Setelah memastikan bahwa alur dan desain sudah sesuai, penulis serahkan prototype kepada Rizky Pahlevi untuk dipresentasikan kepada user.
Gambar 3.24. Presentasi Tampilan Aplikasi Baru
6. Hasil Akhir
Setelah memperlihatkan hasil akhir kepada user, penulis melakukan beberapa revisi, khususnya kepada susunan kata kurang tepat pada prototype tersebut.
Berikut adalah hasil akhir tampilan aplikasi setelah melakukan revisi. Karena desain baru aplikasi belum dipublikasi, penulis hanya dapat memperlihatkan sebagian kecil dari perancangan yang telah dibuat.
Yang pertama adalah dasbor dimana terjadinya perubahaan terbesar.
Dibanding sebelumnya, dasbor yang baru memiliki ruang untuk menampung lebih banyak konten untuk kedepannya. Beberapa fitur-fitur yang penting dipindah ke header sehingga dapat diakses ketika sedang scroll down. Selain itu, produk-produk Danakini dibuat di dalam satu menu sendiri yang dapat di drag ke atas untuk melihat sepenuhnya.
Gambar 3.25. Dasbor dan Menu Produk
Berikutnya adalah beberapa contoh halaman-halaman yang telah dilakukan relayout. Contoh pertama adalah halaman perkenalan untuk produk 'kiniCintaku' . Di halaman ini penulis mengubah icon menjadi foto furnitur,
dan juga mengubah kotak berwarna biru menjadi warna jingga sehingga warna yang digunakan lebih bervariasi. Selain itu, penulis juga pindah penjelasan untuk contoh perhitungan ke halaman syarat dan ketentuan karena informasinya lebih sesuai ditampilkan di halaman itu.
Gambar 3.26. Halaman Penjelasan 'kiniCintaku'
Pada contoh selanjutnya, penulis merubah halaman untuk status konfirmasi data pelanggan. Di halaman ini, penulis menambahkan icon untuk memperlihatkan lebih jelas status setiap pengecekannya dan juga menambahkan garis untuk memperlihatkan alur langkah pengecekan data
pelanggan. Selain itu, penulis mengubah tombol dan tulisan pada tombol sehingga lebih mudah untuk diakses dan dibaca oleh pengguna.
Gambar 3.27. Halaman Konfirmasi Data Pelanggan
Yang terakhir, untuk halaman-halaman yang memiliki banyak komponen seperti input field atau rincian transaksi , penulis merapikan tata letak dan jarak antara setiap komponen. Penulis juga memastikan bahwa setiap komponen-komponen memiliki desain yang sama sesuai dengan desain yang telah penulis terapkan. Selain itu, penulis memperbaiki beberapa ukuran icon-icon sehingga lebih nyaman untuk dilihat.
Gambar 3.28. Halaman Dengan Input Field
3.3.2. Kendala yang Ditemukan
Selama kerja magang di PT Dana Kini Indonesia, penulis tidak menemukan banyak kendala. Secara teknis, penulis cukup nyaman dengan pengerjaan tugas-tugas dengan software Figma dan tugas yang diberikan masih bisa tangani oleh penulis . Kendala-kendala yang penulis temukan lebih kepada kurangnya pengalaman penulis di dunia nyata. Salah satunya adalah kurangnya pengertian penulis terhadap pinjaman dan dunia fintech. Hal ini membuat penulis ragu untuk mengubah alur dan data yang ditampilkan secara drastis, walaupun perubahaan tersebut dapat membuat aplikasi lebih efektif.
Selain itu, kurangnya pengalaman penulis terhadap lingkungan kerja perkantoran membuat penulis seringkali kesalahan dalam berkomunikasi. Penulis
terkadang tidak dapat mengikuti alur rapat, sehingga terkadang tidak mengerti keputusan akhir yang telah dibahas. Hal ini membuat penulis membuat kesalahan ketika membuat tugas-tugas, sehingga harus membuat ulang beberapa kali supaya sesuai dengan apa yang sebenarnya dimaksud.
3.3.3. Solusi Atas Kendala yang Ditemukan
Solusi dari kedua kendala adalah untuk lebih berkomunikasi dengan supervisor dan rekan-rekan kerja. Jika penulis kurang mengerti mengenai sebuah tugas, penulis dapat menanyakan secara langsung kepada supervisor atau business analyst untuk dijelaskan. Untuk kurangnya pengertian saat rapat, jika ada kesempatan, penulis bisa meminta salah satu peserta rapat untuk merekap ulang desisi akhir sehingga penulis mendapatkan kepastian. Selain itu, jika penulis masih kurang paham, penulis dapat meminta catatan rapat dari peserta rapat lain.
