Perancangan UI/UX Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma –( M. Agus Muhyidin, Muhammad Afif Sulhan, Agus Sevtiana)

## PERANCANGAN UI/UX APLIKASI MY CIC LAYANAN INFORMASI AKADEMIK MAHASISWA MENGGUNAKAN APLIKASI FIGMA
M. Agus Muhyidin 1 , Muhammad Afif Sulhan 2 , Agus Sevtiana 3 Universitas Catur Insan Cendekia Jl. Kesambi 202, Kota Cirebon, Jawa Barat. Telp (0231)220350 e-mail: agusmuhyidin10@gmail.com 1 , sulhan.afif@gmail.com 2 , a.sevtiana@gmail.com 3

## ABSTRAK
Universitas Catur Insan Cendekia sebagai institusi yang bergerak dalam bidang pendidikan telah memanfaatkan teknologi informasi terutama yang berkaitan dengan proses belajar dan mengajar. My CIC adalah aplikasi sistem informasi akademik mahasiswa berbasis web dengan tujuan memberikan informasi seputar  akademik  kepada mahasiswa.  My  CIC  yang  beralamat https://my.cic.ac.id/.  Jumlah pengunjung website  My  CIC  ini  hanya  meningkat  pada  saat-saat  tertentu  saja,  hal  ini  dikarenakan  informasi  yang terdapat pada My CIC ini kurang lengkap. Selain itu terdapat beberapa permasalahan antara lain tampilan desain dari My CIC kurang menarik dan ada beberapa halaman & tombol kurang di pahami oleh mahasiswa yang mengakses website My CIC. Dalam perancangan desain UI/UX prototype aplikasi My Cic ini penulis memberi solusi untuk merancang desain sebuah aplikasi my CIC dengan user interface dan user experience yang  menarik,  minimalis  dan  modern.  Dalam  perancangan  ini  software  editing  yang  digunakan  adalah Figma, dan didalam nya berisi terkait informasi akademik mahasiswa seperti profil mahasiswa, data nilai, KRS, jadwal kuliah, ujian online, diskusi kelas, kartu ujian, riwayat mengulang dan transaksi administrasi keuangan mahasiswa. Dengan perancangan ini diharapkan Universitas Catur Insan Cendekia tetap berupaya untuk penerapan teknologi dibidang pendidikan dan untuk meningkatkan kinerja, kualitas pelayanan, daya saing  kualitas  sumber  daya  manusia  yang  pada  akhirnya  akan  menghasilkan  lulusan  (Output)  yang berkualitas dan mampu memenangkan persaingan global.
Kata kunci: Desain, Aplikasi, UI/UX, Prototype, Teknologi

## Abstract
Catur  Insan  Cendekia  University  as  an  institution  that  is  engaged  in  education  has  utilized information technology, especially those related to the learning and teaching process. My CIC is a web- based student academic information system application with the aim of providing academic information to students. My CIC , which is located at https://my.cic.ac.id/. The number of visitors to the My Cic website only  increases  at  certain  times,  this  is  because  the  information  contained  in  My CIC is  incomplete.  In addition,  there  are  several  problems,  including  the  appearance  of  the  design  of  My CIC which  is  less attractive and there are several pages & buttons that are not understood by students who access the My Cic website. In designing the UI / UX design for the My CIC application prototype, the writer provides a solution for designing the design of a my CIC application with an attractive, minimalist and modern user interface and user experience. In this design, the editing software used is Figma, and it contains student academic  information  such  as  student  profiles,  value  data,  KRS,  class  schedules,  online  exams,  class discussions,  exam  cards,  repetition  history  and  student  financial  administration  transactions.  With  this design,  it  is  hoped  that  Catur  Insan  Cendekia  University  will  continue  to  strive  for  the  application  of technology in the field of education and to improve performance, service quality, competitiveness in the quality of human resources which will ultimately produce quality graduates (Output) and be able to win global competition.
Keywords : Design, Application, UI / UX, Prototype, Technology

## 1. PENDAHULUAN

