## PERANCANGAN USER INTERFACE/USER EXPERIENCE APLIKASI CAFÉ BIRU FTI MENGGUNAKAN FIGMA DENGAN PENDEKATAN DESIGN THINKING
Herdin Yohnes Madawara 1 , Irwan Sembiring 2 , Ade Iriani 3 1,2,3 Program Studi Magister Sistem Informasi Fakultas Teknologi Informasi Universitas Kristen Satya Wacana 972022010@student.uksw.edu

## ABSTRAK
Café Biru FTI UKSW merupakan tempat bagi mahasiswa, pengajar, staf, sampai ke sivitas sebagai tempat bersantai  dan  bercanda  bersama.  Café  Biru  FTI  berlokasi  pada  Kampus  3  Universitas  Kristen  Satya  Wacana (UKSW)  Jl.  Dr.  O.  Notohamidjojo  No.1  -  10,  Blotongan,  Kec.  Sidorejo,  Kota  Salatiga,  Jawa  Tengah.  Melihat beberapa permasalahan yang ada sehingga hadirnya penelitian dengan melaraskan design interface dan prototype. Permasalahan  yang dimaksud antara  lain,  layanan pemesanan  masih  menggunakan kertas dan atau secara  lisan dan terkadang terjadinya kesalahan komunikasi antara pelanggan dan kasir atau kasir dan bagian dapur. Melalui penelitian  ini, penulis  melakukan pendekatan dengan Design Thinking (Empathize, Define, Ideate, Wireframe, Prototype) dan yang terakhir yaitu pengujian sistem menggunaka System Usability Scale (SUS). Hasil akhir rata- rata  dari  nilai  SUS  berjumlah  87,625  sehingga  terkategori  A  atau  terbilang  sangat  baik.  Oleh  sebab  itu  dapat disimpulkan bahwa fungsi dari fitur yang telah dirancang berupa design interface dapat dimengerti oleh pengguna. Mengacu pada penelitian yang telah dilaksanakan, maka perlunya pengembangan berkelanjutan untuk merancang sistem aplikasi dari Café Biru FTI UKSW yang berfokus pada pemesanan barang (makan dan minum).
Keyword: Perancangan, UI/UX, Figma, Prototype, Design Thinking

