## DESIGN OF UI/UX APPLICATIONS FOR MOBILE- BASED 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 Mirza 1 , Melani Dewi Lusita 2 , Desy Diana 3
Program Studi Teknik Informatika 1 , Program Studi Manajemen Informatika 2 ,
Program Studi Sistem Informasi 3
Universitas Pamulang 1, STMIK Jakarta STI&K 2, 3
dosen00289@unpam.ac.id 1 , melanilusita@gmail.com 2 , desidiana2208@gmail.com 3
Received: April 14, 2023 . Revised: May 7, 2023 . Accepted: May 12, 2023 Issue Period: Vol.7 No.1 (2023), Pages 58-73
Abstrak: Penggunaan  gadget  semakin  diminati  dan  semakin  meningkat  tiap tahunnya.  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  (testing)  dengan  hasil  akhir  memeiliki performance bernilai 77 masuk kategori acceptable atau dapat diterima.
Kata kunci: UI / UX Design, E-Commerce, desain aplikasi, aplikasi, Tech.an
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 online. 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  (testing)  on  the
e-ISSN : 2597-3673 (Online) , p-ISSN : 2579-5201 (Printed) Vol.7 No.1 (June 2023) JISICOM ( Journal of Information System, Informatics and Computing) Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com ACCREDITED BY KEMRISTEKBRIN, SK.NO. 200 / M / KPT / 2020 RANK 5 ( SINTA 5)
proposed prototype design also proves that the prototype design meets the eligibility standards.  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.an

## I. 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  “klik”  saja.  Kemudian  ditambah  lagi  dengan adanya  Pandemi  Covid-19  yang  hampir  semua  kegiatan  dilakukan  secara  online.  Dikutip  dari  beritasatu.com [1],  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

## 2.1 Metode Penelitian
Metode  penelitian  yang  digunakan  dalam  penulisan  ini  adalah  metode  design  thinking  yang  meliputi  5 tahapan yaitu:
a. 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.
b. 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 (wawasan) terhadap masalah yang ingin diatasi dari sudut pandang pengguna.
c. 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.
d. Tahapan Prototype berisi tahapan pengembangan ide melalui desain yang telah dibuat sehingga dapat dikomunikasikan kepada pengguna dan mengetahui responnya melalui tahap testing.
e. 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 pengguna. Pada tahapan ini, penelitian akan menggunakan usability testing dengan aplikasi Useberry.

## 2.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. [2].

## 2.3 Pengertian Aplikasi
Program  siap  pakai  yang  dikenal  sebagai  aplikasi  dapat  digunakan  untuk  menjalankan  berbagai  perintah yang diberikan pengguna. Istilah “aplikasi” juga dapat  merujuk pada alat untuk memecahkan masalah dengan menggunakan salah satu teknik pengolahan data aplikasi, seperti komputer pribadi atau smartphone [3].

## 2.4. 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 [4].

## 2.5. 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, 2014).[5]

## 2.6. Pengertian Mobile
Kata  “bergerak”  dalam  suatu  bahasa  merujuk  pada  sesuatu  yang  dapat  dibawa  dengan  mudah  dan bergerak. Segala bentuk komputer genggam, atau yang lebih sering dikenal dengan smartphone, disebut sebagai “perangkat bergerak” secara umum.[6].

## 2.7. 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.[8].
Design thinking memiliki beberapa elemen penting yaitu:
1. Metode  People  centered  menekankan  bahwa  setiap  tindakan  yang  dilakukan  berpusat  pada  apa  yang diinginkan dan dibutuhkan oleh pengguna.
2. Metode  Highly  creative  dapat  digunakan  kreativitas  sebebasnya,  tidak  perlu  aturan  yang  terlalu  kaku dan baku.
3. Metode Hands on dimana proses desain memerlukan percobaan langsung oleh tim desain, bukan hanya pembuatan teori atau sebuah gambaran di kertas.
4. 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:
1. 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.
2. Tahap  Define  dilakukan  mengikuti  pemahaman  desainer  terhadap  kebutuhan  pengguna;  perancang 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.
3. Tahap  Define  dilakukan  mengikuti  pemahaman  desainer  terhadap  kebutuhan  pengguna;  perancang 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.
4. 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 potensial.
5. 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. [8].

## Gambar 1. Tahapan Design Thinking

## 2.8. Pengertian User Interface
Definisi  antarmuka  pengguna  (user  interface)  merupakan  penghubung  antara  pengguna  dengan  sebuah mesin,  sebuah  aplikasi  atau  program  komputer.  Pengguna  berinteraksi  kepada  produk  dengan  menggunakan media  perangkat  masukan  (input)  seerti  keyboard,  mouse  yang  kemudian  hasilnya  ditampilkan  pada  media perangkat luaran (output) seperti monitor atau layar perangkat. [9].

