## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793

## Pengembangan Platform Coffee Shop KURLEB dengan Fokus pada User Interface dan Prinsip UX Law
Henoch Juli Christanto * , Stephen Aprius Sutresno, Gilberto Dennis G E Sidabutar, Jesslyn Alvina Seah, Siemens Benyamin Tjhang, Yoel Krisrian
Fakultas Teknik, Program Studi Sistem Informasi, Universitas Katolik Indonesia Atma Jaya, Jakarta Jln. Jend. Sudirman No.51, RW.4, Karet Semanggi, Kecamatan Setiabudi, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta, Indonesia
Email: 1,* henoch.christanto@atmajaya.ac.id, 2 stephen.sutresno@atmajaya.ac.id,
3 gilbert.202104560023@student.atmajaya.ac.id, 4 jesslyn.202104560019@student.atmajaya.ac.id,
5 siemens.202104560022@student.atmajaya.ac.id, 6 yoel.202104560017@student.atmajaya.ac.id Email Penulis Korespondensi: henoch.christanto@atmajaya.ac.id Submitted: 06/07/2023; Accepted: 30/10/2023; Published: 31/10/2023
Abstrak −Tren dan minat masyarakat terhadap coffee shop atau kafe semakin meningkat. Salah satu coffee shop yaitu Kopi KurangLebih memiliki potensi yang tinggi untuk menarik konsumen berkat lokasinya yang strategis, kualitas menu yang baik, dan  estetika  tempatnya.  Meskipun  Kopi  KurangLebih  sudah  memiliki  akun  Instagram  untuk  menampilkan  konten  dan berinteraksi  dengan  pengikutnya,  informasi  yang  tersedia  terbatas  dan  tidak  terstruktur  dengan  baik.  Pengunjung  kafe mengalami kesulitan dalam memilih menu karena tidak ada platform yang menampilkan konten yang tersedia di kafe tersebut. Oleh karena itu, diperlukan sebuah website untuk mendokumentasikan dan menampilkan informasi yang membantu pelanggan dalam memilih menu dan meningkatkan kualitas layanan. Pemanfaatan media informasi digital berupa website menjadi solusi efisien. Website tersebut perlu dirancang dengan menarik dan informatif sesuai dengan kebutuhan pengguna dan sumber daya yang dimiliki oleh Kopi KurangLebih. Dengan adanya website ini, calon pelanggan dapat dengan mudah mengakses informasi dan membangun kepercayaan serta minat beli terhadap kafe tersebut. Desain antarmuka pengguna (UI) yang sederhana dan user-friendly  membantu pengunjung dalam  menentukan pilihan  menu dengan  cepat dan  mudah. Metode Three Circles dan prinsip-prinsip UX Law diterapkan dalam UI, yang meliputi analisis nilai dari Kopi KurangLebih, kebutuhan pelanggan, dan nilai-nilai  dari  pesaing.  Penelitian  ini  berhasil  membangun  UI  prototype  webiste  KURLEB  menjadi  platform  digital  yang efektif untuk mempromosikan, menyimpan, dan menyediakan informasi tentang Kopi KurangLebih, serta berhasil memberikan pengalaman pengguna yang baik dengan menyediakan informasi yang relevan, navigasi yang intuitif, dan estetika visual yang menarik. Dengan UI yang baik dan prinsip-prinsip UX Law yang diterapkan, website ini memberikan pengalaman pengguna yang  positif,  meningkatkan  keterlibatan  pelanggan,  dan  berkontribusi  pada  pemasaran  yang  berkelanjutan  bagi  Kopi KurangLebih sebagai brand coffee shop lokal.
Kata Kunci: Coffee Shop; Three Circles; Desain Antarmuka Pengguna (UI); UX Law
Abstract −The  increasing  trend  and  public  interest  in  coffee  shops,  also  known  as  cafes.  One  of  the  cafes  named  Kopi KurangLebih has great potential to attract customers due to its strategic location, high-quality menu, and aesthetic ambiance. Although  Kopi  KurangLebih  already  has  an  Instagram  account  to  showcase  its  content  and  engage  with  followers,  the information provided is limited and lacks proper organization. Visitors to the coffee shop struggle to make menu choices due to the absence of a platform to display the available options. To address these challenges and improve the quality of service, a website is needed to document and present information that assists customers in making menu selections. The current reliance on social media as a source of information for coffee shops is inefficient and temporary, as the information shared only appears briefly on users' timelines. Hence, the development of an attractive and informative website for Kopi  KurangLebih becomes necessary.  The  website  should  be  designed  according  to  user  needs  and  the  resources  available  to  Kopi  KurangLebih.  By utilizing a digital information medium in the form of a website, potential customers can access and obtain information easily, thereby increasing their interest and purchasing power. The research also applies the Three Circles method and incorporates various UX Law principles into the user interface (UI) design. Through observations and analysis, the research identifies the values of Kopi  KurangLebih, customer needs, and competitor values. This research successfully built a UI prototype of the KURLEB website, transforming it into an effective digital platform for promoting, storing, and providing information about Kopi  KurangLebih.  It  also  achieved  a  good  user  experience  by  providing  relevant  information,  intuitive  navigation,  and appealing visual aesthetics. With a well-designed UI and the applied principles of UX Law, this website delivers a positive user experience, enhances customer engagement, and contributes to the sustainable marketing of Kopi KurangLebih as a local coffee shop brand.
Keywords: Coffee Shop; Three Circles; User Interface; UX Law

