## JURNAL TEKNIK INFORMATIKA
Halaman Jurnal: http://jurnal.stmik-dci.ac.id/index.php/jutekin/ Halaman LPPM STMIK DCI : http://lppm.stmik-dci.ac.id/
PERANCANGAN USER INTERFACE DAN USER EXPERIENCE WEBSITE COMPANY PROFILE SARIRAYA Co,.Ltd
Akik Hidayat 1 , Bunga Azizha 2
Prodi Teknik Informatika ,Universitas Padjadjaran Bandung Email : akik@unpad.ac.id 1 , bunga18003@mail.unpad.ac.id 2

## ABSTRAK
Company  profile  yang  dikemas  dalam  bentuk  sebuah  website  kini  banyak digunakan  perusahaan-perusahaan di  seluruh  dunia.  Bagi  perusahaan-perusahaan besar, website company profile sangatlah penting guna meningkatkan kepercayaan konsumen terhadap produk atau jasa yang mereka tawarkan. Dengan tampilan yang menarik  dan  fitur  yang  lengkap,  website  company  profile  dapat  membantu perusahaan dalam hal pemasaran produk untuk menarik konsumen.

## Kata Kunci—Website, Company Profile

## I. PENDAHULUAN
A. Latar Belakang Sariraya Co,. Ltd. adalah
perusahaan  Indonesia  di  jepang  yang bergerak  di  bidang  produksi  dan distribusi  makanan  halal.  Unit-unit usaha  yang  dimiliki  perusahaan tersebut  diantara  lain  yaitu  produksi tempe, produksi bakso halal, produksi pecel,  halal  mart  store,  distribusi makanan  halal dari Indonesia bahkan Asia Tenggara ke Jepang, outlet pizza, halal fried chiken dan lain-lain.
Untuk  mengetahui  semua  hal mengenai perusahaan
tersebut,
termasuk  bagaimana  dan  seperti  apa perusahaan  terbentuk  diperlukannya sebuah sistem informasi untuk
menampilkan  itu  semua.  Hal  tersebut dapat  diatasi  dengan  dibangunnya website company profile yang berisikan  profil  perusahaan  agar orang-orang  dapat  mengenal  lebih tentang  perusahaan  tersebut  dengan mudah. Karena website dapat dengan mudah  di  akses  oleh  siapapun  dan dimanapun.

## B. Identifikasi Masalah
Berdasarkan  latar  belakang yang  telah  dijelaskan  sebelumnya, masalah  yang  akan  dicari  solusinya dalam  kegiatan  penelitian sebagai berikut:
1. Bagaimana  membuat  website company  profile  Sariraya  agar memiliki tampilan yang menarik
dan meningkatkan minat pengguna untuk berkunjung?
2. Bagaimana  menerapkan  user interface  dan  user  experience yang baru ke dalam pembuatan website company profile Sariraya ? 3. Bagaimana menguji keberhasilan perancangan ulang user interface dan user experience  website  company profile Sariraya ?

## C. Batasan Masalah
Dari identifikasi masalah
tersebut,  maka  dalam  kegiatan penelitian  ini  terdapat  beberapa batasan masalah sebagai berikut:
1. Web  aplikasi  ini  ditujukan untuk  perusahaan  Sariraya., Co,.Ltd.
2. Target  pengguna  adalah  staff dan pimpinan perusahaan Sariraya sebagai pengelola, dan seluruh masyarakat yang ingin mengetahui mengenai perusahaan  Sariraya  sebagai pengguna. 3. Web aplikasi dibangun menggunakan framework Laravel, dengan bahasa pemrograman PHP, HTML  dan CSS. Web aplikasi diakses menggunakan  browser  Chrome atau  Mozilla  dengan  perangkat desktop maupun laptop.

