e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
1 (June 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
ACCREDITED BY KEMRISTEKBRIN.
SK.
NO.
200 / M / KPT / 2020 RANK 5 ( SINTA .
DESIGN OF UI/UX APPLICATIONS FOR MOBILEBASED E-COMMERCE TECH.
AN GADGETS USING THE
DESIGN METHOD THINKING
Perancangan Ui/Ux Aplikasi E-Commerce Tech.
An Gadget Berbasis Mobile Menggunakan Metode Desig Thinking Anis Mirza1.
Melani Dewi Lusita2.
Desy Diana3 Program Studi Teknik Informatika1.
Program Studi Manajemen Informatika2.
Program Studi Sistem Informasi3 Universitas Pamulang1.
STMIK Jakarta STI&K 2, 3 dosen00289@unpam.
id1, melanilusita@gmail.
desidiana2208@gmail.
Received: April 14, 2023.
Revised: May 7, 2023.
Accepted: May 12, 2023 Issue Period: Vol.
7 No.
Pages 58-73 Abstrak: Penggunaan gadget semakin diminati dan semakin meningkat tiap Kemudian ditambah lagi dengan adanya Pandemi Covid-19 dimana banyak kegiatan dilakukan menggunakan model online.
Aplikasi Tech.
an hadir agar pengguna dapat membeli barang barang elektronik seperti gadget dengan deskripsi atau spesifikasi yang jelas.
Tech.
an adalah aplikasi e-commerce yang menawarkan produk utama yaitu gadget dengan fitur unggulan yaitu perbandingan dan pembayaran COD tanpa limitasi harga.
Adanya Tech.
an, diharapkan dapat memberi informasi mengenai spesifikasi gadget sesuai kebutuhan, serta memudahkan pengguna dalam melakukan pembelian gadget.
Metode perancangan user interface yang digunakan dalam penelitian ini adalah metode design thinking yang meliputi lima tahapan di anataranya yaitu Ideate.
Define.
Emphatize.
Prototype serta Testing.
Hasil pengujian menggunakan model design prototype di kembangkan menjelaskan diaman perancangan prototype sudah memenuhi standar kelayakan.
Hal tersebut dilakukan dengan iterasi pengujian .
dengan hasil akhir memeiliki performance bernilai 77 masuk kategori acceptable atau dapat diterima.
Kata kunci: UI / UX Design.
E-Commerce, desain aplikasi, aplikasi.
Tech.
Abstract: The use of gadgets is increasingly in demand and increasing every year.
Then coupled with the Covid-19 Pandemic where almost all activities are carried out The Tech.
an application is here so that users can buy electronic goods such as gadgets with clear descriptions or specifications.
Tech.
an is an e-commerce application that offers main products, namely gadgets with superior features, namely comparisons and COD payments without price limitations.
Tech.
an is expected to be able to provide information regarding gadget specifications as needed, as well as make it easier for users to purchase gadgets.
The user interface design method used in this study is the design thinking method which includes five stages including Emphasize.
Define.
Ideate.
Prototype, and Testing.
The test results .
on the DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
proposed prototype design also proves that the prototype design meets the eligibility This is done by testing iterations with the final result getting a performance value of 77 and included in the acceptable category.
Keywords: UI/UX Design.
E-Commerce, app design, apps.
Tech.
PENDAHULUAN
Penggunaan gadget yang semakin populer setiap tahunnya merupakan salah satu dari sekian banyak kemajuan yang dapat kita lihat pada saat ini.
Dengan alat media sosial yang mereka miliki, pengguna sekarang dapat berkomunikasi dan mengurus kebutuhan sehari-hari mereka dengan lebih mudah.
Berbagai macam barang bisa didapatkan secara online hanya dengan melakukan sekali AuklikAy saja.
Kemudian ditambah lagi dengan adanya Pandemi Covid-19 yang hampir semua kegiatan dilakukan secara online.
Dikutip dari beritasatu.
, 34% responden di Jabodetabek membeli produk gadget selama masa pandemi dan diyakini akan terus meningkat pada tahun-tahun berikutnya.
Masalah pada penulisan ini pada pokoknya adalah bagaimana membuat desain aplikasi yang interaktif dan inovatif menggunakan aplikasi Figma berbasis cloud dengan metode design thinking.
Agar aplikasi memiliki tujuan yang jelas, maka pada penelitian ini membatasi permasalahan membahas tentang bagaimana membuat desain mobile aplikasi Tech.
an yang interaktif dan inovatif untuk melakukan pembelian gadget.
Hasil penelitian berupa mockup user interface berbasis mobile.
Tahapan design thinking dalam penulisan ini memiliki lima tahapan, yaitu emphatize, define, ideate, prototype, dan testing.
Dalam pembuatan desain visual atau mockup menggunakan aplikasi Figma.
Tujuan dari penelitian ini adalah merancang dan membuat desain aplikasi penjualan produk-produk gadget melalui mobile untuk mempermudah pengguna membeli gadget sesuai dengan kebutuhan pengguna.
Untuk memudahkan setiap kalangan yang masih merasa kesulitan dalam mencari dan memilih gadget yang sesuai dengan kebutuhan pengguna maka aplikasi Tech.
an hadir agar pengguna dapat membeli barang barang elektronik dengan deskripsi atau spesifikasi yang jelas.
Berdasarkan latar belakang diatas, maka akan dibuat sebuah perancangan user interface untuk jual beli alat elektronik atau gadget yang focus pada Perancangan UI/UX Aplikasi E-Commerce Tech.
an Gadget Berbasis Mobile Menggunakan Metode Design Thinking.
II.
METODE DAN MATERI
1 Metode Penelitian Metode penelitian yang digunakan dalam penulisan ini adalah metode design thinking yang meliputi 5 tahapan yaitu:
Tahapan Emphatize dimana peneliti akan melakukan research atau riset yang bertujuan untuk mengumpulkan data yang diperlukan untuk memahami kebutuhan pengguna.
Hal ini dilakukan dengan 2 cara, yaitu observasi dan kuesioner.
Tahapan Define dimana setelah mendapat data dari fase emphatize maka data dan permasalahan harus dipilah dan dianalisis.
Proses penyortiran ini disebut define.
Tujuan dari tahap ini adalah untuk mengetahui insight .
terhadap masalah yang ingin diatasi dari sudut pandang pengguna.
Tahapan Ideate merupakan proses menemukan ide.
Proses ini dilakukan setelah selesai menyortir data untuk memetakan inti pemasalahan.
Kegiatan yang paling umum digunakan untuk mencari ide ini adalah brainstorming.
Brainstorming adalah metode yang digunakan tim desain dalam menghasilkan ide untuk menemukan inti dari solusi yang tepat agar mampu memecahkan masalah.
Tahapan Prototype berisi tahapan pengembangan ide melalui desain yang telah dibuat sehingga dapat dikomunikasikan kepada pengguna dan mengetahui responnya melalui tahap testing.
Tahapan Testing dengan melakukan pengujian prototype kepada pengguna akan dilakukan di tahap testing dengan tujuan untuk memastikan user interface sudah sesuai dan mudah digunakan oleh Pada tahapan ini, penelitian akan menggunakan usability testing dengan aplikasi Useberry.
2 Definisi Perancangan Program siap pakai yang disebut aplikasi dapat digunakan untuk Memanfaatkan pengetahuan saat ini, desain adalah proses yang berupaya mempelajari, mengevaluasi, meningkatkan, dan membuat sistem fisik dan non-fisik yang terbaik untuk masa depan.
3 Pengertian Aplikasi DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Program siap pakai yang dikenal sebagai aplikasi dapat digunakan untuk menjalankan berbagai perintah yang diberikan pengguna.
Istilah AuaplikasiAy juga dapat merujuk pada alat untuk memecahkan masalah dengan menggunakan salah satu teknik pengolahan data aplikasi, seperti komputer pribadi atau smartphone .
Definisi E-Commerce Pertukaran barang, jasa, dan informasi melalui sistem elektronik seperti internet, televisi, dan jaringan komputer lainnya dikenal sebagai perdagangan elektronik, atau e-commerce, dan merupakan hasil teknologi informasi yang kini berkembang pesat .
Definisi Gadget Gadget adalah perangkat berteknologi tinggi yang memiliki aplikasi yang berjalan di atasnya.
Program ini menampilkan sejumlah menu, antara lain untuk jejaring sosial, hobi, hiburan, dan dukungan kreativitas.
(Widiawati dan Sugiman, 2.
Pengertian Mobile Kata AubergerakAy dalam suatu bahasa merujuk pada sesuatu yang dapat dibawa dengan mudah dan Segala bentuk komputer genggam, atau yang lebih sering dikenal dengan smartphone, disebut sebagai Auperangkat bergerakAy secara umum.
Pengertian Design Thinking Salah satu pendekatan terbaru untuk proses desain adalah Design Thinking.
Teknik untuk memecahkan masalah yang mengutamakan pengguna disebut "pemikiran desain".
David Kelley dan Tim Brown, pendiri IDEO, sebuah firma desain dengan sejarah dalam desain produk berbasis inovasi, dipuji karena mempopulerkan pemikiran desain secara keseluruhan.
Design thinking memiliki beberapa elemen penting yaitu:
Metode People centered menekankan bahwa setiap tindakan yang dilakukan berpusat pada apa yang diinginkan dan dibutuhkan oleh pengguna.
Metode Highly creative dapat digunakan kreativitas sebebasnya, tidak perlu aturan yang terlalu kaku dan baku.
Metode Hands on dimana proses desain memerlukan percobaan langsung oleh tim desain, bukan hanya pembuatan teori atau sebuah gambaran di kertas.
Metode Iterative dilakukan berulang ulang untuk melakukan improvisasi dan menghasilkan sebuah produk atau aplikasi yang baik.
Produk yang dibuat dengan metodologi design thinking akan mampu memanfaatkan teknologi mutakhir selain untuk dijual.
Pendekatan ini memadukan keinginan pengguna dengan kemampuan teknologi yang tepat sekaligus menghasilkan sesuatu yang dapat menguntungkan.
Langkah-langkah berikut akan dilakukan sebanyak yang diperlukan saat membuat produk atau aplikasi menggunakan metodologi design thinking:
Tahap Penekanan Seorang desainer perlu menyadari pengalaman, perasaan, dan keadaan pengguna yang dituju.
mencoba untuk berperan sebagai pengguna sehingga Anda dapat sepenuhnya memahami kebutuhan pengguna.
Ini dapat dicapai melalui wawancara, pengamatan kehidupan pengguna, dan metode lainnya.
Tahap Define dilakukan mengikuti pemahaman desainer terhadap kebutuhan pengguna.
kemudian harus menguraikan gagasan atau sudut pandang pengguna yang akan berfungsi sebagai dasar untuk produk atau aplikasi yang akan datang.
Membuat daftar persyaratan pengguna dan menerapkan pengetahuan tentang keadaan yang ada dapat membantu dalam hal ini.
Tahap Define dilakukan mengikuti pemahaman desainer terhadap kebutuhan pengguna.
kemudian harus menguraikan gagasan atau sudut pandang pengguna yang akan berfungsi sebagai dasar untuk produk atau aplikasi yang akan datang.
Membuat daftar persyaratan pengguna dan menerapkan pengetahuan tentang keadaan yang ada dapat membantu dalam hal ini.
Tahapan Prototipe adalah konsep yang sudah ada sebelumnya yang harus segera dimasukkan ke dalam program atau produk uji.
Sangat penting untuk membuat produk asli dan skenario penggunaan Tahapan Tes produk atau aplikasi uji coba dilakukan uji coba terhadap pengguna.
Item uji coba akan memungkinkan pengguna memberikan umpan balik yang akan digunakan untuk membuat produk baru dan menyempurnakan produk yang sudah ada.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 1.
Tahapan Design Thinking Pengertian User Interface Definisi antarmuka pengguna .
ser interfac.
merupakan penghubung antara pengguna dengan sebuah mesin, sebuah aplikasi atau program komputer.
Pengguna berinteraksi kepada produk dengan menggunakan media perangkat masukan .
seerti keyboard, mouse yang kemudian hasilnya ditampilkan pada media perangkat luaran .
seperti monitor atau layar perangkat.
Pengertian User Experience Menurut definisi.
UX secara langsung mempengaruhi cara pelanggan berinteraksi dengan produk digital dan media online perusahaan.
Pendekatan yang terorganisir dibutuhkan untuk mengatasi tantangan organisasi dan operasional UX dengan cara mempertimbangkan bagaimana operasi tim UX dalam mempengaruhi pengalaman pelanggan (McCloude & Slotten, 2.
Pengertian Figma Figma adalah alat berbasis web untuk mengembangkan antarmuka pengguna dan pengalaman pengguna (UI dan UX).
Ini dapat digunakan untuk merancang antarmuka pengguna untuk situs web, aplikasi seluler, dan proyek lainnya.
Figma adalah alat yang memungkinkan desainer untuk berkolaborasi satu sama lain dan membuat desain.
Dengan desain yang memanfaatkan sistem cloud.
Figma dimaksudkan agar lebih efektif dan .
Figma memiliki beberapa kelebihan yaitu: Bekerja bersamaan dan berkolaborasi secara realtime.
File sharing yang mudah dan cepat.
Aplikasi desain yang lengkap dan serba bisa.
Berbasis cloud tanpa perlu instansi.
Banyak plugin tambahan yang tersedia.
Tersedia paket gratis.
Sedangkan kelemahannya yaitu: Tidak bisa dijalankan tanpa koneksi internet.
Membutuhkan kapasitas RAM yang lumayan dan graphic card yang mumpuni .
Pengertian User Pesona Penggambaran karakter fiktif dalam User persona.
Target pasar atau pengguna produk diwakili oleh tokoh fiktif ini.
Berdasarkan pemeriksaan menyeluruh terhadap sekumpulan variabel, seperti jenis kelamin, pekerjaan, motivasi, dan lain-lain, karakter produk ini dapat dikembangkan.
Oleh karena itu, perlu diketahui terlebih dahulu untuk siapa produk ini dibuat.
Pengertian User Journey Map User journey map atau peta perjalanan pengguna adalah representasi visual dari interaksi dan titik kontak pelanggan dengan organisasi dari sudut pandang pelanggan, yang mencakup pengalaman pelanggan dalam tahap pra-pembelian, pembelian, dan pasca-pembelian seperti tahapan positif dan negatif, emosi, motifasi, dan perubahan, dan mengidentifikasi momen-momen tertentu termasuk kegagalan dan poin keuntungan dalam hubungan antara pelanggan dan organisasi dan mengidentifikasi peluang peningkatan untuk organisasi.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 2.
Contoh Skema User Journey Map Pengertian Prioritization Matrcices Prioritization matrices atau matriks prioritas visual 2D yang menunjukkan kepentingan relatif dari sekumpulan item berdasarkan dua kriteria berbobot.
Matriks prioritas berfungsi untuk mengidentifikasi masalah yang paling penting.
Pendekatan terstruktur dan objektif ini membantu mencapai konsensus kolaboratif sambil memenuhi beragam kebutuhan pengguna dan bisnis.
Kenyataannya tidak semuanya bisa dilakukan sekaligus.
Membuat keputusan berdasarkan informasi tentang apa yang harus diprioritas kan dapat menjadi hal yang .
Gambar 3.
Prioritization matrix Pengertian Brainstorming Sebuah proses untuk menghasilkan ide dan solusi untuk suatu masalah disebut brainstorming.
Kegiatan tersebut berbentuk pembicaraan tim yang diatur dan dipandu oleh seorang fasilitator, seperti manajer proyek atau pemilik bisnis.
Pengetahuan anggota tim tentang masalah utama harus berada pada tingkat dasar untuk memimpin sesi diskusi.
Tujuannya agar pelaksanaan berjalan lancar dan tidak memberikan hasil yang siasia.
Pengertian User Flow Serangkaian tindakan yang harus dilakukan oleh pengguna situs web atau aplikasi untuk menyelesaikan tugas disebut sebagai aliran pengguna atau aliran pengguna.
Prosedur yang dilalui pengguna untuk melakukan pembelian di situs web e-niaga dapat berfungsi sebagai ilustrasi alur pengguna.
Alur pengguna dapat memainkan fungsi serupa dalam desain aplikasi dengan yang terlihat di situs web.
Namun, untuk membuat alur pengguna yang efektif, dalam aplikasi, strategi yang berfokus pada pengguna sering kali menjadi tujuan utama.
Saat membuat fondasi aplikasi, tim desain dapat mempertimbangkan faktor-faktor berikut: .
Bagaimana pengguna menggunakan aplikasi sampai selesai pada setiap halaman? Bagian aplikasi yang mana yang responsif dan yang tidak Ketika diguakan? Tombol pada aplikasi yang efisien bagian mana yang membuat pengguna lebih baik? Pengertian Information Architecture Praktik arsitektur informasi melibatkan pengelompokan elemen dari sesuatu untuk memudahkan Proses pembuatan aplikasi atau website juga menggunakan arsitektur informasi yang dapat memudahkan orang untuk menggunakan aplikasi dan website yang kita buat.
Arsitektur informasi melayani tujuan di bidang desain pengalaman pengguna dengan mempermudah pengguna untuk menemukan fitur dan konten di situs web atau aplikasi .
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 4.
Contoh Skema Information Architecture Pengertian Laws of UX Faktor terbaik yang harus dipertimbangkan oleh desainer UI saat membuat desain visual sistem dikompilasi dalam The Laws of UX.
Tercapainya kebahagiaan pelanggan akan didukung oleh hubungan hukum yang .
Pengertian Usability Testing Usability bisa diartikan sebagai elemen yang bisa menilai dan mengukur sejauh mana pengguna berinteraksi dengan suatu sistem ataupun website secara efektif dalam hal penerimaan pengguna sehingga akan mampu mengoptimalkan kinerja pengguna dalam mengakses sistem atau website yang bersangkutan .
Berdasarkan pemahaman diatas maka, usability testing merupakan pengujian terhadap indikator penting dalam menilai keefektifan sebuah aplikasi dalam hal penerima pengguna.
Usability testing merupakan salah satu cara agar sebuah aplikasi atau produk digital dapat mencapai tujuannya, serta bisa memberikan dampak agar tidak ditinggalkan oleh penggunanya.
Jika sebuah aplikasi atau produk digital dapat digunakan secara efektif, efisien, dan memuaskan penggunanya maka dapat dikatakan bahwa produk digital tersebut telah usable .
apat digunaka.
Untuk menilai usable atau tidaknya produk digital, maka diperlukan usability testing.
Dengan demikian, penelitian mengenai usability diharapkan akan dapat memberikan rekomendasi perbaikan terhadap masalah yang ditemukan.
Aplikasi Useberry Useberry adalah platform yang menyediakan designer dan tim produk dengan alat untuk membuat dan melakukan penelitian UI/UX kepada pengguna nyata pada prototype desain mereka, yaitu sebelum melanjutkan untuk mengembangkan produk mereka.
Peneliti membuat Studi dan berbagi Studi dengan segmen audiens yang dipilih oleh Peneliti.
Useberry mendistribusikan melalui tautan unik Studi yang dibuat oleh Peneliti, mengumpulkan tanggapan Peserta, dan memberi Peneliti hasil.
System Usability Scale (SUS) John Brooke adalah orang pertama yang mengusulkan skala kegunaan sistem (SUS), ide penilaian kegunaan yang dapat diandalkan, terjangkau, dan efektif.
Alat ini dapat digunakan untuk menilai kegunaan sistem dalam skala dunia.
Skala Likert dapat digunakan untuk SUS, dan pertanyaan dapat distandarisasi untuk menghasilkan nilai rata-rata kegunaan dan kepuasan pengguna pada skala 0-100.
Hasil dari perhitungan dengan tata cara SUS, bisa dijadikan pertimbangan untuk Skala yang digunakan merupakan sangat tidak sepakat (Strongly disagre.
dengan nilai 1, hingga sangat sepakat (Strongly agre.
dengan nilai 5.
Buat pertanyaan bernomor ganjil .
, 3, 5, 7, .
ialah pertanyaan bernada positif serta nilai bisa dihitung dengan metode: nilai yang didapat dari responden dikurangi dengan 1 nilai.
Buat pertanyaan bernomor genap .
, 4, 6, 8, .
ialah pertanyaan bernada negatif serta nilai bisa dihitung dengan metode: nilai 5 dikurangi dengan nilai yang didapat dari responden.
Jumlahkan nilai yang sudah dihitung pada poin b serta c dari tiap- tiap responden.
Setelah itu, kalikan hasilnya dengan nilai 2,5.
Hasil perhitungan ini bakal mengkonversi rentang nilai jadi antara 0-100.
System Usability Score (SUS) juga dapat diubah menjadi peringkat objektif untuk lebih memperjelas tingkat kegunaan suatu sistem, yang kemudian diterjemahkan ke dalam tingkat penerimaan pengguna terhadap DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
suatu sistem .
cceptability rang.
untuk memastikan apakah pengguna menemukan atau tidak sistem dapat .
Evaluasi SUS adalah sebagai berikut:
Gambar 5.
Skala penilaian skor SUS i.
PEMBAHASA DAN HASIL
Gambaran Umum Aplikasi Sebagai pusat gadget online terbesar dan terlengkap di Indonesia serta aman dan terpercaya.
Tech.
merupakan e-commerce yang berfokus pada kebahagiaan pelanggan.
Dengan produk terbaik dari bisnis terkemuka dan terkenal.
Tech.
an selalu bertujuan untuk memenuhi permintaan dan teknologi.
Program ini dibuat untuk memudahkan pengguna dalam membeli gadget yang mereka butuhkan melalui online retailer yang khusus menjual gadget melalui perangkat mobile.
Gambar 6 Logo Aplikasi Metode Penelitian Tech.
an adalah toko online yang mengutamakan user experience.
Dalam hal ini, proses desain dilakukan dengan menggunakan metodologi pemikiran desain.
karena ada pola cara pemikir desain mendekati masalah.
Proses berpikir desain melibatkan lima fase: empati atau empati, mendefinisikan, mengidealkan, membuat prototipe, dan menguji.
Pemikiran desain berusaha untuk mengevaluasi ide lebih cepat dan tidak selalu linier, sehingga kelima tahap ini tidak selalu linier.
Pada tahapan emphatize ini, akan melakukan riset pengguna dengan melakukan interview .
dan mengumpulkan data analisis kompetitor seputar fitur apa saja yang membuat aplikasi kompetitor tersebut banyak dipilih oleh masyarakat.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 7.
User interview dan question Gambar 8.
Jawaban Interview Analisis Kompetitor Agar dapat menentukan strategi pemasaran yang tepat untuk bersaing dengan kompetitor maka diperlukan data mengenai kelebihan dan kekurangan dari kompetitor.
Gambar 9.
UX Prespective DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 10.
UI Prespective Define Pada tahap ini melakukan mensitesis data dengan metode mengelompokan informasi, yang bertujuan untuk mengenali insight .
terhadap permasalahan yang akan diatasi.
Hasil yang diharapkan dalam melaksanakan tahapan ini merupakan memperoleh ruang permasalahan dari bermacam sudut pandang, sehingga dapat memastikan strategi yang pas serta berhasil untuk ke tahap selanjutnya yaitu tahap ideate.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
User Persona Dari hasil poin masalah yang dikumpulkan, selanjutnya membuat user persona bedasarkan observasi yang didapatkan.
Mengidentifikasi masalah yang dialami pengguna, perilaku apa saja yang sesuai dan memberikan solusi.
Dari persona tersebut akan membantu dalam menentukan desain dan fitur untuk aplikasi yang lebih baik.
Mengumpulkan beberapa perilaku poin keluhan, dan tujuan yang dimiliki pengguna potensial.
Gambar 11.
User Persona User Journey Map Langkah di user journey map, menggambarkan visualisasi langkah-langkah yang diambil pengguna untuk mencapai tujuannya.
Dengan menggunakan user journey map, hal ini membantu untuk memahami produk atau layanan menurut perspektif pengguna.
Hasilnya seperti gambar dibawah ini.
Gambar 12.
User Journey Map Prioritization Matrices Langkah ini dilakukan setelah menemukan permasalahan atau hal yang dapat menjadi kendala selama pengguna melakukan proses untuk mencapai tujuannya yang sebelumnya dapat dilihat pada hasil penulusuran yang sudah dilakukan melalui user journey map sehingga dapat membuat prioritization matrices untuk memprioritaskan ide secara efisien untuk dibuat terlebih dahulu.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 12.
Prioritization Matrices Keterangan: prioritas pertama meliputi tidak adanya pengiriman 1 hari, mencari spesifikasi produk satu persatu, dan kurang banyaknya official store yang tersedia.
Prioritas kedua tampilan UX writing yang membingungkan user, mulai dari layout, banner iklan terlalu besar, navigasi terlalu kecil, dan tidak ada komponen menyesuaikan spesifikasi barang.
Prioritas ketiga meliputi splash screen terlalu lama dan butuh waktu 4 hari proses pengiriman.
Prioritas keempat proses register harus membuka SMS untuk melihat kode, stok kosong jika di cek setiap hari, dan metode pembayaran tidak lengkap Brainstorming Pada tahap brainstorming ide solusi adalah untuk mengutarakan ide sebanyak mungkin berdasarkan prioritas yang telah dibuat.
Hasil dari brainstorming ide solusi adalah seperti gambar berikut:
Gambar 13.
Brainstorming ide solusi berdasarkan prioritas User Flow Pada user flow, tahap ini yaitu membuat alur pengguna berdasarkan prioritas ide solusi.
Tujuannya menetapkan alur pengguna supaya pengguna dapat dengan mudah menggunakan situs web atau aplikasi dan bermanfaat bagi proses desain.
Mempelajari alur pengguna situs web atau aplikasi terbukti bermanfaat baik untuk mendesain produk baru atau memperbarui produk lama.
User flow yang dihasilkan:
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 14.
User Flow Penjelasan user flow: Pengguna masuk ke aplikasi Tech.
an lalu melakukan sign in atau registrasi terlebih dahulu.
Sign in dengan membuat akun baru, dengan email atau facebook.
Setelah sudah registrasi, pengguna dapat mencari barang, menambahkan barang ke keranjang.
Pengguna memilih menu checkout kemudian ke info pembayaran, mengkonfirmasi dan proses selesai.
Information Architecture Pada tahapan ini akan dibuat kerangka mengenai desain halaman yang akan dibuat secara lebih terstruktur sehingga akan mempermudah orang lain dalam memahami apa saja fitur-fitur yang akan dibuat pada projek aplikasi tersebut.
Berikut information architecture pada aplikasi Tech.
Gambar 15.
Information Architecture.
Keterangan: Aplikasi memiliki 6 menu utama .
otak berwarna biru tu.
yaitu menu home, category, search bar, chart, notification, dan account/profile.
Menu home memiliki sub menu yaitu banner promo, flash sale, search bar, recommend product, dan comparation antar produk.
Lalu pada menu category memiliki sub menu yaitu official store dimana menu official store memiliki sub menu lagi yaitu berbagai nama official store.
Kemudian menu search bar yang digunakan untuk melakukan pencarian.
Lalu menu cart yang berisi sub menu detail cart.
Lalu menu nofication yang berisi info produk, info promo dan info status pemesanan.
Kemudian menu account/profile berisi login, logout, order, dan help Prototype (Visual Desig.
Merancang desain visual aplikasi secara utuh meniru dari langkah wireframe, tidak hanya fungsi produk tetapi juga tampilan dan nuansa.
Tujuannya untuk memperkenalkan model desain dalam setiap proses dan menempuh alur informasi untuk menyelesaikan tugas atau detail produk digital secara interaktif.
Dalam hal ini dibantu tools figma dalam mendesain rancangan visual produk digital.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Gambar 16 Halaman on boarding .
plash screen & landing pag.
Gambar Halaman login Penjelasan:
Halaman splash screen dan halaman landing page.
Halaman daftar akun Halaman masuk akun Halaman masuk akun failed Halaman masuk akun dengan facebook Halaman masuk akun dengan email Halaman home Halaman search bar Halaman flyer .
Halaman notifikas DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Halaman detail produk Halaman gambar pada detail produk Halaman riview Halaman keranjang Halaman chekout Halaman metode pembayaran Halaman pembayaran sukses Halaman pembayaran gagal Halaman utama akun Halaman ubah profil Halaman bantuan Halaman merchant Halaman pesanan saya: belum bayar Halaman pesanan saya: dikemas Halaman pesanan saya: dikirim Halaman pesanan saya: selesai Halaman pesanan saya: dibatalkan Halaman pesanan saya: pengembalian Halaman pesanan saya: diterima DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
Halaman awal fitur perbandingan Halaman overlay fitur perbandingan Halaman hasil perbandingan IV.
KESIMPULAN
Berdasarkan hasil uji coba aplikasi yang telah dilakukan dari perancangan aplikasi e-commerce Tech.
maka dapat disimpulkan bahwa hasil pengujian atau testing terhadap design prototype yang telah dibuat membuktikan bahwa, perancangan aplikasi sudah memenuhi standar kelayakan sehingga sudah sesuai dengan tujuan awal pembuatan aplikasi ini yaitu untuk memudahkan pengguna dalam melakukan pembelian gadget menggunakan aplikasi dengan tampilan yang interaktif dan inovatif.
Hal tersebut dibuktikan dengan iterasi pengujian atau testing dengan hasil akhir mendapatkan nilai performance sebesar 77 dengan presentase 80% dan termasuk dalam kategori acceptable atau dapat diterima.
DAFTAR PUSTAKA