## 1. PENDAHULUAN
Bisnis  merupakan  perusahaan  kecil  maupun besar  yang  menyediakan  barang  dan  jasa  untuk diperjual  belikan  dengan  tujuan  memperoleh keuntungan[1].  Akan  tetapi  tidak  jauh  berbeda dengan bisnis teknologi, yang dimana sebuah bisnis yang telah digitalisasi serta memanfaatkan kecanggihan  teknologi  guna  merencanakan  sebuah produk  maupun  memasarkannya[2].  Salah  satu bisnis  yang  terdapat  pada  kampus  Fakultas Teknologi  Informasi  Universitas  Kristen  Satya Wacana  yaitu  Café  Biru  FTI,  café  tersebut menyediakan  makanan  dan  minuman  sehingga pengunjung  yaitu  mahasiswa,  dosen,  staff,  serta sivitas  UKSW  terkadang  menjadikan  tempat tersebut sebagai tempat untuk meeting, kerja tugas, serta  bersantai  senang  bersama  kerabat.  Café  Biru FTI  terletak  pada  Kampus  3  Universitas  Kristen Satya  Wacana  (UKSW)  Jl.  Dr.  O.  Notohamidjojo No.1 - 10, Blotongan, Kec. Sidorejo, Kota Salatiga,
Jawa  Tengah,  pengunjung  atau  pelanggan  yang datang  tidak  hanya  mahasiswa  FTI  saja,  namun mahasiswa  dari  fakultas  lain  juga  antusias  akan adanya Café Biru FTI.
Café Biru FTI setiap harinya memiliki jumlah pelanggan  yang  banyak.  Proses  pemesanan  makan atau minum masih secara manual yaitu menggunakan  kertas  serta  tulis  tangan  dan  juga terkadang  pelanggan  secara  lisan  dalam  memesan sehingga  mengalami  kesalahan  pemesanan,  seperti melupakan catatan khusus, kelalaian kasir, komunikasi antara kasir dan dapur dalam pembuatan pesanan dan mengalami kelupaan untuk memasukkan  pesanan  ke  dalam  antrian.  Melalui permasalahan  yang  telah  dijelaskan  sebelumnya,
maka penulis  merangkum  beberapa  masalah utama untuk  dilakukannya  penelitian  ini,  antara  lain  ;  1) Perlunya  terobosan  baru  mengenai  pemesanan makan dan minum pada Café Biru FTI 2) Perlunya perancangan  konsep  awal  guna  meminimalisir terjadinya  kesalahan  komunikasi  saat  pemesanan makan  dan  minum  3)  Perlunya  perancangan pemesanan makan dan minum dengan menggunakan perangkat  yang  telah  terintegrasi  dengan  digital sehingga  pelanggan  tidak  perlu  mengantri  saat melakukan pemesanan.
Belum diketahui secara luas perancangan guna membantu bisnis dengan perpaduan teknologi pada sebuah  café  untuk  menarik  minat  pelanggan  agar nyaman.  Dengan  demikian  penulisan  ini  bertujuan untuk  menyelaraskan Design  User  Interface  dan User Experience dalam menjawab konsep dasar dari perancangan  aplikasi mobile pelayanan  Café  Biru FTI,  serta  penelitian  ini  juga  guna  menjawab kebutuhan  dari  pengguna  agar  meminimalisir kesalahan  komunikasi  saat  memesan  makan  dan minum  dengan  memberikan  ide  dan  solusi  yang diimplementasikan  pada design serta  dilakukannya prototype guna mempresentasikan hasil design agar dipahami  oleh  pengguna  saat  pengujian  sistem. Aplikasi  pemesanan  makan  dan  minum  dengan menerapkan Design  User  Interface dan User Experience yang  lebih  mudah,  efektif,  dan  efisien agar mampu memudahkan sistem dan proses bisnis yang  dirancang  maupun  yang  telah  dijalankan[3], selain itu juga dari penelitian ini memiliki daya tarik yang besar guna memajukan layanan pada Café Biru FTI  UKSW.  Pelayanan  pada  Café  Biru  FTI terkhusus  bagian  layanan  pemesanan  menjadi  titik fokus utama dari penelitian ini serta diterapkan pada
Copyright (c) 2023 Jurnal Mnemonic
design  interface aplikasi pemesanan Café Biru FTI sehingga  memberikan  konsep  dasar  untuk  adanya penelitian  lanjutan  ke  tahapan  program  aplikasi mobile .
Pada  penelitian  yang  berjudul  Pendekatan Human  Centered  Design pada  Perancangan User Experience Aplikasi Pemesanan Menu Café dengan tujuan  merancangkan  aplikasi  pemesanan  agar pelanggan dengan mudah dalam pemesanan makan dan  minum  serta  mengatasi  kesalahan  dalam pemesanan, seperti miss komunikasi antar pelanggan  dan  kasir  atau  juga  kasir  dan  dapur. Penelitian ini juga menerapkan user experience agar pengguna dapat mudah menggunakan konsep design yang  dirancang  serta  memberikan feedback mengenai tingkat kepuasan dari perancangan design aplikasi mobile . Metode pelaksanaan antara  lain  1) Studi  Literatur  dalam  mencari  informasi  melalui media  serta  artikel  yang  ada  terkait  permasalahan dalam  pemesanan  makan  dan  minum  2)  Analisis Konteks  Penggunaan  3)  Analisis  Kebutuhan Pengguna, yang dimana bertujuan agar mengetahui apa  yang  diinginkan  dari  pengguna  sehingga munculnya  ide  serta  solusi  dalam  merancangan sebuah design 4)  Pembuatan  Desain  5)  Evaluasi, guna mengetahui kekurangan dari sudut desain yang telah  dirancang  6)  Analisis  Hasil,  tahapan  tersebut dilakukannya  testing  atau  pengujian  dari  sistem yang telah dirancang. Hasil akhir dari penelitian ini adalah  perancangan  desain  serta  dilakukannya pengujian untuk mendapatkan hasil atau skor. Skor yang  dimaksud  sebagai  berikut, usability  testing mendapatkan hasil  sebesar 94,45%, dengan rincian dimana  aspek  efektifitas  sebesar  100%,  aspe efisiensi 95%, dan rata-rata aspek kepuasan sebesar 88,37%[4].
Pada  penelitian  kedua  berjudul  Perancangan UI/UX  Aplikasi Self  Service  in  Menu Dengan Pendekatan User  Cenered  Design ,  dengan  tujuan mengetahui apakah dengan dilakukannya pendekatan user centered design dapat membangun perancangan design  user  interface dan user experience agar  mudah  dipahami  pengguna  dalam menggunakan aplikasi tersebut. Metode pelaksanaan  yang  dilakukan  dari  penelitian  ini adalah user  centered  design dan system  usability scale sebagai  studi  pengujian  sistem  dari  desain yang  telah  dirancang  agar  pengguna  dapat  paham alur serta fungsi dari setiap tools yang ada, pada awal pelaksanaan  penulis  mencari  data  (Data  Kualitatif) dan dilanjutkan pengolahan data. Hasil yang didapat untuk  ditariknya  kesimpulan  yaitu  hasil  pengujian sebesar 86,58333333 dengan demikian nilai tersebut dikategorikan  sangat  baik  dalam  rantangan  nilai System Usability Scale (SUS). Oleh karena  itu dari penelitian ini dapat menjawab kebutuhan pengguna dengan  pendekatan User  Centered  Design dan System Usability Scale (SUS) pada proses pengujian design aplikasi Self  Service  in  Food  Menu  and Order [5] .
Berdasarkan  dari  kedua  jurnal  yang  telah dijelaskan  sebelumnya  maka  ditarik  inti  dari  poin adalah memiliki perbedaan dari antara kedua jurnal tersebut, yang dimana memiliki studi kasus, metode, pendekatan, pengujian yang berbeda setiap tahapannya.  Akan tetapi  yang  menjadi relevan dari jurnal di atas dengan penelitian ini yaitu pada jurnal pertama yang berjudul Perancangan UI/UX Aplikasi Self  Service  in  Menu Dengan  Pendekatan User Cenered  Design, yang  dimana  dari  penelitian tersebut memberikan pemahaman kepada pengguna terkait  konsep  dasar  dari design  interface serta dilakukannya  pengujian  sistem  menggunakan System  Usability  Scale sehingga  pengguna  dapat mudah  mengetahui  fungsi  fitur  dan tools yang terdapat pada perancangan design interface .