## 2.9. 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, 2018).[10].

## 2.10. 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 konsisten.[11].
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.[12]  Sedangkan  kelemahannya  yaitu:  Tidak  bisa dijalankan tanpa koneksi internet. Membutuhkan kapasitas RAM yang lumayan dan graphic card yang mumpuni [12].

## 2.11. 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.[13].

## 2.12. 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.[14].

## Gambar 2. Contoh Skema User Journey Map

## 2.13. 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 menakutkan.[15]

## Gambar 3. Prioritization matrix

## 2.14. 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  sia- sia.[16].

## 2.15. 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: [17].
1. Bagaimana pengguna menggunakan aplikasi sampai selesai pada setiap halaman?
2. Bagian aplikasi yang mana yang responsif dan yang tidak Ketika diguakan?
3. Tombol pada aplikasi yang efisien bagian mana yang membuat pengguna lebih baik?

## 2.16. Pengertian Information Architecture
Praktik  arsitektur  informasi  melibatkan  pengelompokan  elemen  dari  sesuatu  untuk  memudahkan pemahaman.  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 [18].

## Gambar 4. Contoh Skema Information Architecture

## 2.17. 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 ada.[19].

## 2.18. 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 [20].
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 (dapat digunakan). 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.

## 2.19. 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.[21].

## 2.20. 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.[20]  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 disagree) dengan nilai 1, hingga sangat sepakat (Strongly agree) dengan nilai 5.
a. Buat pertanyaan bernomor ganjil (1, 3, 5, 7, 9) ialah pertanyaan bernada positif serta nilai bisa dihitung dengan metode: nilai yang didapat dari responden dikurangi dengan 1 nilai.
b. Buat  pertanyaan  bernomor  genap  (2,  4,  6,  8,  10)  ialah  pertanyaan  bernada  negatif  serta  nilai  bisa dihitung dengan metode: nilai 5 dikurangi dengan nilai yang didapat dari responden.
c. 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
suatu  sistem  (acceptability  range)  untuk  memastikan  apakah  pengguna  menemukan  atau  tidak  sistem  dapat diterima.[22] Evaluasi SUS adalah sebagai berikut:
Gambar 5. Skala penilaian skor SUS

## III. PEMBAHASA DAN HASIL

## 1.1. Gambaran Umum Aplikasi
Sebagai  pusat  gadget  online  terbesar  dan  terlengkap  di  Indonesia  serta  aman  dan  terpercaya,  Tech.an 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

## 1.2. 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  (wawancara)  dan  mengumpulkan  data  analisis  kompetitor  seputar  fitur  apa  saja yang membuat aplikasi kompetitor tersebut banyak dipilih oleh masyarakat.

## Gambar 8. Jawaban Interview
1.3. 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
66
Gambar 10. UI Prespective 1.4. Define
Pada  tahap  ini  melakukan  mensitesis  data  dengan  metode  mengelompokan  informasi,  yang  bertujuan untuk  mengenali  insight  (wawasan)  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.

## 1.5. 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
1.6. 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

## 1.7. 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.

## 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
1.8. 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
1.9. 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:
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.

## 1.10. 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.an:
Gambar 15. Information Architecture.
Keterangan: Aplikasi memiliki 6 menu utama (kotak berwarna biru tua) 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

## 1.11. Prototype (Visual Design)
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.
Gambar 16 Halaman on boarding (splash screen & landing page)
Gambar Halaman login Penjelasan:
1. Halaman splash screen dan halaman landing page.
2. Halaman daftar akun
3. Halaman masuk akun
4. Halaman masuk akun failed
5. Halaman masuk akun dengan facebook
6. Halaman masuk akun dengan email
7. Halaman home
8. Halaman search bar
9. Halaman flyer (promo)
10. Halaman notifikas
11. Halaman detail produk
12. Halaman gambar pada detail produk
13. Halaman riview
14. Halaman keranjang
15. Halaman chekout
16. Halaman metode pembayaran
17. Halaman pembayaran sukses
18. Halaman pembayaran gagal
19. Halaman utama akun
20. Halaman ubah profil
21. Halaman bantuan
22. Halaman merchant
23. Halaman pesanan saya: belum bayar
24. Halaman pesanan saya: dikemas
25. Halaman pesanan saya: dikirim
26. Halaman pesanan saya: selesai
27. Halaman pesanan saya: dibatalkan
28. Halaman pesanan saya: pengembalian
29. Halaman pesanan saya: diterima
30. Halaman awal fitur perbandingan
31. Halaman overlay fitur perbandingan
32. Halaman hasil perbandingan

