BULLET : Jurnal Multidisiplin Ilmu

Volume 99, No. 99, Bulan 2019

ISSN 9999-9999 (media online)
Hal 999-999

Perancangan Desain User Interface/User Experience Web Layanan

Informasi Kamus Dengan Metode Lean User Experience (Lean UX)
Pada Universitas Pamulang
Eryana Wahyu Sulistyo1, Sofa Sofiana2
Teknik, Teknik Informatika, Universitas Pamulang, Pamulang, Indonesia
Email: 1wahyusulistyo.007@gmail.com, 2dosen00407@unpam.ac.id

Abstrak
Dengan berkembangnya aplikasi, baik melalui web maupun mobile, aplikasi tidak lepas dari
interaksi manusia-komputer. Kemudahan dalam menggunakan aplikasi menjadi incaran
para pengembang untuk menarik minat pengguna. Hal ini tidak lepas dari user interface
dan user experience. Di bidang pendidikan, penyampaian informasi juga menggunakan
teknologi yang sama dengan teknologi populer. Ini juga memicu masalah yang sama seperti
aplikasi pada umumnya. kesulitan dalam memahami dan mengoperasikan aplikasi
merupakan masalah utama yang dialami pengguna dalam menggunakan aplikasi.
Menggunakan metode lean user experience (lean ux) dengan proses loop empat tahap,
mendeklarasikan asumsi, membuat MVP, menjalankan eksperimen, umpan balik, dan
penelitian. Pengembangan menggunakan metode ini mengutamakan pendapat pengguna agar
aplikasi dapat dikembangkan sesuai dengan apa yang diinginkan pengguna. Dalam
penelitian ini, pengujian eksperimental melibatkan beberapa pengguna aplikasi. Dengan
sekitar 30 pengguna yang terlibat dalam penelitian, pengguna akan melakukan tes kecil
yang hasilnya akan diakumulasikan. Dari penelitian ini, pengaruh pengguna terhadap
pengembangan aplikasi menjadi salah satu faktor apakah aplikasi tersebut layak
digunakan atau perlu diperbaiki. Dengan melakukan percobaan dan perancangan secara
berkesinambungan maka akan menghasilkan aplikasi yang diharapkan
Kata Kunci: Lean UX, Lean User Experience, User Interface User experience, Design, Sistem Manajemen
Abstract
With the development of applications, either via the web or mobile, applications cannot
be separated from human-computer interactions.  The ease of using the application is
the target of developers to attract users.  It can not be separated from the user
interface and user experience.  In the area of education, the delivery of information also
uses the same technology as popular technology.  It also triggers the same problems as
applications in general.  the difficulty in understanding and operating the application is
the main problem experienced by users in using the application.  Using the lean user
experience (lean ux) method with a four-stage loop process, declare assumptions, create
an MVP, run experiments, feedback and research.  Development using this method
prioritizes user opinions so that applications can be developed in accordance with what
users want.  In this research, experimental testing involving several application
users.  With about 30 users involved in research, users will do a little test whose results
will be accumulated.  From this research, the influence of users on application
development becomes one of the factors whether the application is suitable for use or
needs to be repaired.  By experimenting and designing on an ongoing basis it will produce
the expected application
Keywords: Lean UX, Lean User Experience, User Interface, User Experience, Design, Management system