## 2. TINJAUAN PUSTAKA
2.1. User Interface and Prototyping User  Interface merupakan  masukan  dan keluaran yang lebih langsung melibatkan pengguna sistem. User Interface  juga  adalah  segala  hal  yang pengguna temui saat menggunakan sistem tersebut, baik secara  fisik, secara perseptual,  maupun secara konseptual[6] . dengan artian bahwa output dan input yang  melibatkan  pengguna  sistem  secara  langsung baik fisik, perseptual, dan konseptual[7]. Tugas dari seorang  desainer  adalah  mampu  berinovasi  dan kreatif  dalam  merangkai  tujuan  dari  aplikasi  yang akan dirancang[8] serta mempunyai keahlian dalam menutur tata warna, letak, size, dan font pada tools yang  digunakan  agar  tim  dari  developer  mudah diimplementasikan  pada  aplikasi mobile maupun web[9]. User  Experience merupakan  tahapan  yang penting  bagi  pengguna  dalam  perancangan design interface . Oleh karena itu, jika design interface sulit untuk  dipahami  oleh  pengguna  maka User Experience juga akan terlihat buruk[10].
Prototyping  tools merupakan  hal  yang  selalu diperlukan  bagi  UI  desainer  guna  mendesain aplikasi  android  maupun  aplikasi  IOS,  oleh  sebab itu  dari  ketiga  landasan  teori  ( user  interface dan prototype) ialah  saling  berkesinambungan  satu dengan yang lain agar pengguna saat mengoperasikan  mudah  dimengerti.  Pengertian prototype adalah model kerja dasar dari pengembangan  suatu  program  atau software.
Prototype dalam  Bahasa  Inggris  “ prototype ” disebut juga purwarupa[11].
2.2. Design Thinking
Menurut  Kelley  dan  Brown[12], Design Thinking merupakan  metode  inovasi  yang  fokus objeknya  adalah  manusia  dalam  menggunakan  alat desain  guna  mengintegrasikan  kebutuhan  orang- orang  pada  umumnya,    kemungkinan  teknis,  serta salah  satu  prosedur  demi  keberhasilan  sebuah proyek atau bisnis. Design think mampu memberikan  solusi  terhadap  permasalahan  yang dihadapi[13].  Tim  desainer  menjadikan  sebuah
proyek  yang  akan  direncanakan  dengan  suasana kolaborasi,  sehingga  terciptanya  terobosan  serta hasil perancangan yang kompleks guna menyelesaikan  permasalah  yang  ada.  Dalam perancangan  sebuah  proyek  dengan  demikian  bila tim  desainer  bersama-sama  menyatukan  pemangku pada sebuah kepentingan perusahaan maka komitmen  yang  ingin  dicapai  menjadikan  ide-ide serta inovasi dalam menjawab suatu solusi[14].
Metode  ini  melibatkan  eksperimen  yang sedang berjalan, seperti membuat sketsa, prototype, testing, dan  mengevaluasi  kerangka  dan  ide purwarupa. Tahapan dari design thinking terdapat 5 konsep,  antara  lain empathize,  define,  ideate, prototype, dan test. Dapat dilihat pada Gambar 1 :
Gambar 1. Tahapan Design Thinking

## 2.3. Empathize
Empathize (Empati) . Berawal  saat user melakukan research cara  berinteraksi  dengan lingkungan, serta mendapatkan pemahaman mengenai masalah yang didapat untuk diselesaikan[15].  Dengan  begitu  diperlukannya keterlibatan  dalam  mencari  informasi  tentang konsep  yang  menjadi  acuan  melalui  pengamatan, keterlibatan,  dan  empati  dengan  orang-orang  guna mengetahui  pengalaman  serta  motivasi  sehingga informasi  yang  diperoleh  menjadi  pemahaman pribadi  mengenai  masalah  yang ada[16]. Selain  itu tahapan  ini  sangat  penting  dalam  melakukan perancangan design dengan  berpusat  pada  objek manusia  serta  menjadikan  empati  sebagai  proses untuk mendapatkan pengetahuan tentang pengguna dan juga kebutuhan mereka.
2.4. Define
Define (Penentuan)  tahapan  kedua  setelah empathize adalah  menentukan  sebuah  topik permasalahan  yang  berfokus  pada user dan berdasarkan insight serta  kebutuhan user dalam melakukan perancangan[17]. Define juga merupakan  identifikasi  dalam  mengumpulkan informasi  selama  tahap  empati,  serta  pada  intinya
akan  dilakukan  analisis  dan  sintesis  guna menentukan  inti  permasalahan.  Tahap define menentukan  ide-ide  yang  telah  diidentifikasi  guna membantu  desainer  dalam  melakukan  perancangan design seperti fungsi, fitur, icon, dan elemen lainnya yang  akan  memungkinkan  untuk  menyelesaikan masalah dengan tingkat kesulitan minimal[18].
2.5. Ideate
Ideate (Ide/Inovasi) tahapan ketiga dari design thinking merupakan proses untuk menghasilkan ide yang  kreatif  pada  perancangan  sebuah design [19] , serta  dapat menyelesaikan topik permasalahan pada tahap  proses  pertama  “ Empathize” sehingga  tahap ini  menghasilkan  pendapat,  saran,  ide,  masukan untuk diimplementasikan pada perancangan design [20] .