## D. Maksud dan Tujuan
Maksud dari kegiatan penelitian ini adalah untuk
melakukan  Perancangan  Ulang  User
Interface dan User Experience Website  Company  Profile  Sariraya
Co., Ltd.
Tujuan  yang  ingin  dicapai  oleh penulis  dari  kegiatan  penelitian  ini
adalah: 1. Dapat membuat website company  profile  Sariraya agar memiliki tampilan yang menarik  dan  meningkatkan minat pengguna untuk berkunjung. 2. Dapat menerapkan user interface  dan  user  experience yang baru ke dalam pembuatan website company profile Sariraya. 3. Dapat  menguji  keberhasilan perancangan ulang user interface  dan  user  experience website company profile Sariraya. E. Manfaat Manfaat yang diharapkan adalah: 1. Memudahkan pengguna mencari tahu tentang perusahaan Sariraya Co,. Ltd. 2. Memudahkan pimpinan perusahaan  untuk  mengelola dan  memperbarui  informasi pada website. 3. Menghasilkan  website  yang mudah digunakan oleh pengguna dan memiliki tampilan  yang  lebih  menarik dari sebelumnya.

## II. TINJAUAN PUSTAKA
A. Company Profile Company profile adalah produk penulisan praktisi yang berisi gambaran umum perusahaan. Gambaran  ini  tidak  sepenuhnya lengkap,  detail  dan  mendalam. Perusahaan  bisa  memilih  poin-poin
apa  saja  yang  ingin  disampaikan secara terbuka kepada publik (Rachmat  Kriyantono,  2008).  Dalam company  profile  memuat  gambaran sebuah  perusahaan  , seperti  sejarah, visi  misi,  keadaan  dan  tujuan  sebuah perusahaan di masa depan.

## B. HTML
Hypertext  Markup  Language (HTML) merupakan bahasa pemrograman  yang  digunakan  untuk menampilkan  sebuah  website.  HTML termasuk ke dalam bahasa pemrograman gratis, yang
pengembangannya  dilakukan  oleh banyak  orang  di  berbagai  negara. HTML  bisa  dikatakan  sebagai  sebuah bahasa yang dikembangkan bersama- sama secara global.
C. PHP PHP atau PHP Hypertext
Prepocessor  adalah  sebuah  bahasa script  berbasis  server  (server-side) yang  mampu  mem-parsing  kode  php dari  kode  web  dengan  ekstensi  .php, sehingga menghasilkan tampilan website  yang  dinamis  di  sisi  client (browser). D. Laravel Laravel adalah framework bahasa pemrograman Hypertext Preprocessor  (PHP),  yang  dibangun dengan konsep MVC (Model-
Controller-View). (Aminudin, 2015).
E. User Interface User  interface  atau  UI  adalah bagaimana  cara  sebuah  program berinteraksi  dengan  pengguna  (Ardy Setyawan,  2016).  Fungsi  dari  user interface atau UI adalah menghubungkan dan menerjemahkan
informasi  dari  sistem  ke  pengguna atau sebaliknya.
F. User Experience
User  experience  adalah  respon dan  persepsi  dari  pengguna  sebagai bentuk reaksi dari sebuah produk, jasa dan sistem (ISO 9241 – 11, 1998).

## G. Unified  Modeling  Language
(UML)
Unified  Modeling  Language (UML)  merupakab  sebuah  “bahasa” yang  telah  menjadi  standar  dalam industry untuk visualisasi, merancang
dan mendokumentasikan sistem piranti  lunak.  (Dharwiyanti  and Wahono, 2003)
UML  mendefinisikan  notasi dan  syntax/semantic.  Notasi  UML merupakan sekumpulan bentuk khusus untuk menggambarkan berbagai diagram, dan setiap
bentuknya memiliki  makna  tertentu.
UML mendefinisikan diagram- diagram  sebagai  berikut  :  use  case diagram,  class  diagram,  statechart diagram,  activity  diagram,  sequence diagram,  collaboration diagram, component diagram dan deployment
diagram. H. Use Case Diagram Use case diagram menggambarkan  fungsionalitas  yang diharapkan  dari  sebuah  sistem. Sebuah use
case diagram merepresentasikan  sebuah  interaksi antara  aktor  dengan  sistem.  Aktor adalah  sebuah  entitas  manusia  atau mesin  yang  berinteraksi  dengan sistem  untuk  melakukan  pekerjaan- pekerjaan tertentu. (Dharwiyanti and Wahono, 2003)
I. Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas  dalam  sistem  yang  sedang dirancang, bagaimana masing- masing  alir  berawal,  decision  yang mungkin  terjadi,  dan  bagaimana mereka berakhir.