## 1. PENDAHULUAN
Industri coffee shop atau kafe telah menjadi bagian yang tak terpisahkan dari kehidupan perkotaan dewasa ini [1]. Kehadirannya  tidak  hanya  sekadar  sebagai  tempat  untuk  menikmati  minuman  kopi,  tetapi  juga  sebagai  tempat untuk bersantai, bekerja, atau berkumpul dengan teman. Seiring dengan meningkatnya tren dan minat masyarakat terhadap coffee shop, persaingan di dalam industri ini pun semakin ketat. Dalam menghadapi persaingan tersebut, para  pemilik  coffee  shop  perlu  terus  berinovasi  dan  mengembangkan  strategi  yang  efektif  untuk  menarik  dan mempertahankan  minat pelanggan [2]. Salah satu aspek penting  yang perlu diperhatikan adalah pengembangan platform digital yang dapat memberikan pengalaman pengguna yang baik, informatif, dan mempermudah interaksi dengan pelanggan [3].

## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793
Dalam  rangka  mempermudah  calon  pelanggan  dalam  mendapatkan  informasi  dan  meningkatkan antusiasme serta daya beli pelanggan, perlu dirancang dan dikembangkan kajian tentang KURLEB. User interface (UI) yang sederhana dan minimalis terkait dengan menu dapat membantu pengunjung dalam memilih menu yang ingin dibeli [4, 5]. Dengan menyediakan informasi produk seperti menu, harga, dan ulasan, keberadaan  website dapat membantu dalam  memperbaiki  layanan atau mempertahankan kualitas setelah  mendapatkan umpan  balik berupa  kritik,  saran,  dan  testimonial  dari  pelanggan  [6].  Oleh  karena  itu,  desain  UI  Kopi  KurangLebih  perlu dipertimbangkan  untuk  meningkatkan  kepuasan  pelanggan  dan  memenuhi  kebutuhan  pengguna.  Faktor-faktor penting dalam fitur-fitur yang ada dalam sistem akan bergantung pada evaluasi dari Kopi KurangLebih dan analisis kebutuhan pengguna [7].
Dengan memanfaatkan website sebagai media informasi digital untuk mempromosikan, menyimpan, dan menyediakan informasi, calon pelanggan akan lebih terfasilitasi dan meningkatkan kepercayaan serta minat beli [8]. Desain layout website mempengaruhi sikap konsumen terhadap website tersebut dan berdampak pada minat beli. Selain itu, minat beli pelanggan dapat dijelaskan oleh beberapa variabel, termasuk desain website dan ulasan online  [9].  Dengan  menggunakan  pemasaran  digital  melalui  website  KURLEB,  Kopi  KurangLebih  memiliki peluang  untuk  menarik  lebih  banyak  pembeli  dan  memperoleh  loyalitas  pelanggan.  Oleh  karena  itu,  perlu merancang  website  KURLEB  dengan  memperhatikan  berbagai  aspek,  mulai  dari  desain  hingga  fitur,  untuk mencapai loyalitas pelanggan yang berkelanjutan [10, 11].
Penelitian  terdahulu  dengan  judul  “Perancangan  UI/UX  pada  Web  e-Commerce  ‘Hallo  Coffee’ Menggunakan  Metode  User-Centered  Design”  yang  dilatarbelakangi  dengan  kebutuhan  pengusaha  baru  coffee shop yang memerlukan platform guna mempromosikan produk, serta belum banyak platform yang secara spesifik mewadahi kebutuhan dalam penjualan di sebuah coffee shop. Penelitian tersebut dilakukan dengan menggunakan metode User Centered Design (UCD), dimana memberikan hasil penelitian berupa prototype desain user interface website Hallo Coffee. Berdasarkan hasil uji validasi disimpulkan bahwa desain protoytpe aplikasi yang dibangun telah dikemas dan mudah dimengerti oleh user [12]. Penelitian tersebut memiliki perbedaan dengan penelitian ini dari  metode yang digunakan, dimana penelitian  ini dibangun  menggunakan  metode  Three Circles. Penggunaan metode  UCD  lebih  berfokus  pada  kebutuhan  pengguna  sebagai  landasan  dalam  proses  desain,  sedang  metode Three Circles tidak berfokus hanya pada kebutuhan pengguna melainkan juga melihat 2 elemen penting lainnya yaitu Our Value dan Competitors Value. Pemilihan penggunaan metode Three Circles ini didasari latar belakang banyaknya kompetitor untuk coffee shop yang ada di generasi sekarang, sehingga diperlukan platform yang dapat mempertahankan pelanggan.
Penelitian  lainnya  berjudul  “Perancangan  User  Interface  Mobile  App  untuk  Kumpulan  Start-Up  Coffee Shop di Wilayah Jakarta Timur sebagai Wadah Pemasaran Produk dengan Metode Design Thinking” membahas mengenai perancangan user interface aplikasi mobile kedai Coffee Shop menggunakan metode pendekatan design thinking.  Latar  belakang  penelitian  tersebut  dikarenakan  kemunculan  kedai  Coffee  Shop  yang  selalu  ramai kunjungan  bahkan  bagi  pelanggan  yang  malas  datang  ke  tempat  namun  masih  dapat  memanfaatkan  platform perantara  untuk  mendapatkan  menu  produk  dari  kedai  kopi,  sehingga  dibutuhkan  suatu  platform  khusus  yang berisikan berbagai kumpulan kedai kopi sehingga dapat mempermudah pelanggan dalam melihat dan memesan kopi dari aplikasi.  Pengujian aplikasi tersebut dilakukan  menggunakan perhitungan  Guerilla Usability Test  dan menghasilkan  nilai  keseluruhan  prototype  memiliki  pengalaman  pengguna  yang  bernilai  baik  [13].  Penelitian tersebut  juga  memiliki  perbedaan  dari  penelitian  yang  dilakukan  dari  segi  platform,  cakupan  aplikasi,  maupun metode yang digunakan. Penelitian tersebut dibangun untuk platform mobile sedangkan penelitian ini dibangun untuk  platform web  dengan  tujuan agar dapat  dijangkau dengan tidak terbatas pada  device, yaitu dapat  diakses mobile maupun desktop. Selain itu penelitian tersebut dibangun untuk kebutuhan kumpulan kedai kopi, sedangkan penelitian ini lebih berfokus pada 1 tempat coffee shop yaitu Kopi KurangLebih, dengan tujuan dapat memenuhi kebutuhan dan dapat meningkatkan loyalitas pelanggan.
Alasan di balik perancangan  KURLEB adalah untuk membantu membangun dan  mengembangkan salah satu  brand  coffee  shop  lokal,  yaitu  Kopi  KurangLebih,  dengan  menyediakan  wadah  informasi  digital  berupa website. Meskipun banyak brand coffee shop lokal di daerah ibu kota dan sekitarnya, Kopi KurangLebih dipilih karena memiliki potensi dan masih dapat dikembangkan lebih lanjut, terutama karena lokasinya yang berada di seberang Kampus III UNIKA Atma Jaya. Hal ini menjadi peluang bagi Kopi KurangLebih dan juga bagi kampus. Coffee  shop  dapat  meningkatkan  jual,  nilai  merek,  dan  loyalitas  pelanggan,  sementara  kampus  dapat memanfaatkan lokasi tersebut untuk memberikan nilai tambah kepada mahasiswanya dengan menyediakan tempat beristirahat, mengerjakan tugas, atau sekadar berbincang setelah pulang kampus.
Dalam proses pengembangan KURLEB, dilakukan analisis nilai-nilai yang dimiliki oleh kafe, kebutuhan pengguna,  serta  mempertimbangkan  nilai-nilai  dari  pesaing  dalam  industri  coffee  shop.  Metode  Three  Circles digunakan  sebagai  kerangka  analisis  untuk  memastikan  informasi  yang  disajikan  relevan  dengan  kebutuhan pengguna dan membedakan KURLEB dari pesaing lainnya [6]. Selanjutnya, prinsip-prinsip UX Law diterapkan dalam  desain  UI  KURLEB,  termasuk  Law  of  Proximity,  Law  of  Fitts,  dan  Law  of  Common  Region.  Prinsip- prinsip ini bertujuan untuk menciptakan pengalaman pengguna yang intuitif, mudah dipahami, dan memperkuat pengelompokkan informasi yang penting [14, 15]. Melalui penelitian ini diharapkan dapat memberikan kontribusi dalam  pengembangan  platform  coffee  shop  yang  lebih  baik,  mempertahankan  kepuasan  pelanggan,  dan memberikan daya saing yang lebih baik dalam industri coffee shop yang semakin kompetitif.

## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793

## 2. METODOLOGI PENELITIAN
Sistem  dari  KURLEB  dirancang  menggunakan  metode  Three  Circle.  Three  Circle  adalah  sebuah  konsep  yang digunakan dalam bisnis dan manajemen untuk menggambarkan hubungan antara tiga elemen kunci yang saling terkait gambar 1.
Gambar 1. Three Circles
Berdasarkan tiga elemen kunci pada gambar 1, dibentuk tiga elemen dalam metode yang digunakan oleh KURLEB seperti yang terlihat pada gambar 2. Pertama adalah elemen Our Value dari Kopi KurangLebih, yang merupakan nilai atau keunggulan yang dimiliki oleh Kopi  KurangLebih dalam perbandingan dengan kebutuhan pengguna  dan  kompetitor.  Kedua  adalah  elemen  Customers  Needs  dari  Kopi  KurangLebih,  yang  melibatkan analisis  kebutuhan  pengguna  untuk  membantu  penyesuaian  desain  website  KURLEB.  Ketiga  adalah  elemen Competitors Value, yang melibatkan analisis nilai dari kompetitor untuk mengidentifikasi peluang dan ancaman yang ada. Tujuannya adalah untuk menemukan celah peluang yang belum dimanfaatkan oleh kompetitor.