PENDAHULUAN
Universitas Pamulang (UNPAM) merupakan salah satu perguruan tinggi swasta yang bertempat di
Tangerang Selatan yang telah menerapkan teknoligo informasi. Salah satu teknologi informasi yang ada pada
Universitas Pamulang adalah MyUnpam. MyUnpam adalah sebuah sistem aplikasi informasi akademik berbasis
web yang memberikan informasi seputar akademik kepada mahasiswa UNPAM. MyUnpam memiliki 5 fitur
utama yaitu Beranda, Data Pribadi, Akademik, keuangan, dan Dokumen. Dengan adanya My Unpam mahasiswa
dapat mengetahui segala informasi yang berkaitan dengan akademik kampus seperti informasi KRS (Kartu
Rencana Studi), jadwal kuliah, rangkuman nilai, kartu hasil studi, keuangan, dan informasi biodata mahasiswa
yang dapat diakses secara online. Website aplikasi My Unpam dapat diakses baik melalui desktop atau mobile.
Berdasarkan analisa traffic dari SimilarWeb (https://www.similarweb.com/), website https://my.unpam.ac.id/
memiliki jumlah pengunjung yang rata – rata menggunakan mobile web untuk mengakses My Unpam, lebih
tepatnya sebanyak 72.85% pengunjung My Unpam menggunakan mobile, sedangkan 27.15% lainnya
menggunakan desktop.
Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 1
BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
Setiap aplikasi tidak lepas dari yang namanya user interface dan user experience. Menurut (Mishra,
2019) User Interface (UI) adalah cara aplikasi berinteraksi dengan user. User interface mengandung beberapa
elemen dari sebuah aplikasi seperti control, tombol, blocks, dan semua elemen yang ada pada aplikasi. Tujuan
dari user interface ini adalah menyediakan interaksi yang mudah , menyenangkan, dan efektif antara user dengan
aplikasi. User Experience (UX) memberikan pengalaman bagi user dalam kemudahan penggunaan aplikasi.
Pembuatan UX masuk kedalam mendefinisikan cara sebuah produk beroperasi dan memenuhi persyaratan
pengguna, dimana UX harus jelas, nyaman, user-friendly. Pada aplikasi MyUnpam tidak lepas dari masalah user
interface/user experience yang dialami oleh aplikasi pada umumnya. Berdasarkan hasil kuisioner yang dilakukan
kepada alpikasi web MyUnpam yang sudah ada 15 dari 30 orang mengalami kesulitan dalam menggunakan
aplikasi seperti, aplikasi dinilai masih belum user—friendly, beberapa pengguna kesulitan dalam menemkan
dokumen-dokumen untuk keperluan kampus dan adapun yang mengungkapkan bahwa memiliki kesulitan dalam
men download file –file yang tersedia. Dengan kesulitan yang ada membuat experience user dalam penggunaan
aplikasi terngaggu.
Untuk mengatasi beberapa masalah tersebut peneliti meyakini bahwa metode yang tepat adalah metode
Lean UX. Menurut perkumpulan desain (Design foundation, 2021) Lean UX adalah teknik yang berguna dalam
pengerjaan sebuah projek design, dimana tekadang teknik UX tradisional tidak berguna saat pengembangan
dilakukan dalam waktu yang cepat. Teknik ini berfokus pada experience dari pada design atau hasil, dan tujuan
utamanya berfokus pada feedback user sedini mungkin agar mendapat keputusan yang tepat.
Berdasarkan Berdasarkan latar belakang yang telah dipaparkan sebelumnya, hal ini memerlukan sebuah
perancangan desain user interface / user experience pada My Unpam berbasis web mobile dengan menggunakan
metode lean UX. Hal itu mendorong penulis untuk membuat skripsi dengan judul “PERANCANGAN DESAIN
USER INTERFACE / USER EXPERIENCE WEB LAYANAN INFORMASI KAMPUS DENGAN
METODE LEAN USER EXPERIENCE (LEAN UX) PADA UNIVERSITAS PAMULANG”.

LANDASAN TEORI
2. 1.Sistem Informasi Akademik
Menurut Amarusu (2013), sistem informasi akademik adalah sistem secara khusus dirancang untuk
memenuhi kebutuhan perguruan tinggi yang menginginkan layanan pendidikan yang terkomputerisasi untuk
meningkatkan kinerja, kualitas pelayanan, daya saing dan kualitas SDM yang dihasilkannya. Secara singkat
sistem informasi akademik dapat diartikan aplikasi untuk membantu memudahkan pengelolaan data dan
informasi yang berkaitan dengan instansi pendidikan.
2. 2.Website
Menurut Gregorius (2000:30), Website merupakan kumpulan dari halaman web yang saling terhubung dan
setiap file saling terikat. Web terdiri dari page atau halaman, dan kumpulan halaman yang dinamakan homepage.
Homepage berada pada posisi teratas, dengan halaman-halaman terkait berada di bawahnya.
2. 3.Perancangan
Perancangan adalah usulan pokok yang mengubah sesuatu yang sudah ada menjadi sesuatu yang lebih
baik, melalui tiga proses: mengidentifikasi masalah-masalah, mengidentifikasi metoda untuk pemecahan
masalah, dan pelaksanaan pemecahan masalah. Dengan kata lain adalah pemograman, penyusunan rancangan,
dan pelaksanaan rancangan (John Wade, 1997).
2. 4.User Interface
User Interface (UI) titik di mana pengguna (manusia) berinteraksi dengan komputer, situs web, atau
aplikasi. Tujuan dari User Interface yang efektif adalah untuk membuat pengalaman pengguna menjadi mudah
dan intuitif, membutuhkan upaya minimal dari pihak pengguna untuk menerima hasil maksimal yang
diinginkan. Dapat dikatakan bahwa user interface adalah bentuk komunikasi antasa user dengan sebuah sistem.
(Team 2021)
2. 5.User Experience
“UX” adalah singkatan dari “user experience”. Pengalaman pengguna aplikasi ditentukan oleh cara mereka
berinteraksi dengannya (They Make Design, 2019). Pengalaman pengguna ditentukan oleh seberapa mudah
atau sulitnya berinteraksi dengan elemen antarmuka pengguna yang telah dibuat oleh perancang UI. Jadi,
designer UX juga memperhatikan user interface pada sebuah aplikasi.

2. 6.Lean User Experience

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 2

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
Lean User Experience (Lean UX) adalah sistem manajemen desain yang dibangun untuk membantu
menciptakan produk yang dirancang dengan baik melalui kolaborasi antar tim, iterasi yang konstan, dan kontak
yang sering dengan usernya. Seperti halnya sistem desain yang lain, Lean UX mengandung banyak bagian
yang bergerak. Tetapi saat tim melakukannya, maka itu akan memunculkan ide bahwa ini adalah cara yang
intuitif dan bermanfaat untuk mendapatkan wawasan cepat tentang apa yang diinginkan pengguna. (Gothelf,
2013)
2. 7.Usability Testing
Metode riset yang mempartisipasikan pengguna untuk menggunakan prosuk biasanya disebut usability test.
Usability testing ini umumnya dilakukan oleh para UI/UX developer dengan melibatkan pengguna tertentu
untuk diteliti bagaimana proses mereka selama berinteraksi dengan aplikasi, website, ataupun sistem. Usability
testing memiliki tujuan untuk mengidentifikasi masalah yang terjadi saat menggunakan aplikasi,
mengumpulkan data kualitatif dan kuantitatif, mengukur kemudahan dan efisiensi, dan menentukan kepuasan
penggunaan produk. (Alroobaea & Mayhew, 2014)
2. 8.Typography
Desain tipografi adalah seni untuk mengatur pesan dalam komposisi yang dapat dibaca dan estetis. Ini
adalah elemen integral dari desain (Stan 2020). Dalam UX desain tipografi memiliki peran penting
diakrenakan dalam perancangannya diharuskan melewati serangkaian keputusan seperti memilih huruf yang
tepat, memilik ukuran titik, menyesuaikan kerning dan spasi baris, yang akan menghasilkan tata letak yang
masuk akal.
2. 9.Figma
Figma adalah tool editor grafik vector dan alat prototyping yang terutama berbasis web dengan fitur offline
tambahan yang diaktifkan oleh aplikasi desktop untuk macOS dan Windows (Gonzalez 2017). Figma
merupakan salah satu alat desain yang popular untuk desainer user interface (UI) dan user experience (UX).
2. 10. Prototyping
Prototyping merupakan sebuah aktifitas paling kritis dalam pengembangan sebuah produk, meskipun begitu
prototyping secara bersamaan merupakan salah satu area paling penting dalam desain dan paling tidak
tereksplorasi secara formal. (Lauff et al., 2018).

METODE
Lokasi dari penelitian ini bertempat di Universitas Pamulang (UNPAM) Serpong, Tangerang Selatan,
Banten. Objek yang dijadikan sebagai bahan penelitian adalah MyUnpam layanan informasi kampus berbasis
web yang digunakan oleh mahasiswa Universitas Pamulang. Dalam proses pengembangan ini dilakukan
beberapa proses yaitu, proses pengumpulan data, proses prancangan aplikasi, dan proses pengujian
3. 1. Metode Pengumpulan data
Beberapa tahapan dalam pengumpulan data yang digunakan dalam perancangan web aplikasi adalah
sebagai berikut:
a. Studi Literatur
Studi literatur dilakukan peneliti menemukan referensi guna sebagai landasan teori yang terkait
dengan masalah yang sedang diteliti. Referensi didapat dengan mencari buku-buku, jurnal, website serta
artikel resmi yang berhubungan dengan user interface, user experience, lean ux. Berikut merupakan
beberapa literature yang ditemukan yang berhubungan dengan UI/UX:
 Lean UX: Applying Principles to Improve User Experience.
 Pengembangan User Experience (UX) Dan User Interface (UI) Aplikasi Ibeauty Berbasis
Android.
 Perancangan User Interface dan User Ecperience pada Placeplus menggunakan pendekatan User
Centered Design.
 Perancangan Ulang User Interface (UI) dan User Experience (UX) Menggunakan Metode Lean
UX Pada Aplikasi Sister For Students (SFS) Universitas Jember.
 Perancangan User Interface (UI) & User Experience (UX) Aplikasi Pencari Indekost di Kota
PadangPanjang.
b. Observasi
Pada tahap ini peneliti melakukan metode observasi, yaitu dengan mengamati langsung web aplikasi
MyUnpam dengan menggunakan langsung aplikasi agar mengetahui proses yang berjalan dalam aplikasi
tersebut. Selain itu peneliti melakukan uji coba terhadap fitur yang ada untukm mengetahui dimana letak
kekurangan yang ada pada web aplikasi MyUnpam.
Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 3
BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999

c. Persona
Dalam tahap ini persona atau biasa disebut ptoro-persona digunakan sebagai versi singkat dari
laporan pengguna. Peneliti dapat berfokus kepada siapa yang lebih banyak menggunakan web aplikasi
MyUnpam, serta persona dapat membantu peneliti dalam perancangan aplikasi dengan mengetahui
informasi dasar dari pengguna baik dari latar belakang, perilaku, dan tujuan. (Gothelf, 2013)
d. Kuisioner
Tahap ini peneliti membuat kuisioner secara remote menggunakan google form yang di berikan secara
random kepada mahasiswa Universitas Pamulang. Kuisioner yang dipakai adalah UEQ (User experience
Questionnaire) . UEQ memiliki 26 item yang berbeda. Dalam 26 item tersebut mencangkup 6 hal penting
yang dibutuhkan aplikasi, seperti attractiveness (daya tarik), perspiculity (kenyataan yang jelas), efficiency
(efisiensi), dependability (keteguhan), stimulation (stimulasi), novelity (kebaruan). (Schrepp, 2019)

3. 2. Metode Pengembangan
Penelitian ini menggunakan metode Lean UX. Metode ini merupakan salah satu cara pengembangan sebuah
aplikasi yang berfokus pada tanggapan pengguna. Lean ux memiliki rotasi prosesnya sendiri dan memiliki 4
tahapan proses yang bertujuan untuk menciptakan desain aplikasi yang dapat memenuhi pengalaman pengguna
karena prosesnya yang efektif dan cepat. 4 proses pengembangan yang ada pada metode lean ux diantaranya
(Gothelf, 2013).

Gambar 2. 1 Siklus Proses Lean UX

a. Declare Assumption
Tahap ini dilakukan untuk mengidentifikasi masalah yang ada pada web aplikasi MyUnpam.
Pada tahap ini juga dimana data – data yang dikumpulkan akan mejadi acuan dalam menentukan fitur
apa saja yang akan diperbaiki pada web aplikasi. Pada tahap ini dilakukan observasi, study literature,
persona user, daftar asumsi, penentuan outcomes, dan daftar perbaikan dan tambahan fitur.
b. Create an MVP
Tahap ini merupakan dimana interactive prototype web aplikasi MyUnpam akan dibuat. Pada
pembuatan nteractive prototype, dilakukan pembuatan secara mendetail sehingga mirip dengan
produk akhir, yang ditunjang dengan warna, animasi, gambar, icon, fungsi tombol, seperti aplikasi
yang sudah jadi. Sebelum pembuatan interactive prototype, dibuat terlebih dahulu flow web app
aplikasi dan pembuatan wireframe. Flow web app berisi struktur dan alur dari aplikasi dengan guna
mempermudah pembentukan struktur flow pada prototype. Sedangkan pada pembuatan wireframe
didasari dari outcomes yang didapat pada tahap sebelumnya. Wireframe ini berupa konsep interface
layout yang berisi elemen – elemen fitur dan akan diterapkan dalam pembuatan interactive prototype.
c. Run an Experiment
Sebelum mencapai pembuatan interactive prototype, dilakukan penggambaran site map aplikasi
dan pembuatan wireframe. Flow web app berisi struktur dan alur dari aplikasi dengan guna
mempermudah pembentukan struktur flow pada prototype. Sedangkan pada pembuatan wireframe
didasari dari outcomes yang didapat pada tahap sebelumnya. Wireframe ini berupa konsep interface
layout yang berisi elemen – elemen fitur dan akan diterapkan dalam pembuatan interactive prototype
d. Feedback and Research
Tahap ini dilakukan usability testing terhadap prototype MVP yang telah dibuat kepada
responden Universitas Pamulang yang akan dipilih secara random sebanyak 20 orang berdasatkan
tabel yang dikemukakan oleh (Alroobaea & Mayhew, 2014). pada usability testing ini dilakukan 2
metode test yaitu Single Ease Question (SEQ) dan User Experience Questionnaire (UEQ).
 SEQ
Single east question merupakan metode usability testing yang tidak memakan banyak waktu,
tenaga, atau kerumitan ke penguji (atau peneliti). SEQ menggunakan sistem respons Likert Scale-
style (De Bleecker & Okoroji, 2018). SEQ hanya memberikan satu pertanyaan: “Seberapa sulit
atau mudahkah Anda menemukan tugas itu ?”. Penilaian tingkat keberhasilan pada SEQ yaitu
dengan skor nilai 5 (cukup mudah), 6 (mudah) hingga 7 (sangat mudah).
Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 4
BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
 UEQ
User experience Questionnaire merupakan pendekatan analitik data yang digunakan untuk
memastikan relevansi praktis dari skala yang dibangun, setiap skala menggambarkan aspek
kualitas yang berbeda dari produk interaktif. UEQ merupakan teknik kuisioner dengan setiap item
berbentuk semantic differential, yaitu setiap item diwakili oleh dua istilah yang berlawanan
makna dengan setiap item memiliki 7 skala dengan separuh poin positif dan separuhnya poin
negatif. UEQ memiliki 6 skala dengan 26 item. (Schrepp, 2019).

HASIL DAN PEMBAHASAN

4. 1. Pendeklarasian Asumsi
a. Studi literatur
Berdasarkan studi pada literature yang peneliti dapatkan dapat diambil kesimpulan bahwa aplikasi
yang baik adalah aplikasi yang user-friendly yang artinya aplikasi harus bisa bekerja dengan mudah agar
pengguna tidak mengalami kesulitan, hal ini dipengaruhi oleh user interface dan user experience nya.
Tampilan antar muka yang mudah dilihat dan dipahami memberikan feedback pengalaman pengguna
yang baik pula.
b. Observasi
Pada observasi dilakukan identifikasi tentang kekurangan user interface dan user experience pada
web aplikasi MyUnpam yang ada saat ini. Dengan adanya identifikasi ini, peneliti dapat mengetahui
bagaimana proses dan fungsi apa saja yang berjalan pada web aplikasi serta mengetahui kekurangan
aplikasi pada segi interface dan experience, sehingga dapat dilakukannya perbaikan atau penambahan
fitur yang akan dilakukan pada proses perancangan prototype selanjutnya.
c. Kuisioner
Pada tahap ini peneliti menggunakan kuisioner UEQ sebagai pengumpulan data, kuisioner ini juga
dapat digunakan dalam pengujian MVP nanti. Kuisioner dilakukan secara remote yang artinya dibuat
menggunakan Google Form dan dibagikan kepada pengguna untuk mencari permasalahan pada UI/UX.
Berikut merupakan hasil UEQ pertama dalam menilai aplikasi MyUnpam yang telah ada:
UEQ Scales (Mean and Variance)
Daya tarik 0.775 1.07
Kejelasan 0.779 1.03
Efisiensi 0.779 1.40
Ketepatan 0.529 1.35
Stimulasi 0.515 1.36
Kebaruan 0.015 1.63
Tabel 3. 1 Hasil Skala UEQ

Dari hasil skala yang didapat dapat dikatakan bahwa dalam 6 skala item penilaian UI/UX sebuah
aplikasi, ke enam item tersebut masih di bawah rata – rata dengan nilai mean > 0.8 agar mendapatkan
penilaian yang baik. Hasil terbawah ada pada skala ketepatan dengan mean 0.529, simulasi dengan mean
0.515, dan kebaruan dengan mean 0.015 pada aplikasi.

d. Persona User
Berdasarkan hasil wawancara kepada mahasiswa Universitas Pamulang dalam hal ini terdapat
informasi yang dibutuhkan dalam penelitian yang disebut persona

Gambar 3. 2 User Persona 1

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 5

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999

e. Penentuan Asumsi dan Outcomes

No. Asumsi Outcomes
1 Sebagaian pengguna web aplikasi Menghasilkan prototype web aplikasi
MyUnpam menggunakan mobile sebagai MyUnpam dengan fokus kepada mobile.
alat untuk mengaksesnya
2 Pada tampilan beranda MyUnpam masih Memudahkan pengguna web aplikasi
dapat diberikan menu navigasi agar MyUnpam melakukan navigasi ke menu – menu
memudahkan pengguna dalam berinteraksi, yang tersedia.
sehingga tidak selalu menggunakan side
menu.
3 Tampilan pada web aplikasi MyUnpam Tampilan interface pada web aplikasi
masih belum terlihat menarik, web aplikasi MyUnpam terlihat menjadi lebih menarik
masih dianggap belum user-friendly karena kebaruan interface agar experience
interface, karena masih adanya pemakaian pengguna dalam memahami informasi dapat
warna yang kurang tepat serta tombol yang ditangkap dengan baik.
masih dapat diatur ulang baik posisi dan
fungsinya.
4 Penampilan informasi pada menu Jadwal Pengguna dapat melihat informasi secara
Kuliah, KRS, KHS, Rangkman Nilai, Kartu bekelompok dan tidak terlihat membingungkan.
Ujian, dan Keuangan masih dapat diperbaiki
lagi salah satu nya dengan melakukan
grouping pada menu yang ditentukan
5 Tombol – tombol cetak pada web aplikasi Pengguna dapat dengan mudah menekan tombol
MyUnpam masih tidak fleksibel yang download atau cetak saat berada dibawah
dimana tidak dapat mengikuti arah layar. halaman aplikasi.
Tabel 3. 2 Asumsi dan Outcomes

4. 2. Pembuatan MVP
Dalam perancangan prototype web aplikasi peneliti menentukan pallete warna dan font apa yang baik
untuk digunakan dalam perancangan. Diantaranya sebagai berikut:
 Colour pallete
Pada perancangan prototype kali ini pallete yang digunakan berdasarkan pallete warna
pada aplikasi sebelumnya dengan warna dasarnya yaitu putih dalam kode hex #FFFFFF dan
dengan warna primary yaitu biru dengan kode hex #2F41EA.

Gambar 3. 3 Colour Pallete

 Font
Sedangkan untuk font yang digunakan, peneliti menggunakan font dengan jenis “Poppins”.
font ini banyak digunakan dan disarankan oleh designer UI/UX baik untuk mobile dan web. Font
ini memiliki beberapa type yang tersedia, seperti thin, regular, bold, italic.

Gambar 3. 4 Poppins Font

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 6

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999

a. Flow Web App

Pada tahap ini dibuat terlebih dahulu flow dari prototype yang akan dirancang. Pada flow ini
terdapat alur alur web aplikasi yang berisi menu – menu yang terdapat pada aplikasi MyUnpam.

Gambar 3. 5 Flow Web App

b. Interactive Prototype
Pada tahapan ini perancangan interactive prototype akan dibuat berdasarkan wireframe yeng telah
dibuat sebelumnya. Dalam segi interface atau visual tahap ini membuat sebuah aplikasi yang hampir
menyamai produk akhir yang siap digunakan. Tampilan pada perancangan ini akan dibuat lebih berwarna,
serta icon dan fitur yang ada akan dibuat lebih interaktif dan dapat di click oleh pengguna. Perancangan
interactive prototype ini menggunakan warna putih atau #FFFFFF sebagai dasar dengan warna biru atau
#2F41EA sebagai warna primary, dan font yang digunakan yaitu jenis “Poppins”.
 Login

Gambar 3. 6 Login

Halaman awal saat mengunjungi website MyUnpam, dengan logo, form NIM dan password, dan
tombol Login
 Dashboard

Gambar 3. 7 Dashboard\

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 7

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
Pada halaman ini terdapat berbagai macam area seperti, pada bagian header berisi icon menu,
nama halaman, dan icon notifikasi, serta pada bagian ini memuat program – program yang ada di
Universitas Pamulang seperti, LB, LSP, SISPEMA, dan SISKERMA. Pada bagian bawahnya terdapat
informasi tentang nilai IPK dan IPS yang didapat dengan 2 tombol disebelahnya untuk memilih nilai
mana yang akan ditampilkan IPK atau IPS atau keduanya. 2 tombol dibawahnya untuk menampilkan
VISI, MISI, dan SASARAN Universitas Pamulang
 Data Pribadi

Gambar 3. 8 Data Pribadi

Halaman ini menampilkan informasi detail dari pengguna yang diawali dengan foto pengguna
pada bagian header, dilanjutkan dengan dua tombol pada tombol kiri sebagai verifikasi ke telegram,
dan tombol kanan sebagai fungsi untuk mengganti password pengguna. Halaman ini juga memiliki
chart untuk IPK dan IPS dengan melakukan scroll ke bawah untuk melihat detail dari nilai IPK dan
IPS.
 Keuangan

Gambar 3. 9 Keuangan

Halaman ini menampilkan detail keuangan atau tagihan yang telah dibayar dan belum sesuai
dengan semester akademik yang sedang dijalani. Tagihan yang sudah lunas akan memiliki tanda lunas
dibawah nominal tagihan dengan icon dan teks hijau, sedangkan tagihan ang belum lunas ditandai
dengan teks dan icon berwarna orange.
 Kartu Rencana Studi

Gambar 3. 10 Kartu Rencana Studi

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 8

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
Pada halanman kartu rencana studi ini memiliki header dengan informasi semester akademik
yang pengguna jalani, serta pada bagian tengah berisi pilihan semester, 2 tombol untuk melakukan
pendaftaran SP dan merevisi KRS, dan pada bagian bawahnya berisi detail KRS yang diambil beserta
jumlah SKS pada masing – masing mata kuliah.
 Jadwal Kuliah

Gambar 3. 11 Jadwal Kuliah

Pada halaman jadwal kuliah ini jadwal kuliah dilakukan grouping, dengan mengelompokan
jadwal mata kuliah berdasarkan modul yang tersedia. Setiap modul berisi informasi pada setiap mata
kuliahnya seperti, nama mata kuliah beserta kode mata kuliah, nama pengajar, tempat dan ruang, dan
tanggal mulai pembelajaran, hari, serta jam mulai perkuliahan. Juga terdapat icon cek jadwal yang
berwarna hijau untuk melihat jadwal dapam bentuk dokumen.
 Kartu Ujian

Gambar 3. 12 Kartu Ujian

Pada halaman kartu ujian bagian tengah halaman berisi dua pilihan dengan menggunkan radio
botton, pada pilihan jenis ujian dengan dua radio botton UTS dan UAS, sedangkan pada pilihan
modul menggunakan tiga radio botton dengan urutan modul 1, 2, dan 3. Jadwal ujian akan muncul
sesuai jenis ujian dan modul yang dipilih. Dengan konten jadwal ujian berisi nama mata kuliah,
tempat dan ruang, serta waktu dan tanggal ujian
 Kartu Hasil Studi

Gambar 3. 13 Kartu Hasil Studi

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 9

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
Pada halaman kartu hasil studi ini, detail nilai yang didapat diatur ulang agar mudah dibaca. Pada
mata uliah yang mendapat nilai A atau B akan dipresentasikan dengan warna hijau, sedangkan untuk
nilai C dengan warna orange, dan nilai D dan E dengan warna merah.

 Rangkuman Nilai
Pada halaman ini berisi nilai – nilai yang telah didapatkan secara keseluruhan semester yang
dijalankan, setiap nilai akan dibedakan berdasarkan warna, nilai A atau B dengan warna hijau, C
dengan warna orange, dan D atau E dengan warna merah.

Gambar 3. 14 Rangkuman Nilai

 Dokumen

Gambar 3. 15 Dokumen

Menampilkan Dokumen yang tersedia pada aplikasi dengan tombol download pada area sebelah
kanan dengan icon hijau.
 Side Bar Menu

Gambar 3. 16 Side Bar Menu

Pada menu side bar ini berisi menu – menu yang tersedia pada aplikasi, header berisi logo
Universitas Pamulang, nama pengguna, dan NIM pengguna, dan pada bagian footer terdapat menu
logout, jika pengguna memilih tombol logout maka akan keluat pop-up konfirmasi logout.
4. 3. Pengujian Eksperimen

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 10

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
Pada tahap ini dilakukan pengujian eksperimen terhadap interactive prototype MVP (Minimum Viable
Product) yang telah dibuat sebelumnya. Guna untuk mengetahui apakah perancangan interactive prototype MVP
sesuai dengan flow yang diharapkan atau tidak. Pada tahap eksperimen penelitian ini meliatkan beberapa pihak
yang mengerti tentang user interface dan user experience.

4. 4. Feedback and Research

Pada tahapan ini akan dilakukan pengujian usability testing terhadap pengguna. Pengujian pada penelitian
ini menggunakan metode Single Ease Question dan User Experience Questionaire dengan tahapan evaluasi
menggunakan kuisioner untuk mengetahui usabilitas pada prototype yang terlah dibuat.
a. SEQ (Single Ease Question)
Dalam pengujian menggunakan SEQ ini pengguna mencoba melakukan usability task yang
telah dibuat sebelumnya. Setelah melakukan task yang diberikan, pengguna akan ditanya
pertanyaan sederhana;
“Seberapa sulit atau mudahkah Anda menemukan tugas itu ?”
Setelah itu, maka akan dilakukan penilaian dengan menggunakan skala 1 sampai 7 dengan 1
menyatakan sangat sulit dan 7 menyatakan sangat mudah.
Hasil testing SEQ dapat disimpulkan bahwa tanggapan pengguna terhadap test usabilitas
dengan menguji scenario pada aplikasi mendapat hasil positif dan bisa diterima dikarenakan
tanggapan pengguna banyak memilih pada 3 skala yaitu 5 (mudah), 6 (cukup mudah), dan 7
(sangat mudah).

7
Chart Hasil SEQ
6
5
4
3
2
1
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Gambar 3. 17 Chart Hasil SEQ

b. UEQ (User Experience Questionnaire)

Berdasarkan nilai yang didapat dari hasil kuisioner maka akan di transformasi dan akan
dikelompokan menjadi 6 skala dari 26 item dan akan menghasilkan nilai rata - rata di setiap skala.
Nilai antara -0,8 dan 0,8 mewakili evaluasi yang kurang lebih netral dari skala yang sesuai, nilai >
0,8 mewakili evaluasi positif dan nilai < -0,8 mewakili evaluasi negatif. Berikut nilai rata – rata
yang didapat:
UEQ Scales (Mean and
Variance)
2.0 0.
Daya Tarik
83 90
1.9 0.
Kejelasan
92 75
1.9 1.
Efisiensi
42 10
2.0 0.
Ketepatan 67 89
2.0 0.
Stimulasi 58 84
1.9 0.
Kebaruan
50 88
Tabel 3. 3 Hasil Nilai Skala UEQ

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 11

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
3
2
1
0
-1
-2
-3
ik i i
ar san ens ta
n
las ua
n
t la si pa u ar
ya je Efi te m b
Da Ke Ke Sti Ke

Gambar 3. 18 Chart Hasil Nilai Skala UEQ

Hasil dari pengujian UEQ pada Tabel 3. 3 mendapatkan hasil excellent pada lima skala yaitu
daya tarik, efisiensi, ketepatan, stimulasi, kebaruan dan good pada satu skala yaitu kejelasan
berdasarkan benchmark yang ada. Berikut chart benchmark pada pengujian menggunakan UEQ:
Scale Mean
Comparisson to benchmark
Daya tarik 2.08 Excellent
Kejelasan 1.99 Good
Efisiensi 1.94 Excellent
Ketepatan 2.07 Excellent
Stimulasi 2.06 Excellent
Kebaruan 1.95 Excellent
Tabel 1. 4 Perbandingan Hasil dengan Benchmark

2.50
2.00
1.50 Good
1.00
Above Average
0.50
Below Average
0.00
-0.50 Bad
-1.00 Lower Border
si i Mean
rik an an as an
a ta elas is en pat ul aru
y j Efi te m b
Da Ke Ke Sti Ke

Gambar 1. 19 Benchmark Chart

4. KESIMPULAN
Berdasarkan hasil penelitian yang dilakuan terhadap web aplikasi layanan informasi kampus MyUnpam,
didapatkan kesimpulan sebagai berikut:
1. Penelitian menggunakan metode Lean UX dalam perancangan prototype web aplikasi MyUnpam.
Metode ini dibagi menjadi 4 proses yaitu:
a. Declare Assumption merupakan tahap untuk menemukan permasalahan pada aplikasi
sebelumnya dengan cara observasi aplikasi, kuisioner, penentuan user persona, dan
menentukan outcomes.
b. Create an MVP adalah tahap perancangan aplikasi yang diawali dengan pembuatan
wireframe, dan interactive prototype untuk aplikasi.
c. Run an Experiment adalah tahap pengujian aplikasi secara mandiri dan kepada beberapa orang
yang mengerti tentang UI/UX desain.
d. Feedback and Research adalah tahap hasil dari uji usabilitas aplikasi kepada pengguna untuk
interactive prototype.

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 12

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999
2. Perubahan tampilan pada menu dashboard dengan menambahkan menu yang ada pada side bar agar
memudahkan dalam bernafigasi antar menu.
3. Font Poppins yang digunakan pada tampilan aplikasi memberi kesan simple dan mudah untuk dibaca.
4. Colour pallete yang digunakan memberi kesan yang menarik dan modern dengan warna primary yaitu
biru atau dalam kode hex #2F41EA.
5. Hasil pengujian usability kepada pengguna menggunakan metode SEQ dan UEQ dan mendapatkan
nirai rata-rata lebih tinggi dari 0,8 yang menandakan nilai tersebut excellent dan dapat digunakan

REFERENCES
DAFTAR PUSTAKA

Alroobaea, R., & Mayhew, P. J. (2014). How many participants are really enough for usability studies?
Proceedings of 2014 Science and Information Conference, SAI 2014, 48–56.
https://doi.org/10.1109/SAI.2014.6918171
Mishra, S. (2019). Significance of UI/UX design in mobile applications | by Shanuj Mishra | UX Collective. UX
Collective. https://uxdesign.cc/significance-of-ui-ux-design-in-mobile-application-f90b2c56c204
Schrepp, M. (2019). User Experience Questionnaire Handbook Version 8. URL: Https://Www. Researchgate.
Net/Publication/303880829_User_Experience_Questionnaire_Handbook_Version_2.(Accessed: 02.02.
2017), September 2015, 1–15. www.ueq-online.org
Adani, M. R. (2020, November 02). User Experience (UX): Pengertian, Tujuan, Metode, dan
Penerapannya. Diambil kembali dari Sekawan Media:
https://www.sekawanmedia.co.id/pengertian-user-experience/
Alroobaea, R., & Mayhew, P. J. (2014). How Many Participants ar Really Enough for Usability Studies?
Science and Information Conference, 48-56.
Babich, N. (2019, October 2). Typography in UI Design. Diambil kembali dari Xd Ideas: xd.adobe.com
coursera. (2021, June 25). Figma vs. Sketch vs. Adobe XD. Diambil kembali dari coursera: coursera.org

Gonzalez, R. (2017, July 25). Figma Wants Designers to Collaborative Google-Docs Style. Diambil
kembali dari WIRED: wired.com
Gothelf, J. (2013). Lean UX: Applying Lean Principles to Improve User Experience. Sebastopol: O'Reilly
Media.
Helilintar, R., Winarno, W. W., & Al Fatta, H. (2016). Penerapan Metode SAW dan Fuzzy Dalam Sistem
Pendukung Keputusan Penerimaan Beasiswa.
Hodson, B. (2019, Novenber 23). About UX. Diambil kembali dari UX Planet:
https://uxplanet.org/about-ux-8eddfbb7a13b
Interaction Design Foundation. (2020). What is a User Interface Design ? User Interface Design.
Lapitulhayat, A. (2010). Jounal of International Commercial Law and Technology Vol. 5, Issue 2. State
Control and the Privatisation of the Indonesian Telecommunications, 59-72.
Maulizar, A. (2013, May 08). Apa itu Perencanaan, Perancangan, dan Perancang. Diambil kembali
dari https://affifmaulizar.blogspot.com/2013/04/apa-itu-perencanaan-perancangan-
dan.html
Örücü, S., & Selek, M. (2020). Design and Validation of Rule-Based Expert System.
Skowron, M. (2020, March 19). Role of Colors in UX and UI Design. (UIG Studio) Diambil kembali dari
https://uigstudio.com/insights/role-of-colors-in-ux-and-ui-design
Stan, A. (2020, July 28). Typography Design 101 :a guide to rules and terms. Diambil kembali dari
99designs: 99designs.com
Team, I. E. (2021, September 18). What Is a User Interface? (Definition, Types and Examples). Diambil
kembali dari Indeed: https://www.indeed.com/career-advice/career-development/user-
interface

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 13

BULLET : Jurnal Multidisiplin Ilmu
Volume 99, No. 99, Bulan 2019
ISSN 9999-9999 (media online)
Hal 999-999

They Make Design. (2019, February 25). What is UI design? What is UX design? UI vs UX: What’s the
difference. Diambil kembali dari UX Planet: https://uxplanet.org/what-is-ui-vs-ux-design-and-
the-difference-d9113f6612de
Tran, T. H. (2019, September 06). A beginner’s guide to Lean UX (+ 5 lessons from Jeff Gothelf).
Diambil kembali dari InVision: invisionapp.com

Author 1 | https://journal.mediapublikasi.id/index.php/bullet | Page 14