BAB V PROSES PERANCANGAN. A. Alur Perancangan User Interface. dibuat user flow. Setelah konten dan user flow dirancang, makan tahapan

library.uns.ac.id. digilib.uns.ac.id. BAB V PROSES PERANCANGAN. A. Alur Perancangan User Interface. Alur dalam perancangan user interface aplikasi Joli Jolan menggunakan metode design thinking. Pada tahapan konten, proses ini penulis menentukan User Persona untuk mengetahui secara nyata perilaku pengguna, setelah itu dapat menentukan konten yang sesuai dengan User Persona untuk selanjutnya dibuat user flow. Setelah konten dan user flow dirancang, makan tahapan selanjutnya adalah pembuatan wireframe. Low fidelity wireframe di rancangan secara kasar atau menggunakan bentuk bentuk sederhana pada sketsa untuk selanjutnya diterjemahkan secara detail pada pembuatan high fidelity wireframe. Selanjutnya adalah tahap UI desian, pada tahap ini menentukan visual UI yang akan dirancang, seperti referensi desain, membuat moodboard, membuat komponen visual seperti ilustrasi dan ikon, hingga menentukan style guide. Hasil dari tahapan ini akan dilakukan tes terhadap pengguna dan selanjutnya dapat menjadi sebuah UI aplikasi yang utuh.. Gambar 24 Alur Perancangan UI Aplikasi Joli Jolan.

74 digilib.uns.ac.id. library.uns.ac.id. Perancangan UI aplikasi Joli Jolan ini memiliki strategi kreatif terdiri dari beberapa poin, yaitu sebagai berikut: 1. Moodboard Moodboard merupakan referensi yang digunakan desainer untuk menghasilkan arahan estetika dan nuansa yang ingin dicapai dalam sebuah proyek sebelum mengembangkan ke tahapan desain selanjutnya. Moodboard mampu menyediakan informasi dan referensi visual yang dibutuhkan. Referensi ini diambil dari desain UI beberapa aplikasi yang sudah ada, yang dirasa cocok dengan konsep dan kebutuhan UI aplikasi Joli Jolan.. Gambar 25 Mood Board 2. Style Guide Style Guide adalah standar untuk perancangan suatu proyek, baik untuk penggunaan umum atau untuk publikasi dan kepentingan tertentu. Style Guide menetapkan sebuah gaya desain untuk memaksimalkan bentuk komunikasi yang ingin disampaikan. Panduan ini berguna untuk menetapkan konsistensi dalam sebuah perancangan. Style Guide yang.

75 digilib.uns.ac.id. library.uns.ac.id. digunakan sebagai standar visual pada perancangan UI aplikasi Joli Jolan ini secara garis besar di tampilkan sebagai berikut:. Gambar 26 Style Guide. B. Pengembangan Desain. 1. App Branding a. Logo Konsep dari logo ini merupakan bentuk dari huruf J diambil dari kata Joli Jolan, dan menggunakan bentuk sederhana dari orang.

76 digilib.uns.ac.id. library.uns.ac.id. dan tangan yang memiliki makna solidaritas dan komunitas. Logo digunakan pada app launcher atau gambar aplikasi pada menu di telepon genggam, juga di gunakan pada UI aplikasi Joli Jolan.. Gambar 27 Contoh penempatan logo b. Ikon Ikon yang digunakan menggunakan ikon yang biasa ditemukan pada tampilan UI suatu aplikasi. Pada UI aplikasi Joli Jolan ini yang membedakan adalah ikon dibuat dengan warna dari standar visual perancangan ini, berikut adalah ikon tersebut.. Gambar 28 Ikon.

77 digilib.uns.ac.id. library.uns.ac.id. 2. Wireframe Wireframe adalah kerangka atau sketsa kasar untuk penataan item-item halaman website atau aplikasi sebelum proses desain sesungguhnya dimulai. Contoh item-item yang bisa ditata pada wireframing ini adalah banner, konten, form input, button, dll. Dalam perancangan UI aplikasi Joli Jolan wireframing akan dibuat sesuai dengan konten dan fitur yang telah dikonsepkan sebelumnya, dalam perancangan ini akan dilakukan dua tahap wireframening yaitu low fidelity wireframe dan high fidelity wireframe. a. Low Fidelity Low fidelity wireframes adalah wireframe yang dibuat dengan cara yang cepat dan sederhana. Biasanya berbentuk sketsa di atas kertas. Ini merupakan pijakan awal dalam proses perancangan tata letak UI sebuah aplikasi, tahap ini juga berguna dalam visualisasi tahap high fidelity wireframe. Pada perancangan ini penulis menggunakan kertas dengan ukuran telepon genggam android standar yaitu 360 x 640 px. Berikut adalah low fidelity wireframe pada perancangan UI aplikasi Joli Jolan:.