## Gambar 2. Three Circles dengan Value
Analisis menggunakan metode Three Circles seperti terlihat pada gambar 2 yaitu pendekatan yang berguna untuk memahami elemen-elemen penting dalam perancangan UI dan pengembangan produk atau layanan. Berikut ini adalah analisis dari Three Circles yang dilakukan untuk Kopi KurangLebih:
1. Our Value
Dalam  analisis  ini,  fokus  diberikan  pada  nilai-nilai  atau  keunggulan  yang  dimiliki  oleh  Kopi  KurangLebih. Dalam konteks ini, nilai-nilai yang diidentifikasi adalah UI yang simpel dan minimalis sesuai dengan panduan merek.  Hal  ini  bertujuan  untuk  meningkatkan  fokus  pengguna,  memberikan  pengalaman  yang  terarah,  dan meningkatkan  efisiensi  pengguna  [16].  Selain  itu,  nilai  lainnya  adalah  kemampuan  untuk  menampilkan informasi  menu,  lokasi,  dan  informasi  penting  lainnya  dengan  jelas.  Hal  ini  memastikan  bahwa  kebutuhan informasi pengguna terpenuhi dan juga membantu dalam hal pemasaran dan branding [17].
2. Customers Needs
Analisis ini dilakukan untuk memahami kebutuhan pengguna dalam konteks perancangan UI. Dalam hal ini, kebutuhan  pengguna  yang  diidentifikasi  adalah  kompatibilitas  di  semua  platform  sistem  operasi.  Pengguna menginginkan akses dan pengalaman yang serupa, tidak peduli pada perangkat atau sistem operasi  apa yang mereka  gunakan.  Oleh  karena  itu,  perancangan  UI  harus  memastikan  bahwa  solusi  yang  ditawarkan  dapat berfungsi dengan lancar di semua platform yang digunakan pengguna. Selain itu, keinginan pengguna lainnya adalah tampilan yang ramah pengguna (user-friendly) [18, 19]. Antarmuka harus dirancang dengan intuitif dan mudah dipahami, sehingga pengguna dapat dengan cepat dan mudah mempelajari cara menggunakan produk atau layanan tanpa banyak pelatihan atau bantuan eksternal [20].
3. Competitors Value
Analisis ini bertujuan untuk mengidentifikasi nilai atau kelebihan yang dimiliki oleh kompetitor, dalam hal ini Kopi  Kenangan  dan  Fore  Coffee.  Salah  satu  nilai  yang  ditemukan  adalah  penggunaan  antarmuka  yang menggunakan panduan warna dengan tidak lebih dari 3 warna [21]. Hal ini memberikan kesan konsistensi dan

## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793
harmonis dalam penggunaan warna. Dengan konsistensi ini, pengguna dapat dengan mudah mengenali elemen- elemen yang terkait dan membangun pemahaman yang kohesif tentang UI [22].
Gambar 3. Hasil Observasi dengan Three Circles
Melalui  analisis  menggunakan  metode  Three  Circles  seperti  yang  terlihat  pada  gambar  3,  dapat  ditarik kesimpulan bahwa Kopi KurangLebih memiliki keunggulan dalam desain UI yang simpel dan minimalis, mampu menyajikan informasi dengan jelas, memiliki desain konsep visual sesuai dengan panduan merek, serta memenuhi kebutuhan pengguna yang menginginkan kompatibilitas dan tampilan yang ramah pengguna. Selain itu, analisis juga mengidentifikasi kelebihan kompetitor dalam penggunaan warna yang konsisten [21].
Hasil analisis seperti pada gambar 3 dapat digunakan sebagai dasar untuk merancang UI yang sesuai dengan nilai-nilai dan kebutuhan yang diidentifikasi. Berikut ini merupakan konsep visual yang dipakai untuk merancang desain antarmuka website Kopi KurangLebih yang dapat dilihat pada gambar 4.