## 2.6. Prototype
Prototype (Purwarupa) materi  keempat  dari metode design  thinking ialah prototype atau  yang biasa  disebut  purwarupa  dalam  Bahasa  Indonesia adalah konsep awal atau standar ukuran dari sebuah model[21]. Prototype adalah  perancangan  atau pengembangan  sebuah software dengan  tujuan sebagai  proses  penentuan  dari design yang  telah dibuat, sehingga dalam pengoperasian aplikasi web atau mobile terlihat  mudah  untuk  dipahami[22]. Berbagai  macam tools dari prototype seperti Javascript  Framework,  tapi  untuk  penelitian  ini penulis menggunakan tools Figma dalam melaksanakan  perancangan  jangka  pendek.  Hasil dari prototype dalam  pengujian  dapat  dilakukan dalam tim maupun perorangan.
2.7. Test
Test (testing/uji  coba)  tahap  terakhir  yaitu pengujian  dari prototype, dimana  penulis  akan mengujikan  kepada  mahasiswa  yang  dipilih  secara acak  berjumlah  10  orang.  Pengujian prototype menggunakan System Usability Scale (SUS) dengan tujuan  agar  mendapat feedback dari  pengguna  atau biasa  disebut  juga  umpan  balik,  dengan  demikian dari  hasil  pengujian  guna  menjawab  dalam penempatan fitur, struktur warna, dan alur tampilan desain aplikasi[23].  Selain  itu  melalui  pengujian prototipe dapat  mengevaluasi  rancangan desain serta  solusi  dengan  menginformasikan  konsep  dari user interface .
3. METODE PENELITIAN
3.1. Empathize
Pada tahapan awal dari Design Thinking adalah Empathize , proses dari tahapan ini juga ialah analisis kebutuhan  pengguna  yaitu  berupa  hasil  saran  dan masukkan melalui wawancara yang telah dilaksanakan  mengenai  situasi  dan  kondisi  dari permasalahan  yang  sehingga  menjadi  acuan  untuk dilakukannya perancangan design interface . Berikut dapat disajikan dalam bentuk Tabel 1.
Tabel 1. Empathize (Analisis Kebutuhan) No Hasil Riset Sumber 1 Terjadinya kekeliruan saat pemesanan barang Wawanc ara 2 Kesalahan komunikasi antara pelanggan dan kasir Wawanc ara 3 Kesalahan komunikasi antara kasir dan bagian dapur Wawanc ara 4 Perlunya ada terobosan baru dalam menangani permasalahan yang ada Wawanc ara 5 Pencatatan rincian pemesanan masih menggunakan kertas dan terkadang juga secara lisan Wawanc ara 6 Daya tarik pelanggan sangat kurang sehingga pelanggan (mahasiswa, staff, dosen) terkadang membeli makan atau minum di kantin bawah Kampus 3 FTI UKSW Wawanc ara 7 Pembukuan dan pencatatan pengeluaran dan pemasukan masih menggunakan buku sehingga rentan terjadinya kehilangan data Wawanc ara 8 Fakultas teknologi tapi kenapa masih diterapkan secara manual sistem pemesanan dan pembelian
Wawanc ara 9 Perlunya studi lanjut untuk membahas bersama pimpinan fakultas agar ada pembiayaan dan lain-lain Wawanc ara
10
Harus adanya aplikasi pendukung berbasis mobile dalam memudahkan layanan dari Café Biru FTI (pemesanan, pencatatan, pembukuan dan lain-lain yang bersifat pengembangan). Wawanc ara Selanjutnya diperinci dari hasil riset permasalahan yang didapat serta akan dikelompokkan  dengan  mengidentifikasi  calon pengguna, yang berfokus pada mahasiswa Fakultas Teknologi Informasi (FTI) Universitas Kristen Satya Wacana  (UKSW),  serta  menentukan  dua  kategori pengguna  yang  terdiri  dari  Persona  Pengguna. Setelah  itu  diidentifikasi  ke  dalam Empathy  Maps sehingga  menjawab  kebutuhan  dari  salah  satu pengguna  untuk  dilakukannya  perancangan design interface. Berikut  dapat  dilihat  pada  Gambar  2 (Persona Pengguna) dan Empathy Maps pada Tabel 2.
Gambar 2. Persona Pengguna (Mahasiswa)
Tabel 2. Empathy Maps
Says Thinks - Café FTI Biru sendiri sudah memiliki website akan tetapi belum secara optimal dalam pengembangan sistem guna memajukan pelayanan pada Café Biru FTI
- Ingin mengurangi terjadinya miss komunikasi antara pelanggan dan kasir serta kasir dan bagian dapur
- Ingin adanya sistem untuk mendukung layanan pada Café Biru FTI terkhusus bagian pemesanan dan pembelian
- Ingin menanggapi pencatatan pemesanan yang masih menggunakan kertas dan atau secara lisan
- Masih suka menggunakan sistem yang ada karena belum mengalami hal buruk
- Perlunya terobosan baru demi memajukan infrastruktur layanan Café Biru FTI serta menjadi daya tarik tersendiri
- Apakah ada sistem untuk menjawab permasalahan yang ada?
- Apakah dengan diterapkannya tersebut, pelayanan pada Café Biru FTI menjadi lebih efektif dan efisien?
- Jika ada sistem dalam melakukan pencatatan, apakah bisa menjawab? Agar lebih optimal dalam melakukan pencatatan maupun pembukuan
- Bagaimana jika saya mengalami kebingungan saat menggunakan sistem tersebut?
- Apakah dengan demikian Café Biru FTI berjalan sesuai kendala yang ada secara terus menerus?
- Dengan adanya sistem tersebut, menjadikan suatu ide serta solusi dalam memajukan layanan Café Biru FTI?
- Menggunakan media serta pelayanan yang ada dalam menampung permasalahan dan aspirasi yang ada
- Menggunakan layanan yang ada secara bertanggung jawab
- Mencari informasi terhadap pelayanan yang telah diterapkan sekarang - Khawatir - Takut - Cemas
- Tidak sabar - Pengen tahu Does Feels

