KETRINGAN

UX Design

Author – D3SI41-02
- Rizsa El Akbar (6701174115)
- Rafata Baharansyah (6701170104)
- Fitria Riadatul Chusniah (6701171069)
 TABLE OF
CONTENTS
TABLE OF CONTENTS............................................................................................2
INTRODUCTION KETRINGAN............................................................................................4
BACKGROUND............................................................................................................................4
DEFINING THE STRATEGY...........................................................................................................5
PRODUCT OBJECTIVES................................................................................................................6
a. Business Goals.......................................................................................................................6
b. Brand Identity........................................................................................................................6
c. Success Metrics......................................................................................................................7
USER NEEDS...............................................................................................................................8
a. User Segmentation................................................................................................................8
b. User Experience Research.....................................................................................................9
c. User Personas Analytics.......................................................................................................10
d. Costumer Journey Maps Analytics.......................................................................................12
Berikut adalah Customer Jurney Maps.....................................................................................12
e. Platform Used......................................................................................................................13
THE SCOPE PLANE..........................................................................................14
SCOPE......................................................................................................................................14
SCENARIO MAPPING................................................................................................................14
FUNCTIONALITY.......................................................................................................................15
a. List Menu Katering...............................................................................................................15
b. Filter Menu Katering............................................................................................................15
c. Kelola Keranjang..................................................................................................................15
d. Checkout..............................................................................................................................15
e. Pembayaran.........................................................................................................................16
f. Lihat Status Pesanan.............................................................................................................16
g. Form Pesanan Cepat............................................................................................................16
h. Kelola Akun Konsumen........................................................................................................16
i. Login.....................................................................................................................................16
CONTENT REQUIREMENT.........................................................................................................16
a. List Menu Katering................................................................................................................16
b. Filter Menu Katering.............................................................................................................16
c. Kelola Keranjang....................................................................................................................17
d. Checkout..............................................................................................................................17
e. Pembayaran.........................................................................................................................17
f. Lihat Status Pesanan.............................................................................................................17
g. Form Pesanan Cepat............................................................................................................17
 h. Kelola Akun Konsumen........................................................................................................18
THE STRUCTURE PLANE..........................................................................................19
HIRARCHY MENU.....................................................................................................................19
a. Content Structure................................................................................................................19
 Cari Katering..........................................................................................................................19
o Katering Acara......................................................................................................................19
 Filter Menu.............................................................................................................................19
 Detail Menu...........................................................................................................................19
 Kirim Permintaan...................................................................................................................20
o Katering Harian....................................................................................................................20
 Promo...................................................................................................................................20
 Neng Ketty.............................................................................................................................20
o Kenalan................................................................................................................................20
 Membership..........................................................................................................................20
o Daftar...................................................................................................................................20
o Pelajari Lebih Lanjut.............................................................................................................20
 Partnership............................................................................................................................20
o Daftar...................................................................................................................................20
o Pelajari Lebih Lanjut.............................................................................................................20
 Keranjang..............................................................................................................................20
 Login......................................................................................................................................20
o Profil.....................................................................................................................................20
 Profil Saya..............................................................................................................................20
 Ubah Profil............................................................................................................................20
 Atur Ulang Kata Sandi...........................................................................................................20
 Lihat Dompet........................................................................................................................20
 Daftar Pesanan.......................................................................................................................20
 Detail Pesanan......................................................................................................................20
 Daftar Request.......................................................................................................................20
 Logout....................................................................................................................................20
o Checkout Keranjang Belanja.................................................................................................20
 Lanjutkan Pembayaran...........................................................................................................20
 Negosiasi................................................................................................................................20
 Registrasi...............................................................................................................................20
 Tentang Kami........................................................................................................................20
 Kebijakan Privasi...................................................................................................................20
b. Information Structure Node................................................................................................20
c. Language and Metadata......................................................................................................21
Bahasa Pemrograman yang dipakai dan metadata-nya adalah:...............................................21
 HTML 5 & CSS................................................................................................................21
 PHP 7.....................................................................................................................................21
 CodeIgniter 3.........................................................................................................................21
 Reach Js.................................................................................................................................21
 BootStrap 4...........................................................................................................................21