## J. Entity Relationship Diagram (ERD)
Entity  Relationship  Diagram
(ERD)  merupakan  suatu  pemodelan kebutuhan  data  yang  terdiri  dari kumpulan  objek dasar  (entitas)  dan hubungan antara objek-objek tersebut dengan menggunakan perangkat konseptional dalam bentuk diagram (Lubis, 2016). III. ANALISIS DAN PERANCANGAN
A. Fase Eksplorasi 1. Kebutuhan Pengguna Website company profile Sariraya Co.,Ltd memiliki  dua pengguna,  yaitu  admin  (seseorang yang  dapat  mengelola  sistem  pada website company profile  Sariraya Co,. Ltd  seperti  mengupdate  informasi perusahaan,  promo  produk,  berita- berita  dan  dapat  mengelola  pesan masuk  yang  telah  di  inputkan  user) dan  visitor  (seseorang  yang  akan melihat  informasi-  informasi  pada website company profile Sariraya Co,. Ltd.  User  juga  dapat  memberikan pesan)
2. Kebutuhan Data Data  yang  dibutuhkan  dalam pengembangan  website  company profile Sariraya Co,.Ltd ini berdasarkan  dari  data  internal perusahaan  seperti  daftar  harga
produk,  promo-promo  dan  juga berita terkini perusahaan.
3. Kebutuhan Perangkat Lunak Perangkat lunak yang digunakan untuk  mengembangkan website
company  profile  Sariraya Co,.Ltd  ini adalah sebagai berikut:
o Sistem  Operasi  Windows  10  ke atas.
o Microsoft  Visual  Studio Code,  untuk      melakukan pengkodean.
o Laravel, untuk framework yang digunakan.
o XAMPP,  untuk  server  yang digunakan.
o Figma,  untuk  merancang  user
interface/high fidelity design. o Draw.io, untuk membuat rancangan database. o Browser (Chrome, Mozila Firefox,  Microsoft  Edge,  Opera dan lain-lain). 4. Kebutuhan Perangkat Keras Perangkat keras yang digunakan untuk menjalankan dan mengembangkan  web  company profile  Sariraya  Co,.Ltd  ini  harus memiliki spesifikasi sebagai berikut:
o Laptop/Personal Computer (PC)  dengan  sistem  operasi windows.
o Prosessor intel Core i5 keatas
o RAM 2GB keatas
o Harddisk 1TB
o Layanan hosting onamae  server
Jepang 5. Kebutuhan Sistem Berdasarkan hasil dari
wawancara  serta  diskusi  yang dilakukan  peneliti  bersama  External Relation Manager dan IT & Creative Content Creator dari Sariraya Co,.Ltd maka dihasilkan
fitur-fitur pengembangan  website  yang  akan dijelaskan pada Tabel 3.1 dan Tabel
3.2.
TABEL 3.1

## KEBUTUHAN SISTEM PENGGUNA
SEBAGAI ADMIN Pengguna : Admin Fitur Deskripsi
Landing Page Pengguna dapat melihat informasi tentang cabang usaha, promo produk, katalog dan berita-berita di perusahaan. Login Pengguna login dengan email dan password yang telah terdaftar. Mengubah Informasi Perusahaan Pengguna dapat mengubah data dan informasi perusahaan pada laman admin Membuat Post Berita Pengguna dapat membuat post berita terbaru tentang perusahaan Mengelola Pesan Pengguna dapat mengelola, melihat dan menghapus pesan yang masuk dari visitor TABEL 3.2