## 3.2. Define
Proses kedua dari tahapan design thinking yaitu Define ,  tahapan  ini  merupakan  pengerucut  dari proses Empathize yang  dimana  diidentifikasi permasalahan yang untuk diperinci sehingga proses Define menentukan kebutuhan dari pengguna (Pain
Points), selanjutnya masuk ke proses How Might We dengan tujuan mengubah masalah menjadi pertanyaan,  dalam  arti  masalah  yang  akan diselesaikan sehingga dari hal tersebut ditentukannya  perancangan design  interface sesuai kebutuhan pengguna. Berikut Pain Points Pengguna
dapat  dilihat  pada  Tabel  3,  serta  hasil  dari How Might We dapat dilihat pada Tabel 4.
Tabel 3. Pain Points dari Pengguna No Pain Points Pengguna 1 Pengguna ingin adanya terobosan baru mengenai pelayanan yang ada pada Café Biru FTI dalam proses pemesanan minum maupun
makan.
2 Pengguna ingin adanya sistem untuk mengurangi terjadinya kesalahan dalam pemesanan.
3 Pengguna tidak ingin proses pemesanan dilakukan dengan cara tulis tangan, sehingga mengatasi terjadinya miss komunikasi
4 Pengguna khawatir bila terjadi kesalahan pemesanan
5 Pengguna berharap agar permasalahan tersebut dijawab dengan satu sistem yaitu aplikasi pada
mobile phone Tabel 4. How Might We No How Might We
1 Bagaimana agar pengguna dapat mengetahui konsep dasar dari perancangan?
2 Bagaimana agar permasalahan yang ada dapat diatasi?
No How Might We 3 Bagaimana agar sistem yang akan berjalan mengatasi kesalahan komunikasi?
4 Fitur apa saja yang akan dirancang guna menjawab agar tidak secara tulis kertas?
5 Membantu pelayanan pada Café Biru FTI dari segi pelayanan pemesanan
3.3. Ideate Selanjutnya  yaitu  proses Ideate, yang  dimana merupakan  proses  dalam  menentukan  fitur-fitur yang  akan  dilakukannya  perancangan design interface dari  aplikasi mobile pada  Café  Biru  FTI UKSW,  serta  perlu  adanya  keterangan  lebih  detail dan  spesifikasi  dengan  melaraskan  kebutuhan  dari pengguna  yang  dirancang  sesuai  ide  kreatif  dari penulis  dan  akan  dituangkan  dalam  perancangan design interface aplikasi mobile Café Biru FTI. Fitur yang  dimaksud  antara  lain login, beranda,  melihat menu  makan/minum, input data  pemesanan, pembayaran, notifikasi, dan profil. Berikut Tabel 5 dari solution  idea berupa  fitur  yang  akan dilakukannya perancangan design interface.
Tabel 5. Fitur pada Perancangan Design Interface Aplikasi Mobile Café Biru FTI Fitur Spesifikasi Kebutuhan Login/Register Pengguna melakukan login/register menggunakan NIM/alamat email. Beranda Pengguna dapat melihat beberapa informasi kampus, yang dimana menggunakan API untuk memanggil dari website sebelah (Pengumuman FTI, UKSW.edu, dan lain-lain) serta fitur menu guna memilih makan atau minum yang akan dipesan. Menu Makan/Minum Setelah pengguna melakukan klik pada fitur “Menu”, akan menampilkan segala jenis menu makanan dan minuman yang tersedia. Input Date Pengguna dapat melakukan pemesanan jika telah memilih makan atau minum Pembayaran Pengguna melakukan pembayaran, yang dimaksud adalah pembayaran secara langsung atau juga memilih metode pembayaran yang ada (API pemanggilan aplikasi kedua, ketiga dan seterusnya) Notifikasi Jika pesanan telah dibuat, maka akan muncul notifikasi bila pesanan telah jadi. Profil Fitur profil berfungsi sebagai penyimpanan data pengguna serta fitur tambahan lainnya seperti tentang aplikasi dan edit profil.

## 4. HASIL DAN PEMBAHASAN
4.1. Wireframe
Proses Wireframe bertujuan  agar  mengurangi terjadinya  kesalahan color atau icon sehingga kerangka dari design interface menjadi lebih kreatif dan  terstruktur,  serta  interaktif design  interface terhadap prototype yang  dijalankan  dan  hasil  akhir dari  perancangan design yang  dilaksanakan.  Pada Gambar 3 dijelaskan tampilan sketsa dari login dan registrasi,  dilanjutkan  pada  Gambar  4  merupakan tampilan  dari Wireframe beranda  dan  menu, selanjutnya pada Gambar 5 tampilan dari Wireframe buat  dan  informasi  pesanan,  pada  Gambar  6 menjelaskan Wireframe dari tampilan fitur pesanan, chat, dan profil.
Gambar 3. Wireframe Login dan Registrasi
Gambar 4. Wireframe Tampilan Beranda & Menu
Gambar 5. Wireframe Tampilan Buat & Informasi
Pesanan
Gambar 6. Wireframe Fitur Pesanan, Chat, Profil
4.2. Prototype
Berikutnya adalah Prototype, tahapan prototype menjadikan  antar  tampilan  memiliki interaktif satu dengan yang lain sehingga pengguna dapat mencoba konsep dasar dari perancangan yaitu design interface apakah berfungsi dengan baik atau sebaliknya.  Dengan  demikian  berikut  adalah penjelasan dari setiap prototype serta fungsinya.
Pada  Gambar  7  dijelaskan prototype fungsi dari Login dan  Register  ke  Beranda,  yang  dimana form Login dan Registrasi, pengguna terlebih dahulu memilih salah satu opsi “NIM atau Alamat Email”, kemudian klik Masuk.
Gambar 7. Prototype Login /Registrasi – Beranda
Selanjutnya  yaitu Prototype dari design interface Beranda  ke  Menu  Makan  atau  Minum, yang dimana fitur tersebut berfungsi agar pengguna dapat mengetahui menu apa saja yang tersedia dari aplikasi mobile layanan  Café  Biru  FTI.  Berikut disajikan pada Gambar 8.
Gambar 8. Prototype Beranda – Menu
Makan/Minum
Berikutnya terlihat pada Gambar  9, Prototype dari design interface bagian Menu Makan/Minum ke Buat Pesanan, fitur tersebut berfungsi saat pengguna melakukan  pesanan  dari  barang  yang  telah  dipilih, setelah itu sistem akan secara otomatis menampilan tampilan “Informasi Pesanan” yang artinya pesanan siap dibuat dari bagian dapur Café Biru UKSW.
Gambar 9. Prototype Buat Pesanan – Informasi Pesanan
Pada Gambar 10 yaitu tampilan fitur tambahan dari  aplikasi  layanan  Café  Biru  FTI,  tampilan Prototype yang dimaksud sebagai  berikut Pesanan, Chat, dan yang terakhir yaitu fitur Profil.
Gambar 10. Prototype Pesanan, Chat, Profil