6 KEY INTERACTION DESIGN.....................................................................................................21
a. Consistency..........................................................................................................................21
b. Constraints..........................................................................................................................22
c. Mapping...............................................................................................................................23
d. Visibility...............................................................................................................................23
e. Feedback..............................................................................................................................24
 f. Affordance............................................................................................................................25
THE SCELETON PLANE..........................................................................................26
THE SURFACE PLANE..........................................................................................47
 INTRODUCTION
KETRINGAN
BACKGROUND
Penyelenggaraan acara atau event sering dijumpai pada program kerja
suatu organisasi maupun komunitas mahasiswa. Salah satu hal yang
dibutuhkan adalah konsumsi atau makanan yang harus disediakan bagi
peserta maupun pengisi acara acara tersebut. Tak heran jika
mahasiswa memanfaatkan jasa penyedia katering makanan untuk
memenuhi kebutuhan konsumsi acara mereka. Namun, ada beberapa
masalah yang dihadapi mahasiswa dalam melakukan pencarian vendor
penyedia makanan katering antara lain:
a. Mahasiswa sulit mencari jasa konsumsi yang sesuai dengan keinginan
untuk acara dalam setiap program kerja mahasiswa.
b. Padatnya jadwal kuliah sehingga tidak mempunyai waktu untuk
melakukan survei vendor katering

Selain itu, di pihak penyedia jasa katering makanan yang

merupakan bentuk dari Usaha Mikro, Kecil dan Menengah (UMKM)
terdapat beberapa permasalahan yang biasa dihadapi antara lain:
a. Kurangnya edukasi tentang cara untuk meningkatkan bisnis UMKM
dibidang jasa katering (konsumsi)
b. Minimnya sarana atau fasilitas pendistribusian bagi UMKM karena
antara keuntungan produksi dan biaya operasional tidak seimbang

4
c.Ketidakpahaman terhadap pentingnya untuk menjaga loyalitas
pelanggan yang kemudian akan berdampak pada repeat order.

Berdasarkan permasalahan-permasalahan tersebut, terciptalah ide

untuk merancang suatu desain dari platform yang dapat menjadi solusi
bagi mahasiswa yang sedang membutuhkan katering dan UMKM yang
ingin meningkatkan usahanya, yakni aplikasi berbasis web bernama
KETRINGAN.

DEFINING THE STRATEGY

 Mengenalkan aplikasi KETRINGAN kepada calon user

 Membuat UI sesuai hasil riset UX Mencari penyedia katering sebagai

mitra KETRINGAN

 agar user menggunakan aplikasi tanpa rasa kebingungan.

5
PRODUCT OBJECTIVES

a. Business Goals

Konsumen dapat mendapatkan makanan katering yang sesuai dengan budget,

kebutuhan yang diinginkan serta penyedia katering yang sesuai.

b. Brand Identity

Arti/filosofi dari logo:

1) Bentuk Lingkaran:

Melambangkan piring yang merupakan wadah yang layak untuk

menyajikan makanan. Difilosofikan bahawa semua makanan akan
disajikan oleh Ketringan secara layak dan dengan tampilan yang
menarik.

2) Topi Koki:

Melambangkan topi seorang koki handal yang akan membuat masakan-

masakan dengan cita rasa yang hebat. Mewakili bahwa vendor-vendor
makanan yang bekerjasama dengan Ketringan merupakan vendor
makanan terbaik dan Ketringan melakukan pengawasan ketat agar
makanan yang disajikan selalu yang terbaik.
 3) Sendok, garpu, dan Pisau yg membentuk huruf K:

Melambangkan tools atau peralatan bantu untuk makan yang

difilosofikan bahwa Ketringan adalah menjadi sarana atau alat bantu
bagi mahasiswa dalam menyediakan konsumsi katering untuk acara
mereka. Selain itu, huruf K mewakili huruf pertama dari Ketringan,
kepuasan, kebersihan, kelayakan, ketepatan waktu, dan kualitas rasa,
hal-hal yang diberikan oleh Ketringan untuk pelanggan.

4) Warna Primer Merah dengan aksen Putih:

Merah mewakili warna yang meningkatkan nafsu makan dan putih

mewakili kebersihan.

c. Success Metrics