78 digilib.uns.ac.id. library.uns.ac.id. 1. Splash Screen. Gambar 29 Logo dan Splash Screen 2. Masuk/Daftar. Gambar 30 Tampilan Masuk, Registrasi, dan Syarat dan Ketentuan Screen.

79 digilib.uns.ac.id. library.uns.ac.id. 3. Home. Gambar 31 Tampilan Home, Notifikasi dan Wish List Screen. 4. Feed. Gambar 32 Tampilan Feed Screen.

80 digilib.uns.ac.id. library.uns.ac.id. 5. Keranjang. Gambar 33 Tampilan Keranjang dan Detail Barang Screen 6. Profil. Gambar 34 Tampilan Profil Akun Mencari dan Menyumbang Barang b. High Fidelity High fidelity wireframes merupakan desain jadi dari rancangan UI aplikasi yang akan dibuat. Wireframes ini adalah versi detail dari low fidelity, letak detailnya seperti pada warna, ikon,.

81 digilib.uns.ac.id. library.uns.ac.id. kalimat pada konten dan kebutuhan lainnya yang mendukung wireframe lebih jelas untuk dimengerti. Tampilan dari konsep UI akan diterjemahkan secara lebih jelas, dan mengikuti pedoman dari Google material design. Berikut adalah tampilan high fidelity wireframe pada perancangan UI aplikasi Joli Jolan.. Gambar 35 High Fidelity Wireframes Splash Screen. Tampilan di atas adalah tampilan splash screen aplikasi Joli Jolan, tampilan tersebut akan membuka aplikasi tersebut dengan menjelaskan apakah aplikasi ini..

82 digilib.uns.ac.id. library.uns.ac.id. Gambar 36 High Fidelity Wireframes Daftar dan Masuk dengan Akun Tampilan di atas adalah tampilan awal setelah splash screen. Pada tampilan ini pengguna diharuskan untuk daftar atau masuk dengan akun untuk mengakses seluruh fitur pada aplikasi Joli Jolan. Ada pula tampilan syarat dan ketentuan yang berfungsi untuk melindungi pengguna, selain masuk atau daftar dengan akun, pengguna harus setuju dengan syarat dan ketentuan yang ada untuk dapat mengakses fitur aplikasi Joli Jolan..

83 digilib.uns.ac.id. library.uns.ac.id. Gambar 37 High Fidelity Wireframes Home, Kategori, Notifikasi, dan Wish List Tampilan di atas merupakan tampilan home dari aplikasi Joli Jolan. Fitur pada home pada tampilan ini ada beberapa, yaitu ada pencarian, banner ads, kategori, notifikasi, wish list, dan barangbarang yang tersedia..

library.uns.ac.id. 84 digilib.uns.ac.id. Gambar 38 High Fidelity Wireframes Feed Tampilan di atas adalah tampilan fitur feed pada aplikasi Joli Jolan, yang berisi tentang update dari pengguna berupa testimoni dan dari pihak Joli Jolan berupa informasi tentang kebutuhan donasi..

85 digilib.uns.ac.id. library.uns.ac.id. Gambar 39 High Fidelity Wireframes Keranjang dan Pengambilan Barang Lima tampilan di atas adalah keranjang pada aplikasi Joli Jolan. Menjelaskan flow dari barang yang akan diambil oleh user pencari barang sampai user mengambil barang.. Gambar 40 High Fidelity Wereframes Profil Dua tampilan di atas adalah tampilan fitur profil pada aplikasi Joli Jolan. Tampilan ini menampilkan profil pengguna sebagai pencari barang dan pendonasi. Pada akun donasi dapat melakukan posting donasi barang..