## KEBUTUHAN SISTEM PENGGUNA
SEBAGAI VISITOR Pengguna : Visitor Fitur Deskripsi Landing Page Pengguna dapat melihat informasi tentang cabang usaha, promo produk, katalog dan berita-berita di perusahaan. Melihat Informasi Perusahaan Pengguna dapat melihat informasi-informasi perusahaan Sariraya Melihat Berita Pengguna dapat melihat berita terkini dari perusahaan Mengirimkan Pesan Pengguna dapat mengirimkan pesan pada admin 6. User Story
Berdasarkan  pendapat  dari Bapak Rachmad Adi Riyanto sebagai Halal  Food  Quality  Assurance  &
External Relation Manager Sariraya
Co,.Ltd dihasilkan kesimpulan sebagai berikut:
o Pengguna  ingin  memperbarui desain website company profile
Sariraya  Co,.Ltd  menjadi  lebih user friendly dan modern.
o Pengguna  ingin  menambahkan fitur dan informasi agar website sekarang memuat  informasi
yang  lebih  lengkap  dibanding website sebelumnya.
B. Fase Perencanaan
Pada fase ini peneliti melakukan perencanaan  bersama  dengan  tim developer yang terdiri front-end
developer,  back- end  developer,  design, beserta staff perusahaan Sariraya Co,. Ltd.
Dalam perencanaan ini adanya pembagian  tugas  dalam  pengembangan website  ini.  Front-end  developer  yang nantinya akan berfokus pada pengembangan tampilan  antarmuka, back-end  developer  berfokus  pada pengembangan  sistem  dan  design  yang berfokus membuat serta mengumpulkan seluruh  desain  atau  asset  yang  akan digunakan  pada  web  company  profile Sariraya Co,. Ltd.
C.

## Fase Iterasi
Fase ini dimulai dengan
perancangan model sistem yang akan dibangun  pada  website  company profile  Sariraya  Co,.Ltd.  Hal  itu berkaitan  dengan  desain  database, desain  antarmuka  hingga  persiapan testing.
1. Analisis Sistem
Analisis  sitem  yang  digunakan penulis yaitu menggunakan use case diagram  dan  juga  activity  diagram untuk  merepresentasikan  cara  kerja dari website company profile
Sariraya Co,.Ltd.
Gambar 3.1 Use Case Diagram
Gambar 3.2 Activity Diagram Login Admin
Gambar 3.3 Activity Diagram Landing Page Admin
Gambar 3.4 Activity Diagram Halaman Informasi Perusahaan Admin
Gambar 3.5 Activity Diagram Halaman Berita Admin Gambar 3.6 Activity Diagram Halaman Pesan Admin Gambar 3.7 Activity Diagram Landing Page Visitor Gambar 3.8 Activity Diagram Halaman Informasi Perusahaan Visitor Gambar 3.9 Activity Diagram Halaman Berita Visitor
Gambar 3.10 Activity Diagram Halaman

## Pesan Visitor
2. Desain Basis Data
Pada  Gambar  3.5  terdapat empat pada entitas dalam ERD yaitu users,  profil,  news,  dan  contact.
Entitas  users  berfungsi  untuk menyimpan  data  admin.  Entitas profil  berfungsi  untuk  menyimpan informasi atau  profil  perusahaan. Entitas news berfungsi menyimpan data  berita.  Dan  entitas  contact berfungsi  menyimpan  data  pesan yang masuk.
Gambar 3.11 Entity Relationship Diagram
3. Desain Antarmuka Desain  UI/UX  dibawah  ini
dibuat  menggunakan  tools  figma yang  memiliki  empat  halaman utama  yang  memuat  informasi- informasi perusahaan.
Gambar 3.12 Landing         Gambar 3.13
Page Halaman About Us Gambar 3.14 Halaman Berita

## Gambar 3.15 Halaman Contact
4. Desain Antarmuka Untuk  tahap  testing  peneliti menggunakan  blackbox  testing untuk menguji fungsionalitas sistem secara keseluruhan apakah sudah berjalan sesuai yang diharapkan  atau  belum.  Tabel  3.3
Dibawah ini merupakan rancangan testing yang akan dilakukan.
TABEL 3.3
RANCANGAN BLACKBOX TESTING No Skenario Hasil yang diharapkan Hasil 1 Melihat landing page Informasi pada landing page muncul 2 Melakukan login Admin dapat melakukan login dam masuk ke halaman dashboard admin 3 Melihat halaman informasi perusahaa n Menampilkan data pada halaman informasi perusahaan 4 Melihat halaman berita Menampilkan data-data berita tentang perusahaan 5 Mengirim pesan Pesan yang diisi terkirim ke admin 6 Mengelola informasi perusahaan Admin dapat menambah, mengedit dan menghapus data informasi perusahaan 7 Mengelola berita Admin dapat menambah, mengedit dan menghapus data berita 8 Mengelola pesan Admin dapat melihat kumpulan pesan dan menghapus pesan 9 Mela kuka n logo ut Admin keluar dari halaman admin dan diarahkan ke landing page