## Gambar 4. Konsep Visual
Gambar  4  merupakan  konsep  visual  sebagai  dasar  membangun  UI  website  Kopi  KurangLebih menggunakan aplikasi Canva. Tampilan website coffee shop ini mengusung tema minimalis dengan menggunakan warna brownish dan monokrom atau hitam putih untuk memberikan kesan modern dan nyaman. Untuk tipografi, digunakan font Telegraf, Telegraf Medium, dan Telegraf Light. Selain itu, foto-foto menu yang tersedia juga akan ditambahkan sebagai informasi penting.

## 3. HASIL DAN PEMBAHASAN
Berdasarkan analisis observasi menggunakan metode Three Circles dan penerapan UX Law dalam UI didapatkan beberapa halaman desain prototype website Kopi KurangLebih mulai dari halaman Home Page, Information Page, Full Page Information, Offering Product Page, Menu Coffee, Menu Non Coffee, Review Page, dan Our Location Page.

## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793
Gambar 5. Home Page
Gambar  5  merupakan  Home  Page  yang  dibangun  dengan  menerapkan  poin  D  dalam  gambar  3,  yaitu menghasilkan  variasi  warna  yang  sesuai  dengan  panduan  brand.  Dalam  menerapkan  UX  Law,  juga  diterapkan Pragnanz Law  dengan  menyederhanakan penyebutan menjadi  bentuk yang  lebih  sederhana.  Selain  itu, terdapat penerapan Aesthetic Usability Effect yang membuat pengguna lebih tertarik untuk menggunakan produk dengan visual yang menarik, karena dianggap bahwa produk yang menarik juga lebih bermanfaat [23].

## Gambar 6. Information Page
Halaman  berikutnya  pada  gambar  6  menampilkan  halaman  informasi.  Dalam  penerapan  metode  Three Circles, poin D diterapkan dengan menampilkan informasi penting dan menarik tentang Kopi  KurangLebih agar pengguna dapat memahami produk yang ditawarkan. Selain itu, halaman ini juga dirancang agar mudah dipahami oleh  pengguna  dengan  adanya  gambar  kopi  yang  menggambarkan  informasi  tentang  kopi  itu  sendiri.  Dalam penerapan  UX  Law,  terdapat  penerapan  Pragnanz  Law  dengan  menyajikan  informasi  secara  sederhana  seperti gambar kopi, serta tombol "learn more" yang memberikan informasi lebih rinci tentang kopi KurangLebih.

## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793
Halaman berikutnya pada gambar 7 merupakan lanjutan dari halaman informasi setelah pengguna menekan tombol 'learn more'. Dalam penerapan metode Three Circles, poin D diterapkan dengan menampilkan informasi penting dan menarik tentang Kopi KurangLebih agar pengguna dapat memahami produk yang ditawarkan. Selain itu,  halaman  ini  juga  dirancang  agar  mudah  dipahami  oleh  pengguna  dengan  adanya  gambar  kopi  yang menggambarkan  informasi  tentang  kopi  itu  sendiri.  Dalam  penerapan  UX  Law,  terdapat  penerapan  Fitt's  Law dengan menyediakan tombol 'back home' yang memiliki ukuran yang cukup besar sehingga jarak tombol tersebut dapat dengan mudah dijangkau oleh pengguna untuk kembali ke halaman utama.
Gambar 8. Offering Product Page
Halaman  berikutnya  merupakan  halaman  penawaran  seperti  terlihat  pada  gambar  8.  Dalam  penerapan metode  Three  Circles,  terdapat  penggunaan  untuk  menampilkan  informasi  mengenai  minuman  terlaris  yang tersedia  di  Kopi  KurangLebih.  Hal  ini  ditujukan  untuk  menawarkan  minuman  yang  paling  diminati  oleh pelanggan.  Selain  itu,  terdapat  konsistensi  dalam  penggunaan  warna  yang  sesuai  dengan  brand  guide.  Dalam penerapan UX Law, terdapat penerapan Law of Common Region yang mengacu pada prinsip pengelompokkan. Pengelompokkan ini menggabungkan beberapa objek menjadi satu informasi yang jelas [24]. Pada halaman ini, juga  terdapat  penerapan  Fitt's  Law  dengan  menempatkan  tombol  'view  full  menu'  di  tengah  halaman  dan memberikan ukuran yang cukup besar sehingga memudahkan pengguna untuk menjangkaunya.
Halaman berikutnya menampilkan menu minuman kopi seperti terlihat pada gambar 9. Dalam penerapan metode  Three  Circles,  halaman  ini  menampilkan  informasi  mengenai  minuman  kopi  yang  tersedia  di KurangLebih. Informasi yang ditampilkan meliputi nama dan harga kopi, sehingga memberikan informasi penting

