Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Rancang Bangun Desain UI/UX Pada Pembuatan Startup Aplikasi Selfcare Berbasis Website Design and Build a UI/UX Design in Creating a Website-Based Selfcare Application Startup M Lutfi Akbar *1, Ari Usman2, Arief Budiman3 1,2,3 Prodi Teknik Informatika Universitas Harapan Medan, JL. HM. Joni No. 70 C, Teladan Barat Kota Medan, Sumatera Utara, Indonesia. E-mail: 1* Abstrak Di masa pandemi ini, masyarakat disarankan untuk tidak melakukan kontak fisik dan bertemu dengan orang yang tidak penting. Dan banyak berbagai penjual produk beralih ke e- commerce atau transaksi online berbasis website, dalam pembuatan website tersebut sangat dibutuhkan yang namanya tampilan desain UI/UX yang menarik. Dalam pembuatan tampilan desain UI/UX tersebut dibutuhkan aplikasi yang bernama Figma. Oleh karena itu peneliti akan merancang dan membangun sebuah desain UI/UX pada pembuatan aplikasi selfcare berbasis website agar memudahkan para pelanggan dan penjual dalam bertransaksi jual beli produk tersebut. Kata kunci: Website, Figma, UI/UX, Online Shop Abstract During this pandemic, people are advised not to make physical contact and meet people who are not important. And many various product sellers switch to e-commerce or website-based online transactions, in making the website it is very necessary to have an attractive UI/UX design. In making the UI/UX design display, an application called figma is needed. Therefore, the researcher will design and build a UI/UX design in making a website-based selfcare application to make it easier for customers and sellers to transact buying and selling these products. Keywords: Website, Figma, UI/UX, Online Shop 1. Pendahuluan Pada saat ini, perkembangan teknologi dan informasi sudah sangatlah pesat. Keberadaan internet telah menyediakan akses secara mudah untuk menemukan informasi. Kemajuan teknologi sangat erat kaitannya dengan aktivitas sehari-hari sehingga saat ini hampir semua orang, baik anak-anak, remaja maupun dewasa menggunakan teknologi. Penyusunan desain aplikasi sering dilakukan tanpa 158 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 pengamatan dengan pengguna, yang menyebabkan kesalahan. Seringkali, hasil desain setelah selesai tidak sesuai dengan kebutuhan pengguna. Membuat desain yang tidak sesuai dapat menyebabkan masalah penggunaan aplikasi setelah selesai. Pembuatan desain aplikasi sangat diperlukan agar dapat menghasilkan ide. Perancangan desain antarmuka (User Interface) dan desain pengalaman pengguna (User Experience) merupakan tahapan yang sangat penting dalam pengembangan sebuah perangkat lunak. User Interface (UI) adalah desain antarmuka yang fokus pada keindahan dari sebuah tampilan, dan pemilihan warna yang baik. Sedangkan, User Experience (UX) adalah proses meningkatkan kepuasan pengguna situs atau aplikasi tertentu melalui kegunaan dan kesenangan yang diberikan dalam interaksi antara pengguna dan produk. Salah satu kegiatan yang terkena dampak kemajuan tersebut adalah kegiatan jual beli yang sekarang sudah berbasis e-commerce. E-commerce adalah proses aktivitas jual beli secara elektronik yang memungkinkan masyarakat untuk melakukan aktivitas jual beli tanpa menghabiskan banyak waktu untuk melakukan aktivitas jual beli secara tatap muka. Dalam menemukan informasi spesifik menggunakan mesin pencari google dari sumber - sumber yang ada tidaklah selalu dianjurkan. Oleh karena itu, aturan untuk menyortir dan memilih informasi menjadi sangat penting. Informasi real-time dan data yang akurat akan membantu dalam pemantauan, terutama bagi pengguna e-commerce. Dalam kemajuan era global dalam pasar nasional maupun internasional, yang dimana disaat zaman yang maju dan semakin modern pada saat ini mendorong berbagai macam perubahan terhadap dunia perbelanjaan online. Di masa pandemi ini, masyarakat disarankan untuk tidak melakukan kontak fisik dan bertemu dengan orang yang tidak penting, karena e-commerce merupakan aktivitas jual beli yang paling direkomendasikan. E- commerce dapat berinteraksi melalui situs web, aplikasi, dan media sosial lainnya, serta menggunakan internet sebagai penghubungnya [1]. Perkembangan pesat di era globalisasi inilah merangsang masyarakat untuk dapat bersaing dan memiliki kesempatan didalam merintis bisnis baru atau startup. Startup ialah suatu organisasi yang dirancang untuk menemukan model bisnis yang tepat sehingga dapat menghasilkan keuntungan yang maksimal. Startup identik dengan bisnis baru yang belum lama beroperasi [2]. Forever19.id merupakan sebuah bisnis yang bergerak dibidang kecantikan seperti skincare. Forever19.id dapat memberikan kualitas produk yang terbaik seperti, ngereview produk skincare. Peneliti ini akan merancang membuat desain website Forever19.id agar lebih banyak yang mengetahui tentang produk dan mudah diakses. Figma adalah aplikasi desain berbasis cloud dan alat prototyping untuk proyek digital. Figma dibuat untuk dapat membantu para penggunanya agar bisa berkolaborasi dalam proyek dan bekerja dalam bentuk tim sekaligus di mana saja. Meskipun alat ini sangat mirip dengan opsi prototyping lainnya seperti Sketsa, Adobe XD, dan lainnya, yang menjadi pembeda utamanya adalah kemampuan untuk bekerja dalam bentuk tim proyek. Dengan alat berbasis vektor yang hidup di cloud, Figma memungkinkan para penggunanya untuk bekerja di mana saja dari browser. Cara ini termasuk alat zippy 159 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 yang dibuat untuk desain, pembuatan prototipe, kolaborasi, dan sistem desain organisasi [3]. Berdasarkan penelitian sebelumnya desain UI/UX dapat dilakukan dengan berbagai macam teknik dan metode seperti yang dibuat oleh [4] dengan judul Desain UI UX Aplikasi Penjualan dengan Menyelaraskan Kebutuhan Bisnis menggunakan Pendekatan Design Thinking menyatakan bahwa, pengujian menggunakan Usability Testing dengan memberikan 4 User Scenario pada setiap responden untuk dijalankan dan diselesaikan pada prototype. Hasil pengujian menunjukkan bahwa responden dapat menyelesaikan seluruh User Scenario pada iterasi pertama sebesar 100%. Berdasarkan hasil pengujian dapat disimpulkan bahwa desain sudah baik, selaras dengan kebutuhan bisnis, serta dapat diterima oleh para calon pengguna. Pada penelitian yang dibuat oleh [1] dengan judul Desain UI/UX Aplikasi HealMed Menggunakan Metode Design Thinking menyatakan bahwa, metode ini merupakan metode pendekatan yang berpusat pada manusia atau human centris untuk menyelesaikan masalah dan menghadirkan ide atau inovasi baru. Untuk mendapatkan feedback dan menggali permasalahan dilakukan proses research dan pengujian. Penggunaan metode Design Thinking diharapkan mampu memenuhi kebutuhan dan dapat menyelesaikan permasalahan pengguna saat menggunakan aplikasi HealMed. Setelah berhasil menemukan dan memahami permasalahan didapatkan hasil desain aplikasi mencakup UI (User Interface) dan UX (User Experience) yang mampu menjadi solusi dari permasalahan yang ada. Pada penelitian selanjutnya yang dibuat oleh [5] dengan judul Perancangan UI/UX Pada Aplikasi Bapakkost Dengan Metode Design Thinking menyatakan bahwa, penerapan metode Design Thinking dalam pengembangan User Interface/User Experience (UI/UX) pada aplikasi Bapak Kost bertujuan untuk menghubungkan pemilik kost dengan calon penghuni kost menjadi satu tempat yaitu menggunakan website Bapak Kost online sehingga pemilik kost dapat mengiklankan kost secara online dan Bapak Kost juga menyediakan booking untuk calon penghuni agar calon penghuni dapat memesan kost secara online sehingga calon penghuni tidak mengalami keterlambatan pesan kamar kost. Setelah melalui tahapan-tahapan dari metode Design Thinking, berhasil dikembangkannya aplikasi Bapak Kost yang telah memudahkan dan memenuhi kebutuhan pengguna. Berdasarkan dari latar belakang masalah diatas, maka peneliti ingin merancang membuat sebuah desain UI/UX pada sebuah website pada aplikasi startup selfcare. Dimana dengan perancangan desain ini dapat memikat pelanggan Forever19.id, serta dapat meyakinkan pelanggan untuk bertransaksi di website 2. Metodologi Penelitian Metodologi adalah sebuah tahapan tahapan yang dilakukan dalam penelitian yang telah dilakukan. Berikut adalah metodologi dalam penelitian ini. 160 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 2.1. Analisa Masalah Perkembangan teknologi dan informasi sudah sangat pesat. Keberadaan internet telah menyediakan akses secara mudah untuk menemukan informasi. Kemajuan teknologi sangat erat kaitannya dengan aktivitas sehari-hari sehingga saat ini hampir semua orang, baik anak-anak, remaja, dewasa maupun orang tua menggunakan teknologi tersebut. Perkembangan teknologi dalam bidang usaha dapat memanfaatkan sarana digital maupun internet untuk meningkatkan sebuah brand atau merek didalam usaha. Dimana salah satu contoh perkembangan teknologi adalah desain UI/UX (User Interface dan User Experience), dimana dapat dimanfaatkan bagi seluruh masyarakat untuk melakukan perancangan terhadap sebuah jenis produk atau perancangan sebuah website lainnya. Sebelumnya masyarakat mau belanja harus berkunjung sebuah lokasi seperti skincare dan lain sebagainya, namun saat ini masyarakat dapat berbelanja secara online. Dengan berkembangnya zaman teknologi sekarang dalam tentang desain UI/UX (User Interface dan User Experience) ini memiliki tujuan untuk meningkatkan kenyamanan dan mudah bagi pengguna pada saat berkunjung dan bertransaksi ke website sebuah online shop (olshop). Pada masa pandemi saat ini masyarakat lebih banyak memilih berbelanja online dibandingkan dengan belanja offline, hal ini membuat para penjual mengenalkan sebuah produk mereka melalui website. Dengan memanfaatkan perkembangan teknologi saat ini peneliti akan merancang sebuah desain website Forever19.id, agar lebih mudah memasarkan produk kepada para pelanggan tersebut. Peneliti ini akan menggunakan salah satu aplikasi desain yaitu Figma. Dalam perancangan desain UI/UX peneliti memilih menggunakan aplikasi figma karena aplikasi tersebut user friendly, mudah dipahami, mudah dipakai, dan aplikasi ini tidak berbayar (free). Sehingga para usaha online dapat mencoba merancang desain website mereka secara gratis dan mudah serta dapat menghasilkan sebuah desain website UI/UX untuk meningkatkan brand atau merek produk mereka. UI dan UX adalah singkatan dari User Interface dan User Experience yakni merupakan sebuah tampilan visual dalam sebuah aplikasi atau alat pemasaran digital dalam bentuk website yang dapat meningkatkan brand yang dimiliki oleh bisnis atau perusahaan [6]. User Interface (UI) merupakan desain antarmuka yang fokus pada keindahan dari sebuah tampilan, dan pemilihan warna yang baik. Sementara itu, User Experience (UX) merupakan proses meningkatkan kepuasan pengguna situs atau aplikasi tertentu melalui kegunaan dan kesenangan yang diberikan dalam interaksi antara pengguna dan produk. User Interface (UI) adalah ilmu tentang tata letak grafis suatu web atau aplikasi. Cakupan User Interface adalah tombol yang akan diklik oleh pengguna, teks, gambar, text entry fields, dan semua item yang berinteraksi dengan pengguna. Termasuk layout, animasi, transisi, dan semua interaksi kecil. User Interface mendesain semua elemen visual, bagaimana pengguna berinteraksi dengan halaman web dan apa yang ditampilkan di halaman web. Elemen visual yang ditangani oleh seorang desainer User Interface adalah skema warna, menentukan bentuk tombol, serta menentukan jenis font yang digunakan untuk teks. Desainer User Interface harus bisa membuat tampilan bagus 161 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 yang akan meningkatkan kesetiaan pengguna [6]. Menurut [7] User Interface adalah input dan output yang langsung melibatkan sistem pengguna akhir. Antarmuka pengguna dapat digunakan langsung oleh pengguna internal atau eksternal sistem. Desain dari User Interface sendiri bisa bervariasi banyak tergantung pada faktor- faktor seperti tujuan antarmuka, karakteristik pengguna, dan karakteristik perangkat interface tertentu. Sebagai contoh, meskipun semua antarmuka pengguna harus dirancang untuk kemudahan maksimal penggunaan, ada beberapa pertimbangan lainnya, seperti efisiensi operasional, yang mungkin penting bagi pengguna internal yang dapat dilatih untuk menggunakan interface tertentu, dikombinasikan dan dioptimalkan untuk perangkat keras tertentu (misalnya, keyboard, mouse, dan layar resolusi tinggi besar). Tujuan sebuah User Interface adalah mengkomunikasikan fitur-fitur sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa amat efektif untuk membantu pengertian, karena bahasa merupakan alat komunikasi tertua kedua gestur, yang dipakai orang untuk berkomunikasi sehari-harinya. User Experience atau yang biasa disingkat menjadi UX merupakan pengalaman pengguna terhadap suatu produk atau teknologi saat mereka menggunakannya. User Experience dari suatu produk dapat dikatakan baik jika mempunyai aspek psikologis dan perilaku pengguna saat menggunakan produk. Agar produk yang dihasilkan mempunyai user experience yang baik, maka produk tersebut harus mempunyai kesesuaian antara kebutuhan pengguna dengan fitur yang ada di produk [8]. 2.2. Pengumpulan Data Teknik pengumpulan data digunakan untuk mengumpulkan data dalam penelitian ini sehingga diperoleh data yang dibutuhkan. Teknik pengumpulan data merupakan langkah yang paling strategis dalam penelitian karena tujuan utama dari penelitian adalah mengumpulkan data. Teknik pengumpulan data dalam penelitian ini adalah sebagai berikut : a. Studi Pustaka Studi pustaka yaitu, sebuah kegiatan penganalisaan serta mengevaluasi hasil penelitian dan mengumpulkan buku buku serta jurnal-jurnal dan sumber yang dianggap penting dan ada hubungannya dengan penulisan penelitian untuk menguatkan ide dan pemikiran peneliti. b. Observasi Observasi yaitu, suatu langkah yang akan dilakukan untuk mencari tahu terkait sumber data dalam penelitian. Pada penelitian ini dilakukan data untuk digunakan sebagai bahan dalam rancang bangun desain ui/ux pada pembuatan startup aplikasi selfcare berbasis website. c. Wawancara Wawancara dilakukan oleh peneliti terhadap narasumber untuk mendapatkan data- data valid yang dibutuhkan dalam penelitian ini. d. Analisis Dan Perancangan Analisis dan perancangan sistem yaitu, menganalisis permasalahan-permasalahan yang akan diteliti dan perancangan secara rinci tentang apa saja yang akan 162 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 dilakukan serta bagaimana cara penyajiannya. Pada tahap ini dilakukan pembuatan storyboard, pembuatan panorama 360, dan pembuatan virtual tour. serta beberapa Langkah lainnya sehingga terbentuk iklan marketing interior rumah menggunakan sketchup 3D berbasis panorama 360. 2.3. Perancangan Sistem Perancangan atau desain adalah sebuah proses dari pengembangan sistem berupa bentuk, rencana atau model untuk menciptakan sebuah produk yang terstruktur [9]. Perancangan merupakan tempat dimana aturan-aturan kreativitas dimana kebutuhan-kebutuhan dan pertimbangan-pertimbangan teknis semuanya secara bersamaan disatukan untuk membentuk sebuah produk atau sistem/perangkat lunak yang berkualitas [10]. Jadi perancangan itu adalah sebuah tahapan setelah analisis sistem yang tujuannya untuk menghasilkan rancangan tersebut untuk memenuhi kebutuhan yang ditentukan selama tahapan analisis. Pada penelitian ini, peneliti akan merancang bangun sebuah desain UI/UX aplikasi startup selfcare berbasis website. Dengan tujuan ini untuk membantu meningkatkan sebuah brand atau merek produk mereka, serta dapat memudahkan dan meyakinkan sebuah pelanggan untuk bertransaksi di website tersebut. Dikehidupan zaman sekarang teknologi sudah banyak lebih berkembang daripada sebelumnya, karena pada saat ini sekarang semua kegiatan jual beli tersebut telah menggunakan sistem berbasis online atau lebih dikenal dengan online shop (olshop). Jadi peneliti disini akan merancang membuat aplikasi selfcare berbasis website. Dalam pembuatan rancang bangun desain ui/ux pada pembuatan startup aplikasi selfcare berbasis website, peneliti menggunakan UML (Unified Modelling Language) yaitu, use case diagram dan activity diagram. A. Use Case Diagram Sebelum melakukan perancangan desain UI/UX website menggunakan aplikasi figma, peneliti terlebih dahulu sebuah rancangan use case diagram. Berfungsi untuk menjelaskan tahapan-tahapan proses perancangan desain UI/UX tersebut. Rancangan Use Case Diagram dapat dilihat pada Gambar 1: stakeholder, kebutuhan-kebutuhan bisnis, Gambar 1. Use Case Diagram Adapun use case diagram sistem admin dan user website Forever19.id secara keseluruhan dapat dilihat pada Gambar 2 dan Gambar 3. 163 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 2. Use Case Diagram Sistem Admin Gambar 3. Use Case Diagram Sistem Pelanggan Berdasarkan pada Gambar 2 dan Gambar 3 use case diagram aliran sistem admin dan user dimulai dengan menampilkan halaman beranda untuk melihat produk terbaru yang dapat diakses oleh admin dan user, selanjutnya user akan melakukan login agar admin dan user dapat melakukan transaksi jual beli yang seperti admin dapat melakukan penambahan/mengubah produk, admin juga dapat melakukan konfirmasi pembayaran dan pengiriman. User hanya bisa dapat mengecek keranjang dan mengecek daftar pesanan. Masing-masing produk memiliki kategori dan merek yang dapat dirubah dan ditambah oleh admin. B. Activity Diagram Pada saat melakukan perancangan desain UI/UX website Forever19.id menggunakan aplikasi figma proses rancangan activity diagram sangat penting dilakukan untuk menjelaskan tahapan proses dalam perancangan desain UI/UX website tersebut. Adapun rancangan activity diagram proses desain UI/UX pada Gambar 4: 164 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 4. Activity Diagram Adapun activity diagram sistem admin website Forever19.id secara keseluruhan dapat dilihat pada Gambar 5: Gambar 5. Activity Diagram Sistem Admin Berdasarkan pada Gambar 5 dapat disimpulkan bahwa sistem login memasukkan username dan password dan akan dicek oleh sistem jika berhasil akan menampilkan halaman beranda, jika gagal akan menampilkan halaman login dengan kesalahan. Adapun activity diagram sistem pelanggan website Forever19.id secara keseluruhan dapat dilihat pada Gambar 6. 165 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 6. Activity Diagram Sistem Pelanggan Berdasarkan pada Gambar 6 dapat disimpulkan bahwa pelanggan dapat buka menu produk dan sistem akan mengembalikan informasi produk, dan pelanggan dapat melakukan pembayaran yang akan diverifikasi oleh sistem. 3. Hasil dan Pembahasan 3.1 Implementasi Sistem Implementasi website Forever19.id terdiri dari beberapa halaman yang setiap halaman yang memiliki fungsi tersendiri tersebut. Halaman tersebut akan menampilkan halaman sesuai dengan aktifitas yang dilakukan oleh pengguna dan urutan yang telah dibuat tersebut. Adapun saat website Forever19.id pertama kali dibuka akan menampilkan halaman beranda, hasil implementasi dari halaman beranda. Pada website Forever19.id halaman beranda yang berisi logo Forever19.id, background yang bergambar Forever19 Olshop, ada berisi tentang Body Care, Face Care, Hair Care, navbar berisi Beranda, Produk, Kontak, Keranjang, dan Login. Berikut ini tampilan halaman beranda pada gambar 7. Gambar 7. Tampilan Halaman Beranda Pada halaman selanjutnya adalah halaman login website Forever19.id untuk login admin dan user harus memasukkan username dan password yang sesuai. Jika tidak 166 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 sesuai maka tidak bisa masuk ke halaman selanjutnya. Berikut ini tampilan halaman login pada Gambar 8. Gambar 8. Tampilan Halaman Login Pada halaman daftar akun website Forever19.id, halaman ini berfungsi untuk mendaftarkan akun bagi yang belum daftar akun di website Forever19.id tersebut. Berikut ini tampilan halaman daftar akun pada Gambar 9: Gambar 9. Tampilan Halaman Daftar Akun Setelah halaman login dan daftar untuk admin atau user akan masuk kedalam halaman dashboard setelah login pada website Forever19.id, halaman dashboard menampilkan semua data profil user ataupun admin yang sudah login memiliki 2 tombol yaitu tombol ubah profil dan ubah password yang memiliki fungsi untuk mengubah profil data user atau admin. Pada halaman dashboard ada 2 tipe berbeda yaitu admin dan user yang memiliki akses yang berbeda pada website Forever19.id. Dan selanjutnya halaman ini memperlihatkan pertama bagian user ada profil saya, daftar produk, keranjang saya, daftar pesanan dan serta profil user. Bagian admin 167 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 ada produk forever19, pesanan, kategori produk, merek produk dan serta profil admin. Berikut ini tampilan halaman dashboard pada gambar 10. Gambar 10. Halaman Dashboard Admin Dan berikut merupakan tampilan halaman dashboard user yang dapat dilihat pada gambar 11. Gambar 11. Halaman Dashboard User Selanjutnya website Forever19.id memiliki halaman produk Forever19.id yang berfungsi untuk menampilkan seluruh data produk yang sudah dituliskan oleh admin yang sudah login tersebut. Halaman produk Forever19.id memiliki banyak tombol yaitu tombol tambah produk yang berfungsi untuk menambah produk baru, tombol dengan gambar mata satu berwarna hijau berfungsi untuk melihat produk secara detail, tombol berwarna kuning berfungsi untuk mengubah data produk seperti nama produk, harga produk, kategori produk, merek produk, gambar produk, dan deskripsi produk, dan yang terakhir tombol berwarna merah berfungsi untuk menghapus produk. Berikut ini tampilan halaman produk Forever19.id pada Gambar 12. Gambar 12. Tampilan Halaman Dashboard Produk Forever19.id Dan berikut merupakan tampilan halaman dashboard Tambah Produk yang dapat dilihat pada gambar 13. 168 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 13. Halaman Tambahkan Produk Baru Selanjutnya halaman kategori produk yang berfungsi untuk menambah dan mengubah kategori produk tersebut. Berikut ini tampilan halaman kategori produk pada Gambar 14. Gambar 14. Halaman Dashboard Kategori Produk Selanjutnya halaman merek produk yang berfungsi untuk menambah dan mengubah merek produk tersebut. Berikut ini tampilan halaman merek produk pada Gambar 15. Gambar 15. Halaman Dashboard Merek Produk 169 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Selanjutnya halaman website kategori produk, halaman ini berisi 3 jenis pilihan dengan kategori produk yaitu Body Care, Face Care, dan Hair Care, masing-masing punya ciri kategori produk berbeda-beda. Berikut ini tampilan halaman website kategori produk pada Gambar 16. Gambar 16. Halaman Website Kategori Produk Selanjutnya halaman website produk terbaru, halaman ini berfungsi untuk membeli atau pesan produk untuk para pelanggan tersebut. Berikut ini tampilan halaman website produk terbaru pada Gambar 17. Gambar 17. Halaman Website Produk Terbaru Dan berikut merupakan tampilan halaman website produk single yang berisi gambar produk, nama produk, harga, kategori produk, merek produk, deskripsi produk dan jumlah pesanan produk tersebut, dapat dilihat pada Gambar 18. Gambar 18. Halaman Website Produk Single Setelah di pesan produk, muncul ke halaman berikutnya yaitu halaman daftar pesanan produk seperti Gambar 19. 170 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 19. Halaman Data Daftar Pesanan Setelah checkout lanjut ke halaman berikutnya yaitu metode pembayaran seperti Gambar 20. Gambar 20. Halaman Pembayaran Setelah klik selesai, muncul halaman daftar pesanan pelanggan seperti Gambar 21. Gambar 21. Halaman Daftar Pesanan Pelanggan Setelah itu admin mengecek data pesanan untuk pelanggan untuk konfirmasi pembayaran dan pengiriman seperti Gambar 22. Gambar 22. Halaman Data Pesanan Pelanggan 4. Kesimpulan 171 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 2, Nomor : 1, Januari 2023 : 158-172 e-ISSN 2830-3954 p-ISSN 2830-6031 Berdasarkan penelitian yang telah dilakukan peneliti mengenai rancang bangun desain UI/UX pada pembuatan startup aplikasi selfcare berbasis website, maka didapatkan kesimpulan sebagai berikut: 1. Perancangan desain UI/UX peneliti menggunakan aplikasi Figma, pada saat perancangan desain UI/UX harus melewati beberapa tahapan-tahapan yaitu, pertama sketsa dasar (wireframe), dan kedua mockup. Dalam hal ini pada perancangan desain ini peneliti ingin membuat website Forever19.id terlebih dahulu. 2. Dari serangkaian proses yang telah dilakukan dari penelitian ini menghasilkan sebuah website Forever19.id yang telah dibuat. DAFTAR PUSTAKA [1] K. D. Wahyudi, L. A. Putra, M. R. Saputra, N. Akbar, and M. R. Pribadi, "Desain UI / UX Aplikasi HealMed Menggunakan Metode Design Thinking," pp. 267- 272, 2022. J. M. Bisnis, "Implementasi Lean Canvas Pada Startup Dalam Menghadapi Persaingan Bisnis Barbershop Tuti Wediawati (1) Ella Fitria Rahmayani (2)," vol. 18, no. 1, pp. 108-118, 2021. "Technology - 2020 - Mengenal Apa itu Figma Fitur, Fungsi, Cara Kerja Menggunakannya." . I. Teknologi, K. Angelina, E. Sutomo, and V. Nurcahyawati, "Jurnal Desain UI UX Aplikasi Penjualan dengan Menyelaraskan Kebutuhan Bisnis menggunakan Pendekatan Design Thinking using Design Thinking Approach," vol. 5, pp. 70- 78, 2023. [2] [3] [4] [5] M. Hamdandi, R. Chandra, F. Bachtiar, N. Lais, D. Apriyanti, and M. R. Pribadi, "Perancangan UI / UX Pada Aplikasi Bapakkost Dengan Metode Design Thinking," no. 2021, pp. 392-397, 2022. [6] M. A. Muhyidin, M. A. Sulhan, A. Sevtiana, U. Catur, I. Cendekia, and K. Cirebon, "PERANCANGAN UI / UX APLIKASI MY CIC LAYANAN INFORMASI AKADEMIK MAHASISWA," vol. 10, no. 2, pp. 208-219, 2020. [7] F. Fernando, "PERANCANGAN USER INTERFACE ( UI ) & USER EXPERIENCE ( UX ) APLIKASI PENCARI INDEKOST DI KOTA PADANGPANJANG," vol. 7, pp. 101-111, 2020. [8] S. Prasetyaningsih and W. P. Ramadhani, "Analisa User Experience pada TFME Interactive Learning Media Menggunakan User Experience Questionnaire," vol. 13, no. 2, pp. 147-157, 2021. [9] S. Rezeki et al., "PERANCANGAN SISTEM INFORMASI PENJUALAN ONLINE," vol. 8, 2017. [10] A. B. Santoso and S. Informasi, "Perancangan sistem informasi penggajian pada pt top finance," vol. 2, no. 9, pp. 1-13, 2022. 172 © 2022 The Author(s). Published by UNITY ACADEMY . This is an open access article under the CC BY-SA license