86 digilib.uns.ac.id. library.uns.ac.id. 3. Prototyping Prototyping dilakukan setelah menyusun high fidelity wireframe selesai. Prototype ini nantinya akan digunakan sebagai alat dalam usability testing kepada user persona.. Gambar 41 Proses Prototyping 4. Usability Testing Proses usability testing dalam perancangan aplikasi Joli Jolan dilakukan dengan cara menguji prototype wireframes aplikasi kepada user persona. Prototype ini dibuat berdasarkan konten serta user flow yang telah di tentukan sebelumnya. Dalam pelaksanaan usability test, dilaksanakan uji user flow terhadap konten aplikasi Joli Jolan. Usability testing aplikasi Joli Jolan berikut ini menggunakan uji black box untuk pengetesan langsung aplikasi terhadap user persona. Berikut daftar pertanyaan kuesioner untuk pengujian kepada tiga puluh orang user persona secara acak..

87 digilib.uns.ac.id. library.uns.ac.id. No.. Pertanyaan. SS. 1.. Apakah aplikasi ini cepat saat. S. N. TS. STT. diakses melalui internet? 2.. Apakah tampilan UI/UX menarik dan sesuai fungsinya?. 3.. Apakah menu navigasi pada menu utama berfungsi dengan baik?. 4.. Apakah icon yang ditampilkan mudah dikenal fungsinya?. 5.. Apakah. tidak. permasalahan. terjadi. (error). saat. menggunakan aplikasi? Tabel 4 Pertanyaan Usability testing Poin Penilaian: Kode. Keterangan. Nilai. SS. Sangat Setuju. 5. S. Setuju. 4. N. Netral. 3. TS. Tidak Setuju. 2. STS. Sangat Tidak Setuju. 1. Tabel 5 Keterangan Penilaian. Setelah melakukan pengujian terhadap tiga puluh orang user persona secara acak, didapatkan hasil seperti pada tabel di bawah ini:.

88 digilib.uns.ac.id. library.uns.ac.id. No. Pertanyaan. SS. 1.. Apakah aplikasi ini cepat saat 9. S. N. TS. STT. 16. 5. 0. 0. 18. 4. 0. 0. 19. 4. 0. 0. 15. 3. 0. 0. 13. 4. 1. 0. diakses melalui internet? 2.. Apakah tampilan UI/UX menarik 8 dan sesuai fungsinya?. 3.. Apakah menu navigasi pada menu 7 utama berfungsi dengan baik?. 4.. Apakah icon yang ditampilkan 12 mudah dikenal fungsinya?. 5.. Apakah tidak terjadi permasalahan 12 (error). saat. menggunakan. aplikasi? Tabel 6 Hasil Usability Testing Setelah melakukan usability testing dengan menggunakan uji black box terhadap aplikasi Joli Jolan didapatkan hasil bahwa aplikasi Joli Jolan layak digunakan dan diimplementasikan. Adapun data hasil pengisian kuesinoner dari jumlah hasil sangat setuju dan setuju dalam persen adalah 83% pengguna menyatakan aplikasi Joli Jolan cepat saat diakses melalui internet, 86% pengguna menyatakan tampilan UI/UX menarik dan sesuai fungsinya, 86% pengguna menyatakan menu navigasi pada menu utama berfungsi dengan baik, 90% pengguna menyatakan icon yang ditampilkan mudah dikenal fungsinya, dan 83% saat menggunakan tidak terjadi permasalahan saat menggunakan aplikasi..

89 digilib.uns.ac.id. library.uns.ac.id. C. Tampilan Visual User Interface Aplikasi. Berikut adalah hasil akhir visual user interface dari perancangan UI aplikasi Joli Jolan. 1. Aplikasi Joli Jolan. Gambar 42 Aplikasi Joli Jolan Media. : Digital. Ukuran. : 20 MB. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Illustrator. Realisasi. : Aplikasi pada Android. OS. : Minimal Android 5. Penempatan. : Google Play Store.

90 digilib.uns.ac.id. library.uns.ac.id. 2. Tampilan Awal. Gambar 43 Tampilan Awal (On Boarding Apps).

91 digilib.uns.ac.id. library.uns.ac.id. 3. Tampilan Daftar dan Masuk. Gambar 44 Tampilan Daftar dan Masuk Apps.