## IV. KESIMPULAN
Berdasarkan  hasil  uji  coba  aplikasi  yang  telah  dilakukan  dari  perancangan  aplikasi  e-commerce  Tech.an, 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
[1.] Cahyoputra,  Leonard.  “Survei:  34%  Warga  Suka  Belanja  Elektronik  di  E-Commerce  Selama  Pandemi” www.beritasatu.com. Diakses pada 1 Juli 2022.
[2.] Rusdi Nur, Arsyad Suyuti. Perancangan Mesin-Mesin Industri. Yogyakarta: Deepublish, 2018.
[3.] Roni  Habibi,  Riki  Karnovi.  Tutorial  Membuat  Aplikasi  Sistem  Monitoring  Terhadap  Job  Desk  Operational Human Capital (OHC). Bandung: Kreatif Industri Nusantara, 2020.
[4.] Romindo,  Muttaqin,  Didin  Hadi  Saputra,  Deddy  Wahyudin  Purba,  M.  Iswahyudi,  Astri  Rumondang Banjamahor,  Aditya  Halim  Perdana  Kusuma,  Faried  Effendy,  Oris  Krianto  Sulaiman,  Janner  Simarmata.  E- commerce: Implementasi, Startegi dan Inovasinya. Yayasan Kita Menulis, 2019.
[5.] Prodi Ilmu Komunikasi Universitas Muhammadiyah Malang. Terpenjara Komodifikasi Media. Malang: Intrans Publishing Group, 2020.
[6.] Multimediamu. “Pengertian Perangkat Mobile, Definisi dan jenis jenisnya” www.multimediamu.com. Diakses pada 30 Juli 2022.
[7.] Jurnalponsel.  “Pengertian  Android,  Sejarah  Beserta  Kelebihan  dan  Kekurangannya”  www.jurnalponsel.com. Diakses pada 30 Juli 2022.
[8.] Sashkia Dewi Ali. “Binus University School of Information Systems, Design Thinking”. Diakses pada 30 Juli 2022.
[9.] Hani  Subakti,  Yuni  Widiastiwi,  Nur  Syamsiah,  Agung  Nugroho,  Asmawati  Wiyanto,  Kraugusteeliana,  Dewi Anggraeni,  Nur  Syamsiyah,  Dimas  Sasongko,  Faried  Effendy.  Rekayasa  Perangkat  Lunak.  Bandung:  Media Sains Indonesia, 2022.
[10.] Dr.  Dina  Dellyana,  Indra  Purnama,  M.  Andy  Zaky,  Nina  Arina,  Prof.  Wawan  Dhewanto.  Startup  Tools. Jakarta: Bitread Publishing, 2021.
[11.] Admin. “Apa itu Figma?”. Diakses pada 30 Juli 2022. https://psti.unisayogya.ac.id/
[12.] Trivusi.  “Apa  itu  Figma?  Fungsi,  Kelebihan,  dan  Kekurangannya”.  Diakses  pada  30  Juli  2022. https://www.trivusi.web.id/ .
[13.] Situmorang, Krisnawati.”User Persona: Pengertian, Jenis, dan Cara Membuatnya”. Diakses pada 30 Juli 2022. https://www.hashmicro.com/
[14.] Thomas  Suwelack,  Manuel  Stegemann,  Feng  Xia  Ang.  Creating  a  Customer  Experience  Centric  Starup. Hamburg: Springer, 2022.
[15.] S. Gibbons, “Using Prioritization Matrices to Inform UX Decisions”. Nielsen Norman Group, 2018 (Online). Diakses pada 28 Juli 2022. https://www.nngroup.com/
[16.] Maydi,  Hanifirgine.  “Brainstorming  adalah:  Pengertian,  Prinsip,  dan  Tips”  Diakses  pada  28  Juli  2022. https://www.hashmicro.com/
[17.] Anonim. “User Flow: Pengertian, Peran, dan Contohnya”. Diakses pada 28 Juli 2022. https://accurate.id/
[18.] Yoga Satria Wibowo. “Information Architecture dan Kegunaannya dalam UX Design”. Diakses pada : 29 Juli 2022. https://medium.com/
[19.] Binus University, “Law of UX – Heuristic”. Diakses pada 07 Agustus 2022. https://sis.binus.ac.id/
[20.] G.  Lee,  “Free  Sketch  Template  for  building  a  meaningful  ‘Affinity  Diagram’  during  the  UX  Process,”. UXplanet.org, 2018. Diakses pada 29 Juli 2022. https://uxplanet.org/
[21.] Terms  of  Service.  “What  Is  Useberry  and  How  It  Works”.  www.useberry.com.  Diakses  pada  29  Juli  2022. https://www.useberry.com/terms
[22.] A. P. K. J. M. Bangor, “Determining What Individual SUS Scores Mean: Adding an Adjective Rating Scale,” J. Usablity Stud., vol. 4, no. 3, 2019.