Hal yang ingin dicapai di tahun 2020-2021:

Target Forum Relawan yang Menggunakan

Aplikasi ini
70
60
60

50
40
40

30
20
20
10
10

0
November December Januari Februari

Organisasi Relawan
 Target Relawan yang Mendaftar
450
400
400

350

300

250
200
200

150
100
100
50
50

0
November December Januari Februari

Jumlah Relawan yang mendaftar

USER NEEDS

a. User Segmentation

Segmentasi user kami adalah para mahasiswa di seluruh Indonesia.

Mengapa? Karena banyak dijumpai kegiatan mahasiswa baik dari
organisasi seperti himpunan, Unit Kegiatan Mahasiswa(UKM),
komunitas, dan tak jarang perseorangan yang dimana kegiatan
tersebut membutuhkan konsumsi dari jasa katering.
Sebagai gambaran, menurut Badan Pusat Statistik Indonesia pada
tahun 2017 terdapat 3.276 universitas, 20.516 program studi dan
6.924.511 mahasiswa yang tersebar di seluruh Indonesia.
b. User Experience Research

Untuk merancang suatu platform yang bertujuan untuk membantu

mahasiswa yang sedang membutuhkan katering dan UMKM yang
ingin meningkatkan usahanya, dibutuhkan strategi yang tepat agar
nantinya platform tersebut tepat guna dan mudah dalam digunakan
atau dioperasikan. Langkah yang diambil adalah dengan menerapkan
metode contextual inquiry yakni metode pengumpulan data dengan
melakukan observasi secara langsung untuk mengamati kegiatan
dari dua belah pihak untuk menghasilkan informasi bagaimana alur
atau prosedur penyediaan konsumsi oleh suatu panitia acara
mahasiswa dan bagaimana proses saat penyedia makanan atau
UMKM dalam memproses pesanan dalam jumlah besar. Selain itu,
dilakukan pula sedikit tanya jawab untuk menggali kesulitan apa
yang dihadapi dan harapan apa dari platform yang akan dirancang
nanti untuk kemudahan keduanya.
c. User Personas Analytics
d. Costumer Journey Maps Analytics
Berikut adalah Customer Jurney Maps.
e. Platform Used

Aplikasi KETRINGAN digunakan pada platform website yang digunakan

oleh user yang ingin mengadakan acara dalam mencari katering sesuai
dengan budget, kebutuhan yang di inginkan serta penyedia jasa yang
sesuai.
THE SCOPE
PLANE
SCOPE

Suatu kegiatan untuk meyakinkan bahwa semua kegiatan yang

dilakukan telah mencakupi semua requirement yang telah didefinisikan,
dan tidak terdapat kegiatan tambahan yang tidak berhubungan dengan
requirement.

SCENARIO MAPPING
FUNCTIONALITY

15
a.List Menu Katering
Menampilkan menu – menu katering yang tersedia.

b. Filter Menu Katering

Filter berdasarkan harga dan dapat juga filter berdasarkan kategori

makanan (ayam, sayur, ikan, dll).

c.Kelola Keranjang
Dapat melakukan beberapa aksi seperti:
1) Menambah item menu ke keranjang.
2) Menghapus item menu dari keranjang.
3) Menghitung harga berdasarkan jumlah item di keranjang.

d. Checkout

Pada halaman checkout terdapat ringkasan pesanan menu yang akan

dipesan serta mengisikan beberapa biodata pemesan.

e.Pembayaran
Pada fitur pembayaran terdapat pemilihan metode pembayaran dan
rincian pembayaran.

f. Lihat Status Pesanan

Dapat menampilkan list pesanan beserta status pesanan nya.

g. Form Pesanan Cepat

Form yang dapat diisi dengan kebutuhan konsumen jika menu yang
dicari tidak tersedia.

16
h. Kelola Akun Konsumen

Kelola akun konsumen meliputi ubah profil, reset password dan

detail profile.

i. Login

CONTENT REQUIREMENT

a. List Menu Katering

1) Nama menu.
2) Harga menu.
3) Gambar menu.
4) Nama vendor.

b. Filter Menu Katering

1) Kategori (Box, Presmanan, Snack Box).
2) Harga.