## 1.1 Latar Belakang
Di era modernisasi seperti sekarang, manusia sangat bergantung pada teknologi. Hal ini membuat teknologi menjadi kebutuhan dasar setiap orang. Dari orang tua hingga anak muda, para ahli hingga orang awam  pun  menggunakan  teknologi  dalam  berbagai  aspek  kehidupannya.  Teknologi  di  masa  kini  telah berkembang  dengan  pesat.  Tak  seperti  waktu  dulu,  Teknologi  sangatlah  berpengaruh  dalam  aspek kehidupan  manusia  dan  ikut  berperan  dalam  kehidupan  masyarakat  luas  khususnya  peran  teknologi  di bidang  pendidikan.  Dalam  pendidikan  sendiri  teknologi  kini  memiliki  peranan  tersendiri  dalam  proses belajar mengajar. (Tuti Setiawati : 2018)
Universitas Catur Insan Cendekia (CIC) Cirebon adalah salah satu perguruan tinggi swasta di kota Cirebon  yang  telah  menerapkan  sistem  teknologi  informasi.  Universitas  catur  insan  cendekia  cirebon berdiri  pada  tahun  1984.  Salah  satu  layanan  teknologi  informasi  yang  ada  di  Universitas  Catur  Insan Cendekia Adalah sistem informasi akademik mahasiswa yaitu (MY CIC).
MY  CIC  adalah  aplikasi  sistem  informasi  akademik  mahasiswa  berbasis  web  dengan  tujuan memberikan  informasi  seputar akademik  kepada mahasiswa.  Dengan adanya  MY  CIC  mahasiswa  dapat mengetahui  informasi  yang  berkaitan  dengan  akademik  kampus  seperti  biodata  mahasiswa,  kuliah semester, daftar nilai dan transkrip nilai mahasiswa.
Melihat  MY CIC  ini masih  berbasis  web  dan  belum  berbasis  mobile  device  atau  aplikasi.  Dan menurut beberapa mahasiswa tampilan user interface dari website MY CIC ini kurang efektif dan efisien karena  ada  beberapa  tombol/menu  kurang  di  pahami  oleh  mahasiswa.  Sejalan  dengan  itu  fitur-fitur informasi  yang  berkaitan  dengan  akademik  mahasiswa  juga  masih  belum  cukup  lengkap  seperti  terkait dengan administrasi kampus antara lain administrasi keuangan, kartu rencana studi (KRS), jadwal kuliah, konsultasi mahasiswa, kartu ujian, kuliah semester dan riwayat mengulang masih belum ada dalam website tersebut.  Website  My  CIC  ini  hanya  berisi  yang  berkaitan  dengan  daftar  nilai,  transkrip,  dan  biodata mahasiswa saja.
Berdasarkan hasil wawancara dari beberapa mahasiswa Catur Insan Cendekia mengatakan bahwa tampilan dari website my cic ini kurang menarik dan membosankan. Oleh karena itu dalam Tugas Akhir ini penulis tertarik merancang desain User Interface dan User Experience sistem informasi akademik (My CIC)  dengan  menggunakan  aplikasi  Figma.  Dengan  penelitian  ini,  diharapkan  aplikasi  My  CIC  dapat menjadi  akses  utama  semua  informasi  yang  berkaitan  dengan  akademik  mahasiswa  dan  memperbaiki tampilan My CIC menjadi lebih menarik dan modern dari segi Design User Interface dan User Experience yang sesuai dengan kebutuhan dan nyaman digunakan mahasiswa Catur Insan Cendekia Cirebon.

## 1.2. Identifikasi Masalah
Berdasarkan uraian latar belakang masalah di atas maka identifikasi masalah pada penelitian ini adalah :
1.  Bagaimana  cara merancang  desain aplikasi  sistem informasi  yang  dibutuhkan  mahasiswa  Universitas Catur Insan Cendekia?
2. Bagaimana cara merancang desain aplikasi MY CIC dengan tampilan User interface yang menarik dan modern dengan berbasis mobile device?

## 1.3. Batasan Masalah
Berdasarkan identifikasi masalah di atas, maka penulis membatasi masalah yang ada yaitu :
1. Perancangan desain UI/UX aplikasi my cic menggunakan figma.
2. Proses yang digunakan dalam merancang UI/UX aplikasi my cic ini menggunakan metode Prototyping.
3. Target audiens dalam perancangan ini ditunjukan pada mahasiswa Universitas Catur Insan Cendekia

## 1.4. Tujuan
Adapun tujuan penelitian ini adalah:
1.  Memudahkan  mahasiswa  yang  membutuhkan  informasi  terkait  perkuliahan  di  kampus  dalam  satu aplikasi yaitu My CIC.
2.  Memudahkan  mahasiswa  lebih  nyaman  dalam  menggunakan  aplikasi  My  CIC  dengan  tampilan  user interface yang simple, menarik dan modern.
3. Menghasilkan prototype mobile apps My CIC yang dapat di kembangkan lebih lanjut dan bisa digunakan mahasiswa Catur Insan Cendekia.
Perancangan UI/UX Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma –( M. Agus Muhyidin, Muhammad Afif Sulhan, Agus Sevtiana)