## IV. HASIL DAN PEMBAHASAN
A. Implementasi Program 1. Landing Page Landing page merupakan
halaman  yang  pertama  kali  muncul saat  pengguna  mengakses  alamat website  company  profile  Sariaya Co,.Ltd. Fungsi dari halaman ini yaitu untuk  memberikan  informasi awal tentang perusahaan tersebut.
Gambar 4.1 Landing Page
2. Halaman Informasi Perusahaan Halaman  informasi  perusahaan merupakan halaman yang menampilkan data dan profil
perusahaan. Halaman ini disebut juga halaman  about  us  yang  berisi  profil, data  pengurus,  visi,  misi,  hingga sejarah perusahaan.
Gambar 4.2 Halaman Informasi Perusahaan
3. Halaman Berita
Halaman  berita  berisi  berita- berita  terkait  perusahaan  yang disusun  berdasarkan  berita  terbaru dari  atas  ke  bawah.  Halaman  ini dapat  diakses melalui  navigasi  bar diatas maupun  button view all news di landing page.
Gambar 4.3 Halaman Berita
4. Halaman Berita Halaman  contact  berisi  form isian  bagi  visitor  agar  dapat memberikan pesannya seperti kritik dan  saran kepada  admin  pengelola website  serta  terdapat  informasi kontak admin yang dapat dihubungi oleh visitor.  Form  isian  terdiri  dari dua  bagian  yaitu  bagi warga  negara Indonesia  dan  juga  warga  negara asing yang dapat mengisinya sesuai dengan identitas masing-masing.
Gambar 4.4 Halaman Contact
B. Fase Produksi Fase  produksi  pembuatan website  ini  dimulai  dari  bulan November  untuk  membuat  dan mencari asset dan konten terlebih dahulu  serta  membuat  rancangan antarmuka. Desember mulai diimplementasikan ke dalam koding program khususnya bagian front-end. Januari mulai pengerjaan  ke  dalam  sistem  , database yaitu bagian back-end. C. Pengujian Pengujian  website  company profile Sariraya Co,.Ltd ini menggunakan  blackbox  testing yang  dilakukan  oleh  developer bersama  dengan  staff  perusahaan. Dari  hasil  testing  tersebut  maka didapatkan hasil yang akan dijelaskan  oleh  Tabel  4.1  dibawah ini sesuai dengan rancangan testing pada bab sebelumnya.
TABEL 4.1
HASIL BLACKBOX TESTING No  Skenario Hasil yang diharapkan Hasil 1 Melihat landing page Informasi pada landing page muncul Berhasil 2 Melakuka n login Admin dapat melakukan login dam masuk ke halaman dashboard admin Berhasil 3 Melihat halaman informa si perusah aan Menampilkan data pada halaman informasi perusahaan Berhasil 4 Melihat halaman berita Menampilkan data- data berita tentang perusahaan Berhasil 5 Mengirim pesan Pesan yang diisi terkirim ke admin Berhasil 6 Mengel ola informa si perusah aan Admin dapat menambah, mengedit dan menghapus data informasi perusahaan Berhasil 7 Mengelol a berita Admin dapat menambah, mengedit dan menghapus data berita Berhasil 8 Mengelol a pesan Admin dapat melihat kumpulan pesan dan menghapus pesan Berhasil 9 Melakuka n logout Admin keluar dari halaman admin dan diarahkan ke landing page Berhasil Berdasarkan hasil blackbox testing di atas, pengembangan website
tersebut  sudah  berjalan  sesuai dengan  fungsinya.  Hal  tersebut ditandai  dengan  berhasilnya  semua
uji  coba  website  yang  dilakukan pengguna