c. Kelola Keranjang
1) Ringkasan belanja (total harga).
2) Nama menu.
3) Harga menu.
4) Gambar menu.
5) Nama vendor.
6) Jumlah menu.

d. Checkout
1) Ringkasan pesanan (nama menu, jumlah, harga, subtotal)
2) Nama lengkap.
17
 3) Alamat pengiriman.
4) Email.
5) Nomor telpon.
6) Tanggal Acara.

e. Pembayaran
1) List metode pembayaran.
2) Nama bank.
3) Atas nama pengirim.
4) Nomor rekening.

f. Lihat Status Pesanan

1) Kode Pesanan.
2) Tanggal Pesanan.
3) Status pesanan.

g. Form Pesanan Cepat

1) Nama konsumen.
2) Nomor telepon.
3) Jenis makanan.
4) Budget.
5) Porsi.

h. Kelola Akun Konsumen

1) Nama konsumen.
2) Nomor telepon konsumen.
3) Email Konsumen.
4) Saldo dompet.

18
THE STRUCTURE
PLANE

HIRARCHY MENU

a. Content Structure

 Cari Katering
o Katering Acara
 Filter Menu
 Detail Menu
  Kirim Permintaan
o Katering Harian
 Promo
 Neng Ketty
o Kenalan
 Membership
o Daftar
o Pelajari Lebih Lanjut
 Partnership
o Daftar
o Pelajari Lebih Lanjut
 Keranjang
 Login
o Profil
 Profil Saya
 Ubah Profil
 Atur Ulang Kata Sandi
 Lihat Dompet
 Daftar Pesanan
 Detail Pesanan
 Daftar Request
 Logout
o Checkout Keranjang Belanja
 Lanjutkan Pembayaran
 Negosiasi
 Registrasi
 Tentang Kami
 Kebijakan Privasi

b. Information Structure Node

 Semua header sama agar mempermudah user dalam perpindahan
halaman.

 Registrasi sebelum login (jika belum memiliki akun)

 Login jika sudah memiliki akun

 Masuk ke menu untuk melihat menu-menu katering

 Masuk ke keranjang produk untuk melihat menu katering yang akan

di beli

 Masuk ke checkout untuk melakukan pembayaran

 Masuk ke halaman pesanan saya untuk melihat pesanan user

 Logout untuk keluar dari halaman

c. Language and Metadata

Bahasa Pemrograman yang dipakai dan metadata-nya adalah:

 HTML 5 & CSS

 PHP 7
 CodeIgniter 3
 Reach Js
 BootStrap 4

6 KEY INTERACTION DESIGN

a. Consistency

Pada rancangan ini, kami menerapkan consistency pada tampilan

header, footer, ukuran gambar menu, dan icon-icon yang
mempresentasikan suatu aksi.
 Contohnya pada tampilan keranjang belanja dimana item-item yang
ada terlihat konsisten.

b. Constraints

Pada rancangan ini, kami menerapkan beberapa constraint atau

batasan, contohnya adalah pengguna tidak akan dapat mengakses
halaman pendaftaran partnership jika belum melakukan login.

c. Mapping

Pada rancangan ini, kami menerapkan mapping pada peletakan

navigasi menu yang sangat memudahkan pengguna dalam
mengakses halaman-halaman lain aplikasi.
d. Visibility

Pada rancangan ini, kami menerapkan visibility dengan

menampilkan ikon animasi yang merepresentasikan proses memuat
halaman, sehingga pengguna akan mengetahui saat halaman
belum tampil secara sempurna karena masih memuat data.
e. Feedback

Pada rancangan ini, kami menerapkan feedback dengan

menampilkan dialog informasi jika pengguna telah melakukan suatu
aksi, sehingga pengguna akan mengetahui jika apa yang telah
dilakukannya sudah mendapat respon dari aplikasi.
f. Affordance

Pada rancangan ini, kami menerapkan affordance dengan

menampilkan suatu ikon yang dapat meberikan clue atau petunjuk
untuk aksi yang dpat dilakukan pengguna. Contohnya adalah ikon
tanda panah pada banner yang merepresentasikan bahwa tampilan
banner tersebut dapat digeser pada tampilan berikutnya.
THE SCELETON
PLANE
THE SURFACE
PLANE