## 2.  KAJIAN PUSTAKA 2.1 Pengertian Perancangan
Definisi  Perancangan  menurut  Jogiyanto  dalam  bukunya  “Analisis  dan  Desain”  menjelaskan bahwa  perancangan  adalah  tahap  setelah  analisis  dari  siklus  pengembangan  sistem  yang  dapat  berupa penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam  satu  kesatuan  yang  utuh  dan  berfungsi,  termasuk  menyangkut  mengkonfigurasi  dari  komponen- komponen perangkat lunak dan perangkat keras dari suatu system. (2005:196).

## 2.2 UI/UX
UI dan UX adalah singakatan dari User Interface dan User experience yakni merupakan sebuah tampilan  visual  dalam  sebuah  aplikasi  atau  alat  pemasaran  digital  dalam  bentuk  website  yang  dapat meningkatkan brand yang dimiliki oleh bisnis atau perusahaan. 2.2.1 User Interface (UI)
UI atau User Interface adalah ilmu tentang tata letak grafis suatu web atau aplikasi. Cakupan UI adalah  tombol  yang  akan  diklik  oleh  pengguna,  teks,  gambar,  text  entry  fields,  dan  semua  item  yang berinteraksi dengan pengguna. Termasuk layout, animasi, transisi, dan semua interaksi kecil. UI mendesain semua elemen visual, bagaimana pengguna berinteraksi dengan halaman web dan apa yang ditampilkan di halaman web. Elemen visual yang ditangani oleh seorang desainer UI adalah skema warna, menentukan bentuk tombol, serta menentukan jenis font yang digunakan untuk teks. Desainer UI harus bisa membuat tampilan bagus yang akan meningkatkan kesetiaan pengguna. 2.2.2 User Experience (UX)
Definisi UX atau user experience menurut Borrys Hasian ada bermacam-macam. Berdasarkan apa yang dikerjakan, desainer UX adalah orang yang membuat produk yang bermanfaat dan memvisualisasi user flow menjadi desain produk yang teruji dan indah. Desainer UX akan bekerja sama dengan tim-tim lain untuk mencari titik temu antara kebutuhan pengguna, tujuan bisnis dan kemajuan teknologi. Titik temu tersebut  kemudian  dijadikan  sebuah  produk  yang  bermakna,  berguna,  dan  menyenangkan.  Seperti namanya, desain yang dibuat oleh desainer UX akan menentukan mudah atau sulitnya user experience atau interaksi dengan web. Membuat wireframe atau mendesain mockup adalah salah satu kemampuan dasar yang harus dimiliki oleh seorang desainer UX.

## 2.3 Elemen Dalam Desain
Menurut Aryo Sunaryo (2002 : 5), mengatakan bahwa dalam menciptakan bentuk, berupa memilih unsur-unsur rupa, memadukan dan menyusunnya agar di peroleh bentuk yang menarik, memuaskan atau membangkitkan  pengalaman  visual  tertentu.  Tujuan  mengorganisasikan  unsur-unsur  rupa  adalah  untuk mewujudkan nilai estetis. Unsur-unsur rupa tersebut antara lain :

## 2.3.1 Titik / Point
Titik adalah salah satu unsur visual yang wujudnya relatif kecil, dimana dimensi memanjang dan melebarnya di anggap tidak berarti. Titik cenderung di tampilkan dalam bentuk kelompok, dengan variasi jumlah, susanan, dan kepadatan tertentu.

## 2.3.2 Garis / Line
Garis dianggap sebagai unsur visual yang banyak berpengaruh terhadap pembentukan suatu objek sehingga  garis,  selain di  kenal  sebagai  goresan atau  coretan,  juga menjadi  batas  limit  suatu  bidang  atau warna. Garis dapat di tampilkan dalam bentuk lurus, lengkung, gelombang, zigzag dan lainnya.

## 2.3.3 Bidang / Field
Bidang  merupakan  unsur  visual  yang  berdimensi  panjang  dan  lebar.  Di  tinjau  dari  bentuknya, bidang bisa di kelompokkan menjadi dua, yaitu bidang geometri/beraturan dan bidang non geometri/tidak beraturan. Bidang geometri adalah bidang yang relatif mudah di ukur keluasannya, sedangkan bidang non geometri merupakan bidang yang relatif sukar di ukur keluasannya.

## 2.3.4 Ruang / Space
Ruang dapat di hadirkan dengan adanya bidang. Pembagian bidang atau jarak antar objek berunsur titik, garis, bidang dan warna. Ruang lebih mengarah pada perwujudan tiga dimensi sehingga ruang dapat
dibagi dua, yaitu ruang nyata dan semu. Keberadaan ruang sebagai salah satu unsur visual sebenarnya tidak dapat di raba tetapi dapat di mengerti.