## 4.3. Pengujian atau Testing
Pada  tahapan  pengujian prototype aplikasi mobile layanan  Café  Biru  FTI  UKSW,  penulis menggunakan System  Usability  Scale (SUS) sehingga  menjadi  tolak  ukur  dari  perancangan design interface yang telah dilaksanakan. Pengujian prototype berawal  dari  10  pertanyaan  yang  akan dilontarkan  ke  pengguna  yaitu  mahasiswa  FTI UKSW  yang dimana  menjadi titik  fokus penelitian ini.  Pertanyaan  yang  dimaksud  yaitu  melalui kuesioner yang akan dibagikan serta secara langsung pengguna  akan  melakukan  testing prototype menggunakan  “Figma  Mirror”.  Berikut  pertanyaan dari Usability Testing dapat dilihat pada Gambar 11.
Gambar 11. Pertanyaan Kuesioner
Berikutnya  cara  perhitungan  rumus  untuk mengetahui  rata-rata  skor  dari  jawaban  responden, yang  dimana  setiap  pertanyaan  bernomor  ganjil, dikurangi  1  dari  skor  (X-1)  sedangkan  pertanyaan yang bernomor genap, dikurangi nilainya dari 5 (5- X). Perhitungan rumus tersebut penulis menggunakan tools tambahan yaitu Microsoft Excel serta untuk rumusnya dapat dilihat pada Persamaan 1.
[ ∑ 𝑋𝑖 − 1 𝑛 𝑖=𝑏𝑖𝑙𝑎𝑛𝑔𝑎𝑛 𝑔𝑎𝑛𝑗𝑖𝑙 ] + [ ∑ 5 − 𝑋𝑖 𝑛 𝑖=𝑏𝑖𝑙𝑎𝑛𝑔𝑎𝑛 𝑔𝑒𝑛𝑎𝑝 ]

## = 𝑁𝑖𝑙𝑎𝑖 𝑆𝑈𝑆
Setelah  itu  jika  telah  mendapatkan  hasil  dari nilai Raw System Usability Scale (SUS), maka akan dilakukan  perhitungan  nilai  akhir  dari Raw SUS score yang  sebelumnya  telah  dihitung  dengan  cara mengalikan  2,5  pada  hasil  nilai Raw SUS score. Berikut  hasil  dari  perhitungan  akhir,  dapat  dilihat dari Tabel 6.
Tabel 6. Hasil Akhir System Usability Scale No Alamat Email Nama Lengkap NIM Program Studi Umur Kuesioner SUS To tal Nilai SUS Q1  Q2  Q3  Q4  Q5  Q6  Q7  Q8  Q9  Q10 1 672019109@stud ent.uksw.edu Buyung Herfandy Maay 672019 109 S1 Teknik Informatika 21 - 25 Tahun 5 2 5 1 4 1 5 2 5 2 36 90 2 672019100@stud ent.uksw.edu Zefanya L. G. Lala 672019 100 S1 Teknik Informatika 21 - 25 Tahun 3 1 3 2 5 1 5 2 4 1 33  82,5 3 682019132@stud ent.uksw.edu Binbaryas I. A. Koreri Rumabar 682019 132 S1 Sistem Informasi 21 - 25 Tahun 4 1 5 2 5 1 5 1 4 2 36 90 4 682019029@stud ent.uksw.edu Bithia Insoraki Rumabar 682019 029 S1 Sistem Informasi 21 - 25 Tahun 4 2 5 1 3 2 4 1 5 1 34 85 5 672018207@stud ent.uksw.edu Andrew Abraham Nussy 672018 207 S1 Teknik Informatika 21 - 25 Tahun 5 2 3 1 5 1 4 2 5 1 35  87,5 6 672019232@stud ent.uksw.edu Andrew R. F. Najoan 672019 232 S1 Teknik Informatika 21 - 25 Tahun 5 3 4 1 4 2 5 2 4 1 33  82,5 7 972021001@stud ent.uksw.edu Nestiara Lidya Kakihary 972021 001 S2 Sistem Informasi 21 - 25 Tahun 5 1 5 2 5 1 5 3 5 2 36 90 8 672018358@stud ent.uksw.edu Hana L Walingkas 672018 358 S1 Teknik Informatika 21 - 25 Tahun 3 1 5 1 5 2 4 1 5 1 36 90 9 972022004@stud ent.uksw.edu Adhe Ronny Julians 972022 004 S2 Sistem Informasi 21 - 25 Tahun 4 1 5 2 3 1 4 2 5 1 34 85
10 682020603@stud ent.uksw.edu Abraham C. C. Toroby 682020 603 S1 Sistem Informasi 21 - 25 Tahun 3 1 5 2 3 1 5 1 5 2 34 85
11 682017164@stud ent.uksw.edu Imanuel H. Mimin 682017 164 S1 Sistem Informasi 21 - 25 Tahun 4 1 5 1 5 1 5 1 4 2 37  92,5
12 672018349@stud ent.uksw.edu Soni Sampari Raweyai 672018 349 S1 Teknik Informatika 21 - 25 Tahun 5 1 3 1 4 1 5 1 4 2 35  87,5
13 672018292@stud ent.uksw.edu Yunus yustus Runggiary 672018 292 S1 Teknik Informatika 21 - 25 Tahun 5 1 5 2 4 2 5 1 5 3 35  87,5
No Alamat Email Nama Lengkap NIM Program Studi Umur Kuesioner SUS To tal Nilai SUS Q1  Q2  Q3  Q4  Q5  Q6  Q7  Q8  Q9  Q10 14 972022008@stud ent.uksw.edu Nikson Theys Muay 972022 008 S2 Sistem Informasi 21 - 25 Tahun 5 1 5 3 4 2 4 1 4 2 33  82,5 15 682018132@stud ent.uksw.edu Gerald Given Cevy Koroh 682018 132 S1 Sistem Informasi 21 - 25 Tahun 5 1 4 1 5 3 5 2 5 1 36 90 16 682018159@stud ent.uksw.edu Brian Efata Tuflasa 682018 159 S1 Sistem Informasi 21 - 25 Tahun 5 1 4 1 4 2 4 1 4 1 35  87,5 17 972022009@stud ent.uksw.edu Marcho Tumbade 972022 009 S2 Sistem Informasi 21 - 25 Tahun 5 1 5 1 5 1 5 1 5 1 40  100 18 702019710@stud ent.uksw.edu Otoi Narek 702019 710 S1 PTIK 21 - 25 Tahun 4 1 5 2 5 1 4 1 4 2 35  87,5 19 672018292@stud ent.uksw.edu Yunus yustus Runggiary 672018 292 S1 Teknik Informasi 21 - 25 Tahun 5 3 4 1 4 2 5 2 4 1 33  82,5 20 672018107@stud ent.uksw.edu Trivandi Marcelino Allouw 672018 107 S1 Teknik Informatika 21 - 25 Tahun 5 2 4 1 4 1 5 2 4 1 35  87,5 Skor Rata-rata (Hasil Akhir SUS) 87,625
Dengan  demikian  hasil  akhir  dari System Usability Scale (SUS) melalui perhitungan rata-rata dari  nilai  akhir  SUS  dibagi  dengan  jawaban responden  yang  telah  terkumpul  yaitu  berjumlah sebesar 87,625, sehingga nilai tersebut masuk dalam kategori  A  atau  sangat  baik  serta  berikut  adalah Gambar 12 skala dari System Usability Scale (SUS).
Gambar 12. Skala System Usability Scale (SUS)