## Journal of Information System Research (JOSH)
bagi pengguna dan membantu mereka dalam melihat menu. Dalam penerapan UX Law, terdapat penerapan Law of Miller yang menyatakan bahwa manusia memiliki keterbatasan dalam memproses informasi, yaitu hanya dapat mengingat sekitar 7 informasi pada satu waktu. Pada gambar 9, terdapat 6 informasi, sehingga halaman ini sesuai dengan Law of Miller. Selain itu, Pragnanz Law juga diterapkan dengan menempatkan tombol "home" di pojok kanan atas halaman. Selanjutnya, terdapat penerapan Law of Proximity dalam UX Law yang menyatakan bahwa objek yang berdekatan akan terlihat sebagai satu kelompok [24]. Dapat dilihat pada gambar 9, objek-objek tersebut berdekatan satu sama lain, menciptakan kesan kelompok.
Gambar 10. Menu Non Coffee
Halaman  berikutnya  menampilkan  menu  minuman  non-kopi  seperti  terlihat  pada  gambar  10.  Dalam penerapan metode Three Circles, halaman ini menampilkan informasi mengenai minuman non-kopi yang tersedia di KurangLebih. Informasi yang ditampilkan meliputi nama dan harga minuman, yang menjadi informasi penting bagi  pengguna  dalam  melihat  menu.  Dalam  penerapan  UX  Law,  terdapat  penerapan  Law  of  Proximity  yang menyatakan bahwa objek yang berdekatan akan terlihat sebagai satu kelompok [24]. Dapat dilihat pada gambar 10, objek-objek tersebut berdekatan satu sama lain, menciptakan kesan kelompok. Selain itu, Pragnanz Law juga diterapkan dengan menempatkan tombol "home" di pojok kanan atas halaman.
Gambar 11. Review Page
Halaman  berikutnya  merupakan  halaman  penilaian  seperti  terlihat  pada  gambar  11.  Dalam  penerapan metode Three Circles, halaman ini menampilkan informasi mengenai penilaian kopi  KurangLebih dari berbagai platform. Penelitian ini tetap konsisten dalam menerapkan warna sesuai dengan panduan merek. Dalam penerapan UX  Law,  terdapat  penerapan  Law  of  Common  Region  yang  mengacu  pada  prinsip  pengelompokkan.

## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793
Pengelompokkan dilakukan untuk menggabungkan beberapa objek menjadi satu informasi yang jelas dan terlihat terkait [24].
Gambar 12. Our Location Page
Halaman selanjutnya adalah Location Page yang terlihat pada gambar 12. Dalam menerapkan metode Three Circles,  konsisten  dalam  menggunakan  warna  yang  sesuai  dengan  brand  guide  tetap  dilakukan.  Penerapan  UX Law yang terdapat adalah Law of Fitts pada tombol 'back home', karena semakin besar dan dekat sebuah objek, maka lebih mudah dijangkau. Oleh karena itu, tombol tersebut dirancang berdekatan dengan item di atasnya dan memiliki ukuran yang cukup panjang. Selanjutnya, penerapan  Law of Common Region dapat ditemukan dalam pengelompokkan  informasi  [24].  Hal  ini  terlihat  dalam  pengelompokkan  daerah  lokasi  di  Jakarta menjadi  satu informasi yang jelas.
Terdapat  juga  penerapan  metode  Three  Circles  yang  menampilkan  informasi  tambahan  yang  penting, seperti akun Instagram, kontak, email, dan alamat dari Kopi KurangLebih yang terletak di Kelapa Gading sebagai cabang  pusat.  Selain  itu,  terdapat  informasi  penting  berupa  foto  situasi  di  Coffee  Shop  Kelapa  Gading  yang bertujuan untuk menarik  minat pengguna untuk mengunjungi  coffee shop tersebut. Dalam penerapan  UX Law, terdapat  Law  of  Proximity  yang  mengindikasikan  bahwa  bentuk  yang  berdekatan  akan  terlihat  sebagai  satu kelompok [24]. Terdapat bagian dengan warna coklat di bawah yang terlihat seperti menjadi satu kelompok.