## 2.3.5 Ukuran / Size
Ukuran  adalah  unsur  lain  dalam  desain  grafis  yang  mendefinisikan  besar kecilnya  suatu  objek. Unsur  ini  digunakan  untuk  memperlihatkan  objek  manakah  yang  kita  mau  tonjolkan  karena  dengan menggunakan unsur ini seorang desainer grafis akan dapat menciptakan kontras dan penekanan (emphasis) pada  objek  desain  sehingga  orang  akan  tahu  skala  prioritas  objek  yang  akan  dilihat  terlebih  dahulu dibandingkan yang lainnya, misalnya saja untuk ukuran suatu judul akan lebih besar dari skala objek yang lainnya.

## 2.3.6 Warna / Color
Warna  sebagai  unsur  visual  yang  berkaitan  dengan  bahan  yang  mendukung  keberadaannya ditentukan  oleh  jenis  pigmennya.  Kesan  yang  di  terima  oleh  mata  lebih  ditentukan  oleh  cahaya. Permasalahn mendasar dari warna di antaranya adalah Hue (spektrum warna), Saturation (nilai kepekatan) dan Lightness (nilai cahaya dari gelap ke terang). Ketiga unsur tersebut memiliki niai 0 hingga 100, hal yang paling menentukan adalah lightness.

## 2.3.7 Tekstur / Texture
Tekstur adalah nilai raba dari suatu permukaan. Secara fisik tekstur di bagi menjadi tekstur kasar dan halus, dengan kesan pantul mengkilat dan kusam. Di tinjau dari efek tampilannya, tekstur di golongkan menjadi  tekstur  nyata  dan  tekstur  semu.  Disebut  tekstur  nyata  bila  ada  kesamaan  antara  hasil  raba  dan pengelihatan. Sementara itu pada tekstur semu terdapat perbedaan antar hasil pengelihatan dan peraba.

## 2.3.8 Huruf / Typography
Dalam  dunia  desain  grafis,  tipografi  di  definisikan  sebagai  suatu  proses  seni  untuk  menyusun bahan publikasi menggunakan huruf cetak. Oleh karena itu, menyusun meliputi merancang bentuk huruf cetak hingga  merangkainya  dalam  sebuah  komposisi  yang  tepat  untuk  memperoleh  suatu  efek  tampilan yang dikehendaki.

## 2.4 Metode Prototype
Prototype adalah model kerja dasar dari pengembangan sebuah program (software) atau perangkat lunak. Prototype dalam Bahasa Inggris “prototype” disebut juga dengan purwarupa. Prototype  biasanya dibuat  sebagai  model  untuk  tujuan  demonstrasi  atau  sebagai  bagian  dari  proses  pengembangan  atau pembuatan sebuah software. Kata Prototype berasal dari Bahasa Latin, yaitu kata “proto” yang berarti asli, dan “typus” yang berarti bentuk atau model. Dalam konteks non-teknis, Prototype adalah contoh khusus sebagai wakil dari kategori tertentu.
Dalam bidang desain, Prototype atau purwarupa atau disebut juga dengan arketipe adalah bentuk awal  sebagai  contoh  atau  standar  ukuran  dari  sebuah  entitas.  Sebuah  Prototype  dibuat  sebelum dikembangkan atau justru dibuat khusus untuk pengembangan sebelum dibuat dalam skala sebenarnya atau sebelum diproduksi secara massal. Prototype adalah sebuah Javascript Framework yang dibuat untuk lebih memudahkan proses dalam membangun aplikasi berbasis web.
Metode  protyping  sebagai  suatu  paradigma  baru  dalam  pengembangan  sistem  informasi,  tidak hanya sekedar suatu evolusi dari metode pengembangan sistem informasi yang sudah ada, tetapi sekaligus merupakan revolusi dalam pengembangan sistem informasi manajemen.

## 2.5 Software Editing

## 2.5.1. Figma
Figma adalah salah satu design tool yang biasanya digunakan untuk membuat tampilan aplikasi mobile, desktop, website dan lain-lain. Figma bisa digunakan di sistem operasi windows, linux ataupun mac dengan terhubung ke internet. Umumnya Figma banyak digunakan oleh seseorang yang bekerja dibidang UI/UX, web design dan bidang lainnya yang sejenis.
Selain  mempunyai  kelengkapan  fitur  layaknya  Adobe  XD,  Figma  memiliki  keunggulan  yaitu  untuk pekerjaan yang sama dapat dikerjakan oleh lebih dari satu orang secara bersama-sama walaupun ditempat yang berbeda. Hal tersebut bisa dikatakan kerja kelompok dan karena kemampuan aplikasi figma tersebut lah yang membuat aplikasi ini menjadi pilihan banyak UI/UX designer untuk membuat prototype website atau aplikasi dengan waktu yang cepat dan efektif.