92 digilib.uns.ac.id. library.uns.ac.id. Gambar 45 Tampilan Syarat dan Ketentuan.

93 digilib.uns.ac.id. library.uns.ac.id. 4. Tampilan Home. Gambar 46 Tampilan Home.

94 digilib.uns.ac.id. library.uns.ac.id. Gambar 47 Tampilan Kategori. Gambar 48 Tampilan Notifikasi(kiri) dan Wish List(kanan).

95 digilib.uns.ac.id. library.uns.ac.id. 5. Tampilan Feed. Gambar 49 Tampilan Feed.

96 digilib.uns.ac.id. library.uns.ac.id. 6. Tampilan Keranjang. Gambar 50 Tampilan Keranjang.

97 digilib.uns.ac.id. library.uns.ac.id. Gambar 51 Tampilan Pengambilan Barang.

98 digilib.uns.ac.id. library.uns.ac.id. 7. Tampilan Profil. Gambar 52 Tampilan Profil akun Pencari dan akun Donasi.

99 digilib.uns.ac.id. library.uns.ac.id. D. Desain Media Pendukung Media pendukung berikut dipilih karena mempertimbangkan media utama dan target user. Media ini diharapkan mampu memperkuat media utama berupa Aplikasi Joli Jolan. Oleh karena itu, dipilih media pendukung sebagai berikut: 1. Poster. Gambar 53 Desain Poster Aplikasi Joli Jolan Media. : Art paper 150gr. Ukuran. : A3. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Digital Printing. Penempatan. :Kantor Joli Jolan dan Papan Pengumuman seluruh Kelurahan di Kota Solo.

100 digilib.uns.ac.id. library.uns.ac.id. 2. Banner. Gambar 54 Desain Banner Media. : MMT. Ukuran. : 60 cm x160 cm. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Digital Printing. Penempatan. :Kantor Joli Jolan dan Papan Pengumuman seluruh Kelurahan di Kota Solo.

101 digilib.uns.ac.id. library.uns.ac.id. 3. Flyer. Gambar 55 Desain Flyer. Media. : Art paper 100gr. Ukuran. : A5. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Digital Printing. Penempatan. : Untuk dibagikan di tempat ramai.

102 digilib.uns.ac.id. library.uns.ac.id. 4. Media Sosial a. Instagram. Gambar 56 Desain Instagram Post. Media. : Digital. Ukuran. : 1080px x 1080px. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Instagram. Penempatan. : Instagram.com/joli_jolan.

103 digilib.uns.ac.id. library.uns.ac.id. b. Facebook. Gambar 57 Desain Halaman Facebook. Media. : Digital. Ukuran. : 940px x 788px. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Halaman Facebook. Penempatan. : facebook.com/joli_jolan.

104 digilib.uns.ac.id. library.uns.ac.id. 5. Online Ads Banner. Gambar 58 Desain Online Ads Banner. Media. : Digital. Ukuran. : 940px x 360px. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Onilne banner. Penempatan. : Ads pada Website.

105 digilib.uns.ac.id. library.uns.ac.id. 6. Stiker. Gambar 59 Desain Stiker. Media. : Kertas stiker 100gr. Ukuran. : 6cm x 6cm. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Digital Printing. Penempatan. : Untuk diberikan pada setiap kegiatan.

106 digilib.uns.ac.id. library.uns.ac.id. 7. Business Card. Gambar 60 Desain Business Card. Media. : Art Carton 260gr. Ukuran. : 9cm x 5,5cm. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Digital Printing. Penempatan. : Sebagai tanda pengenal relawan Joli Jolan.

107 digilib.uns.ac.id. library.uns.ac.id. 8. Lakban. Gambar 61 Desain Lakban. Media. : Material Bopp. Area Cetak. : 4,5cm. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Digital Printing. Penempatan. : Untuk pack barang.

108 digilib.uns.ac.id. library.uns.ac.id. 9. Kaos. Gambar 62 Desain Kaos. Media. : Cotton combed. Area Cetak. : A4. Tipografi. : Nunito Sans. Visualisasi Karya. : Figma, Adobe Photoshop. Realisasi. : Teknik Cetak DTG. Penempatan. : Merchandise untuk penyumbang barang.