## 4. KESIMPULAN
Dari  analisis  menggunakan  metode  Three  Circles  dan  penerapan  prinsip  UX  Law  dalam  User  Interface,  dapat dilihat  bahwa  desain  halaman-halaman  yang  disajikan  dalam  contoh  tersebut  mengikuti  prinsip-prinsip  yang efektif dalam menciptakan pengalaman pengguna yang baik. Penggunaan gambar dan foto pada halaman-halaman yang ada memberikan dampak visual yang signifikan. Gambar-gambar tersebut tidak hanya menambah estetika, tetapi juga memberikan gambaran yang lebih jelas tentang produk dan suasana di Coffee Shop KurangLebih. Hal ini dapat meningkatkan minat dan daya tarik pengguna untuk mengunjungi dan mencoba produk yang ditawarkan.
Secara  keseluruhan,  UI  ini  berhasil  memberikan  pengalaman  pengguna  yang  baik  dengan  menyediakan informasi  yang  relevan,  navigasi  yang  intuitif,  dan  estetika  visual  yang  menarik.  Dengan  demikian,  halaman- halaman tersebut dapat meningkatkan efektivitas dan kepuasan pengguna dalam berinteraksi dengan platform kopi KurangLebih. Melalui penerapan metode Three Circles dan prinsip UX Law, UI ini mampu memenuhi kebutuhan pengguna dan memberikan pengalaman yang positif dalam menjelajahi dan berinteraksi dengan platform tersebut.

## REFERENCES
[1]   N.  Iman,  A. M. Muhar and  A.  I. Sari, "Analisis Daya  Saing Industri Coffee Shop di  Kota Medan,"  Jurnal Akuntansi Manajemen Ekonomi Kewirausahaan, vol. 2, no. 1, pp. 54-64, 2022, doi: 10.47065/jamek.v2i1.206.
[2]   S.  A.  Solihin,  D.  Nugrahyani  and  M.  H.  Fadhillah,  "Analisis  Strategi  Pemasaran  pada  Kerta  Cafe  dalam  Upaya Memulihkan Ekonomi Pasca Pandemi Covid-19," Coopetition: Jurnal Ilmiah Manajemen, vol. 13, no. 2, pp. 259-266, 2022, doi: 10.32670/coopetition.v13i2.1604.
[3]   R. D. Wiastuti, N. S. Lestari and N. I. Mulyaningrum, "The Coffee Shop Experience for All," PJAEE, vol. 17, no. 7, pp. 2850-2863, 2020, [Online]. Available: https://archives.palarch.nl/index.php/jae/article/view/ 1596.