## D. Fase Pemeliharaan dan Fase Akhir
Pada tahap ini sebagai akhir dari proses pengembangan website,
nantinya website akan digunakan oleh pihak perusahaan untuk pemeliharaan kedepannya.  Namun sebelum  itu  ada beberapa  feedback  yang  diberikan pihak  perusahaan  setelah  melakukan testing yang akan dijelaskan pada poin feedback di bawah ini.
1. Feedback Setelah dilakukan testing
bersama  dengan  staff  perusahaan, didapatkan  feedback  yaitu  pihak perusahaan  menginginkan  adanya tambahan  fitur  yaitu  menambah menu  pada  navbar  dan  menambah halaman cabang-cabang usaha yang dimiliki  perusahaan.  Seperti  menu restaurants  yang  nantinya  akan diarahkan  pada  web  masing-masing produk,  menu  factories  yang  berisi halaman  pangan  yang  di produksi perusahaan, menu halal marts yang berisi  halaman  market  yang  dimiliki perusahaan, serta menu online shop yang  akan  diarahkan  pada  website online shop perusahaan.
2. Implementasi Feedback
Implementasi dari feedback
pengembangan  website  ini  yaitu dilakukannya  pembuatan  fitur-fitur kembali  oleh  peneliti.  Feedback  tadi akan  langsung  di  terapkan  sesuai dengan permintaan pihak perusahaan karena nantinya website ini  akan  digunakan  perusahaan sebagai  website  company  profile mereka yang memiliki target pengguna hingga internasional. Maka website yang dibangun haruslah  memiliki  kelengkapan  data
yang detail dan  baik terkait
perusahaan.

## V. KESIMPULAN DAN SARAN

## A. Kesimpulan
Berdasarkan  berbagai  hal  yang telah disampaikan pada bab
sebelumnya  serta  perancangan  dan implementasi website company profile yang  sudah  dilakukan  penulis,  maka dapat  diambil  simpulan  sebagai berikut:
1. Setelah  dilakukan  perancangan ulang  user  interface  dan  user experience  menjadikan  website company  profile  Sariraya  Co,.Ltd
lebih menarik, modern dan meningkatkan  minat  pengguna untuk berkunjung .
2. Desain  user  interface  dan  user experience yang baru  dapat diimplementasikan  dengan  baik kedalam  website  company  profile Sariraya  Co,.Ltd.  Desain  website yang  baru  kini  lebih  memudahkan pengguna untuk melakukan eksplorasi  dan  aktivitas lainnya  di dalam website. 3. Setelah dilakukan pengujian menggunakan  blackbox  testing, bahwa  desain  user  interface  dan user  experience  website  company profile  Sariraya  Co,.Ltd  yang  baru dapat  dengan  mudah  dipahami oleh  pengguna.  Hal  itu  dibuktikan dengan berhasilnya seluruh skenario untuk mengetes fungsionalitas website secara keseluruhan. B. Saran
Berdasarkan  hasil  penelitian
yang  dilakukan,  penulis memberikan saran sebagai berikut:
1. Website
company
profile
Sariraya  Co,.Ltd  yang  telah dibangun  dapat  dikembangkan lebih  lanjut  seiring  dengan berkembangnya  cabang  usaha yang dimiliki perusahaan . 2. Rutin  melakukan  pembaruan data seperti informasi perusahaan  dan  berita  agar website selalu up-to- date. 3. Mempromosikan website menggunakan  platform  media sosial seperti instagram, facebook, twitter, tiktok maupun iklan guna
meningkatkan jangkauan  pengguna  website company profile Sariraya Co,.Ltd.

## DAFTAR PUSTAKA
Aminudin (2015) ‘Cara Efektif Belajar Framework Laravel’, Ilmu Teknologi  Informasi,  1(1),  p. 203. Booch,  G,  Rumbaugh.  J,  dan Jacobson.  I.  1999.  The  Unified Modeling Language User Guide. Addison-Wesley. Longman Ltd. Germany. Dharwiyanti,  S.  and  Wahono,  R.  S. (2003) ‘Pengantar Unified
Modelling  Languange  (UML)’,
IlmuKomputer.Com, pp. 1–13.
Kriyantono,  Rachmat.  (2008)  Public Relations Writing: media public relations  membangun  citra korporat.  Jakarta  :  Kencana
Prenada Media Group.
Lubis,  A.  (2016)  ‘Basis  Data  Dasar’, Deepublish, (April), p. 124. Sari, A.  O.,  Abdilah,  A.  and  Sunarti (2019) Buku Web Programming