## 3. HASIL PENELITIAN
Dalam proses ini merupakan tahap awal proses editing mulai dari membuka website editing figma di google.com dan proses menentukan dokumen yang akan di buat, import gambar, import logo, insert text, hingga peletakan tombol yang akan di gunakan dalam tampilan awal aplikasi ini.
Perancangan UI/UX Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma –( M. Agus Muhyidin, Muhammad Afif Sulhan, Agus Sevtiana)

## 3.1. Proses mendesain
Gambar 1. Tampilan Awal > Tampilan Login
Gambar 2. Tampilan Login > Menu Utama
Gambar 3. Menu Utama > Tampilan Info
Gambar 4. Tampilan Menu Utama > Profil Universitas
Gambar 5. Menu Utama > Tampilan Riwayat
Perancangan UI/UX Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma –( M. Agus Muhyidin, Muhammad Afif Sulhan, Agus Sevtiana)
Gambar 6. Tampilan Menu Utama > Tampilan Saya
Gambar 7. Tampilan Menu Utama > Tampilan Jadwal Kuliah
Gambar 8. Tampilan Menu Utama > Tampilan Data Nilai
Gambar 9. Tampilan Menu Utama > Tampilan Ujian Online
Gambar 10. Tampilan Ujian Online > Tampilan Sub Ujian Online
Perancangan UI/UX Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma –( M. Agus Muhyidin, Muhammad Afif Sulhan, Agus Sevtiana)
Gambar 11. Tampilan Menu Utama > Diskusi Kelas
Gambar 12. Tampilan Menu Utama > Tampilan Kartu Ujian
Gambar 13. Tampilan Aplikasi MY CIC
Gambar 14. Tampilan Aplikasi MY CIC
3.2.  Hasil tampilan menggunakan smartphone
Perancangan UI/UX Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma –( M. Agus Muhyidin, Muhammad Afif Sulhan, Agus Sevtiana)
Gambar 15. Prototype Aplikasi MY CIC

## 4. KESIMPULAN
Berdasarkan  hasil  observasi  dalam  mendapatkan  informasi  di  kampus  Universitas  Catur  Insan Cendekia, serta perancangan dan implementasi desain user interface dan user experience prototype aplikasi MY CIC, maka penulis dapat memberikan kesimpulan sebagai berikut : 1. Website editing Figma dapat digunakan untuk mendesain tampilan web atau aplikasi My  CIC dengan user interface yang menarik, modern dan minimalis.
2. Dalam penelitian ini penulis menghasilkan sebuah prototype aplikasi My CIC yang kompatibel dengan mobile device.
3. Dalam dunia digital yang semakin berkembang ini, membuat dan mengembangkan sebuah aplikasi bukan hal yang sulit di lakukan saat ini, karena informasi terkait teknologi semakin berkembang sangat pesat dan mudah  di  pelajari  oleh  siapapun.  Sehingga  saat  ini  banyak  bermunculan  berbagai  macam  aplikasi  yang berfokus di bidang ekonomi, sosial, pemerintahan, maupun bidang pendidikan.

## DAFTAR PUSTAKA
Sumber Buku : [1] Adi Kusrianto, 2007. “Pengantar Desain Komunikasi Visual”.
[2] Al bahra bin Ladjamudin, (2005:39). “Analisis desain dan sistem informasi”.
[3] Deddy award widya laksana, (2010:30). “Pengantar Desain Grafis”.
[4] Dendy triadi, 2010. “Memahami Teori dan Praktek Iklan Media Lini Bawah”. [5] Jogiyanto, 2005. “Analisis dan Desain”.
[5] Metode Riset Untuk Desain Komunikasi Visual, 2010.

## Sumber Jurnal :
[1]  Jurnal  Fajar  agung  rahmatullah  “perancangan  video  dokumentasi  paket  tour  wisata  sebagai mediapromosi pada bhinneka pariwisata (2019)”.
[2] Jurnal stie semarang, vol 6, no 3, edisi oktober 2014 (issn : 2252 – 7826)
[3] Jurnal Rauffauzan 24909-5 Unikom
[4] Jurnal Wisnu tri wibowo (repository.amikom.ac.id › files ›Publikasi_11.11.5274.pdf)