## Journal of Information System Research (JOSH)
Volume 5, No. 1, Oktober 2023, pp 293−301 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i1.3793
[4]   D. Y. Riyanto, "Deeper Understanding of Customer Needs Utilizing Customer Relationship Management,"  Journal of Applied Management and Business, vol. 3, no. 1, pp. 1-10, 2022, doi: 10.37802/jamb.v3i1.241.
[5]   D. H. Putra, M. Asfi and R. Fahrudin, "Perancangan UI/UX Menggunakan Metode Design Thinking Berbasis Web Pada Laportea  Company,"  Jurnal  Ilmiah  Teknologi  Informasi  Terapan,  vol.  8,  no.  1,  pp.  111-117,  2021,  doi: 10.33197/jitter.vol8.iss1.2021.730.
[6]   L. Luther, V. Tiberius and A. Brem, "User Experience (UX) in Business, Management, and Psychology: A Bibliometric Mapping of the Current State of Research," Multimodal Technologies and Interaction, vol. 4, no. 18, pp. 1-19, May 2020, doi: 10.3390/mti4020018.
[7]   I. Darmawan, M. S. Anwar, A. Rahmatulloh and H. Sulastri, "Design Thinking Approach for User Interface Design and User Experience on Campus Academic Information Systems," JOIV : International Journal on Informatics Visualization, vol. 6, no. 2, pp. 327-334, June 2022, doi: 10.30630/joiv.6.2.997.
[8]   H. Cheng, "How does interaction design affect user experience throughonline shopping interfaces?,"  IOP Conference Series: Materials Science and Engineering, pp. 1-10, 2019, doi: 10.1088/1757-899X/573/1/012076.
[9]   H. J. Christanto, "Game Theory Analysis on Marketing Strategy Determination of KAI Access and Traveloka based on Usability  of HCI (Human-Computer  Interaction),"  Journal  of  Information Systems and  Informatics,  vol. 4,  no. 3, pp. 665-672, 2022, doi: 10.51519/journalisi.v4i3.300.
[10]  N.  Rusti,  Irham  and  A.  Suryantini,  "The  Factors  Influencing  Local  Coffee  Shop  Customers’  Satisfaction  in  the  4.0 Industry Era," AGRO EKONOMI, vol. 32, no. 2, 2021, doi: 10.22146/ae.60861.
[11]  F. Fatihahsari and C.  Darujati, "Analisis Usability Mobile Apps Edlink dengan Menggunakan  Heuristic Evaluation," SISTEMASI: Jurnal Sistem Informasi, vol. 10, no. 2, pp. 404-413, 2021, doi: 10.32520/STMSI.V10I2.1263.
[12]  P. Z. Dinata, M. A. Urwah, M. R. Rahmawan and E. Junaeti, "Perancangan UI/UX pada Web e-Commerce ‘Hallo Coffee’ Menggunakan  Metode  User-Centered  Design,"  Jambura  Journal  of  Informatics,  vol.  5,  no.  1,  pp.  45-58,  2023,  doi: 10.37905/jji.v412.17511.
[13]  T. A. Andriani, D. P. Sari and R. Andrian, "Perancangan User Interface Mobile App untuk Kumpulan Start-Up Coffee Shop di Wilayah Jakarta Timur sebagai Wadah Pemasaran Produk dengan Metode Design Thinking," Jurnal Sistem dan Teknologi Informasi, vol. 11, no. 1, pp. 61-69, 2023, doi: 10.26418/justin.v11i1.54947.
[14]  A.  Purnomo  and  A.  Ardiansyah,  "Pengembangan  User  Experience  (UX)  dan  User  Interface  (UI)  Aplikasi  Ibeauty Berbasis Android," Jurnal Sarjana Teknik Informatika, vol. 6, no. 3, pp. 18-27, 2018, doi: 10.12928/jstie.v6i3.15251.
[15]  S. R. R. I and S. A. Saputra, "Perancangan UI/UX Design pada Aplikasi Jasa Freelancer Berbasis Android Menggunakan Metode  User  Centered Design,"  Jurnal Ilmiah  Matrik, vol.  25,  no.  1,  pp.  7-14,  2023,  doi: 10.33557/jurnalmatrik.v25i1.2279.
[16]  P. Marzec and D. M. Piotrowski, "Remote usability testing carried out during the COVID-19 pandemic on the example of Primo VE implementation in an Academic Library," The Journal of Academic Librarianship, vol. 49, no. 3, p. 102700, May 2023, doi: 10.1016/j.acalib.2023.102700.
[17]  L. Dumitrescu and C. Budac, "The Business Value," Management & Marketing, vol. 6, no. 1, pp. 83-88, 2008, [Online]. Available: https://ideas.repec.org/a/aio/manmar/v6y2008i1p83-88.html.
[18]  P.  Weichbroth,  "Usability  of  Mobile  Applications:  A  Systematic  Literature  Study,"  IEEE  Access,  vol.  8,  pp. 55563- 55577, March 2020, doi: 10.1109/ACCESS.2020.2981892.
[19]  S. Ernawati and A. D. Indriyanti, "Perancangan User Interface dan User Experience Aplikasi Medical Tourism Indonesia Berbasis Mobile Menggunakan Metode User Centered Design (UCD) (Studi Kasus: PT Cipta Wisata Medika)," Journal of  Emerging  Information  Systems  and  Business  Intelligence,  vol.  3,  no.  4,  pp.  90-102,  2022,  [Online].  Available: https://ejournal.unesa.ac.id/index.php/JEISBI/article/view/49296.
[20]  R. R. M and S. P.K, "Customer Needs and Customer Satisfaction," in Theeranaipunya - A Capacity Building Training Programme Equipping the Fisherwomen Youth for the Future, India, Indian Council of Agricultural Research, 2016, pp. 259-262, [Online]. Available: http://eprints.cmfri.org.in/10824/.
[21]  W. Swasty and  A. R.  Adriyanto, "Does Color Matter on Web User  Interface Design?,"  CommIT (Communication & Information Technology) Journal, vol. 11, no. 1, p. 17–24, 2017, doi: 10.21512/commit.v11i1.2088.
[22]  M. Mirkowicz and G. Grodner, "JAKOB NIELSEN’S HEURISTICS IN SELECTED ELEMENTS OF INTERFACE DESIGN OF SELECTED BLOGS," Social Communication, vol. 2, pp. 30-51, 2018, doi: 10.2478/sc-2018-0013.
[23]  F.  Abdillah,  D.  S.  Pradana  and  W.  Suharso,  "Pengaruh  Prinsip  Design  Aesthetics  User  Interface  Terhadap  Usability Aplikasi  J&T  Express  Di  Kota  Malang,"  Jurnal  Repositor,  vol.  2,  no.  8,  pp.  1028-1040,  2020,  doi: 10.22219/repositor.v2i8.506.
[24]  L. Crum, "Laws of UX: Using Psychology to Design Better Products & Services,"  The Journal of the Design Studies Forum, vol. 12, no. 3, p. 357–359, 2020, doi: 10.1080/17547075.2020.1822074.