## 5. KESIMPULAN DAN SARAN
Berdasarkan  dari  penelitian  yang  telah dilaksanakan  yaitu  mengenai  perancangan Design User Interface dan User Experience Aplikasi Mobile layanan  Café  Biru  FTI  UKSW  dengan  pendekatan Design Thinking menjawab permasalahan yang ada serta memberikan  inovasi  baru terkait media  bisnis terkhususnya  di  bagian  pelayanan  dan  pemesanan pada  Café  Biru  FTI.  Dari  penelitian  ini  juga memudahkan  pengguna  untuk  mengetahui  struktur dan konsep dasar dari perancangan Aplikasi Mobile , tidak hanya itu pengguna juga memberikan feedback guna  mengetahui  konsep  perancangan design interface.
Melalui  pengujian  dari  hasil  akhir prototype dapat  disimpulkan  bahwa  sistem  layak  digunakan, dimana  pada  pengujian System  Usability  Scale dengan memberi 10 pertanyaan yang diberikan ke 20 responden  maka  hasil  rata-rata  yang  didapat  yaitu bernilai  sebesar  87,625  dengan  kategori  A  atau terbilang sangat baik dari hasil perhitungan rata-rata.
Dengan demikian fungsi dari setiap fitur yang telah dirancang  dapat  dipahami  oleh  responden  atau pengguna.  Akan  tetapi  masih  terdapat  pengguna yang kurang paham untuk mengoperasikan “Figma Mirror” sehingga penulis harus  mendampingi serta memberi  penjelasan  singkat  terkait tools tersebut.
Mengacu  pada  penelitian  ini,  maka  perlunya
penelitian lebih lanjut untuk mengimplementasikan hasil design ke bagian programmer guna merancang program aplikasi mobile layanan Café Biru FTI.

## DAFTAR PUSTAKA
[1]  Kholida  Qothrunnada,  “Bisnis:  Pengertian,
Tujuan,  Jenis  dan  Contohnya,” detikFinance ,
2022. https://finance.detik.com/berita- ekonomi-bisnis/d-6049917/bisnis-pengertian- tujuan-jenis-dan-contohnya
[2]  “Apa  Itu  Bisnis  Digital,  Jenis-Jenis,  dan Keuntungannya,” Podomoro University , 2021. https://podomorouniversity.ac.id/apa-itu- bisnis-digital/
[3]  Sulindawaty, R. J. Barus, and M. D. Pratama, “Desain Internet of Things Untuk Perencanaan Produksi  Pada  Sektor  Usaha  Kecil  Dan Menengah,” J. Sains Komput. Inform. , vol. 4, no. 2, pp. 386–396, 2020, [Online]. Available: http://ejurnal.tunasbangsa.ac.id/index.php/jsak ti/article/view/230
[4]  F.  P.  Putra  and  A.  Tedyyana,  “Pendekatan Human  Centered  Design  pada  Perancangan User  Experience  Aplikasi  Pemesanan  Menu Cafe,” Sistemasi , vol. 10, no. 2, p. 336, 2021, doi: 10.32520/stmsi.v10i2.1229.
[5]  Y.  Yessy,  Syaiful  Rahman,  and  Hasniati, “Perancangan UI/UX Aplikasi Self Service in Menu  dengan  Pendekatan  User  Centered Design,” KHARISMA Tech , vol. 16, no. 2, pp. 1–14, 2021, doi:
10.55645/kharismatech.v16i2.106.
[6]  M.  Multazam,  “Perancangan  User  Interface dan User Experience pada Placeplus menggunakan  pendekatan  User  Centered Design,” Univ.  Islam  Indones. ,  vol.  1,  p.  8, 2020, [Online].
Available:
https://journal.uii.ac.id/AUTOMATA/article/v iew/15528/10233
[7]  D.  Haryuda,  M.  Asfi,  and  R.  Fahrudin, “Perancangan  UI/UX  Menggunakan  Metode Design Thinking Berbasis Web Pada Laportea Company,” J.  Ilm.  Teknol.  Infomasi  Terap. , vol.  8,  no.  1,  pp.  111–117,  2021,  doi: 10.33197/jitter.vol8.iss1.2021.730.
[8]  R.  Ramadan,  A.-Z.  H.  Muslimah,  and  R.  I. Rokhmawati,  “Perancangan  User  Interface Aplikasi EzyPay menggunakan Metode Design Sprint  (Studi  Kasus  PT.  Arta  Elektronik Indonesia),” J. Pengemb. Teknol. Inf. dan Ilmu Komput.  Univ.  Brawijaya ,  vol.  3,  no.  9,  pp. 8831–8840, 2019.
[9]  M.  haya  Waralalo,  “Analisis  User  Interface (UI) dan User Experience (UX) pada AIS UIN Jakarta  Menggunakan  Metode  Heuristik Evaluation  dan  Webuse  dengan  Standar  Iso 13407,” J. Chem. Inf. Model. , vol. 53, no. 9, pp. 1689–1699, 2019.
[10]  R.  S.  Kurnia  and  B.  Pujiarti,  “Perancangan User  Interface  dan  User  Experience  Adaptive Mobile  Learning  Untuk  Siswa  Sekolah Menengah,” vol. 3, no. 4, pp. 430–437, 2022, doi: 10.47065/josyc.v3i4.2085.
[11]  S.  Amalina,  F.  Wahid,  V.  Satriadi,  F.  S. Farhani, and N. Setiani, “Rancang Purwarupa Aplikasi  UniBook  Menggunakan  Metode Pendekatan  Design  Thinking,” Semin.  Nas. Apl. Teknol. Inf. , no. Oktober, pp. 50–55, 2017.
[12]  M.  L.  Lazuardi  and  I.  Sukoco,  “Design Thinking  David  Kelley  &  Tim  Brown:  Otak Dibalik Penciptaan Aplikasi Gojek,” Organum J. Saintifik Manaj. dan Akunt. , vol. 2, no. 1, pp. 1–11, 2019, doi: 10.35138/organum.v2i1.51.
[13]  B. N. H. 2 M.Lahandi Baskoro 1, “Penerapan Metode  Design  Thinking  Pada  Mata  Kuliah Desain  Pengembangan  Produk  Pangan,” J. IKRA-ITH Hum. , vol. 4, no. 2, pp. 83–93, 2020.
[14]  A.  Rizky  Rabbani,  “Penerapan  Design Thinking Terhadap Usaha Baju Di Toko Setal Pangkalpinang Dengan Menggunakan Website Sebagai Salah Satu Solusi,” Rainstek J. Terap. Sains dan Teknol. , vol. 3, no. 3, pp. 167–175, 2021, doi: 10.21067/jtst.v3i3.6046.
[15]  R. Andrian, A. S. Putri, F. Wiryandhani, and N. I.  N.  Rizaldi,  “Pengembangan  Website  E- Commerce  Khusus  Untuk  Penyedia  Jasa Penjualan  Hampers  Dengan  Metode  Design Thinking,” Integr.  (Journal  Inf.  Technol. Vocat.  Educ. ,  vol.  3,  no.  2,  pp.  41–45,  2021, [Online]. Available: https://ejournal.upi.edu/index.php/integrated/a rticle/view/35551
[16]  H. F. and K. Hidayati, “Memahami User lewat Empathize  dalam  Design  Thinking,” Glints , 2020.
https://glints.com/id/lowongan/empathize- dalam-design-thinking/#.Y4Ptw31Bw5t
[17]  I.  Mahendra  and  D.  T.  Eby  Yanto,  “Sistem Informasi  Pengajuan  Kredit  Berbasis  Web Menggunakan  Agile  Development  Methods Pada  Bank  Bri  Unit  Kolonel  Sugiono,” J. Teknol. Dan Open Source , vol. 1, no. 2, pp. 13– 24, 2018, doi: 10.36378/jtos.v1i2.20.
[18]  K. Ryan,  “5 Tahapan Design Thinking dalam Mengembangkan Strategi Digital Marketing,” toffeedev ,
2022.
https://toffeedev.com/blog/tahapan-design- thinking/ [19]  Y. Syahrul, “Penerapan Design Thinking Pada Media Komunikasi Visual Pengenalan Kehidupan  Kampus  Bagi  Mahasiswa  Baru Stmik Palcomtech Dan Politeknik Palcomtech,” J.  Bhs.  Rupa ,  vol.  2,  no.  2,  pp. 109–117, 2019, doi: 10.31598/bahasarupa.v2i2.342. [20]  Junaedi Lella  Nur,  “Mengenal  Design Thinking: 4 Elemen dan Cara Mengaplikasika,” Ekrut Media , 2022. https://www.ekrut.com/media/design- thinking-adalah
[21]  E.  L.  Hady,  K.  Haryono,  and  N.  W.  Rahayu, “User  Acceptance  Testing  (  UAT  )  pada Purwarupa  Sistem  Tabungan  Santri  (  Studi Kasus :  Pondok  Pesantren  Al-Mawaddah  ) User  Acceptance  Testing  (  UAT  )  of  the Prototype  of  Students  ’  Savings  Information System  (  Case  Study :  Al-Mawaddah  Islamic Boarding  Scho,” J.  Ilm.  Multimed.  dan Komun. , vol. 5, no. 1, pp. 1–10, 2020.
[22]  A. Mursyidah, I. Aknuranda, and H. Muslimah Az-Zahra, “Perancangan Antarmuka Pengguna Sistem  Informasi  Prosedur  Pelayanan  Umum Menggunakan Metode Design Thinking (Studi Kasus:  Fakultas  Ilmu  Komputer  Universitas Brawijaya),” J. Pengemb. Teknol. Inf. dan Ilmu Komput. ,  vol.  3,  no.  4,  pp.  3931–3938,  2019,
[Online]. Available: http://j-ptiik.ub.ac.id
[23]  D. W. Ramadhan, “PENGUJIAN USABILITY WEBSITE TIME EXCELINDO
MENGGUNAKAN  SYSTEM  USABILITY SCALE  (SUS)  (sTUDI  KASUS:  WEBSITE TIME  EXCELINDO),” JIPI  (Jurnal  Ilm. Penelit. dan Pembelajaran Inform. , vol. 4, no.
2, p. 139, 2019, doi: 10.29100/jipi.v4i2.977.