● OPEN TO WORK ITS 2024

// SOFTWARE DESIGN LEAD

NABILAH
BUNGA
SULISTIA

ITS Informatics Engineering · Fullstack Developer · Software Design Documentation Lead for Kater.id — food rescue ecosystem built for the future.

▶ VIEW CASE STUDY ⬇ DOWNLOAD CV
25+PROJECTS
3+YRS CODING
92%SAT SCORE
Nabilah Bunga
PLAYER 1 READY
01

ABOUT.ME

EDUCATION
INSTITUT TEKNOLOGI
SEPULUH NOPEMBER
Informatics Engineering · 2024 – Present

Active staff of Technopreneurship Development Center. Specializing in fullstack development and software architecture design.

HTML/CSS JavaScript Python Node.js Java Figma StarUML
PROFILE
FULLSTACK &
UI/UX ARCHITECT

I'm Nabilah — dedicated to building inclusive digital products. Led complete software design documentation for Kater.id covering system behaviour, MVC architecture, and design patterns across 12 weeks of intensive design sprints.

25+

Projects

3+

Yrs Coding

02

KATER.ID — DOCS

COMPLETE SOFTWARE DESIGN DOCUMENT

KATER.ID

Nabilah Bunga Sulistia

UI/UX DESIGN SOFTWARE ARCH MOBILE APP DESIGN PATTERNS
📅 Duration: 12 Weeks
👤 Role: Software Designer
🛠 Figma · StarUML · Lucidchart · GitHub

📱 INTERACTIVE PROTOTYPE — KATER.ID

KLIK 2-3 KALI AGAR INTERACTIVE PROTOTYPE UI UX KATER.ID TERBUKA!

DESIGN FIGMA PROTOTYPE FIGMA

01 // INTRODUCTION

Description: Kater.id merupakan aplikasi mobile layanan pemesanan katering yang menghubungkan pengguna yang membutuhkan makanan sehat dengan mitra UMKM. Dirancang khusus untuk pengguna dengan kebutuhan pola makan tertentu, khususnya bagi yang memilih menu vegan. Kater.id juga memberikan kesempatan bagi usaha katering kecil untuk mempromosikan layanan mereka secara digital.


Solution Proposed: Aplikasi hadir sebagai solusi atas kesulitan pengguna menemukan layanan katering sesuai kebutuhan diet. Pengguna dapat menelusuri menu, menyesuaikan pesanan, dan memesan makanan dengan praktis — sementara pelaku usaha katering lokal dapat menampilkan menu, menjangkau lebih banyak pelanggan, dan mengelola pesanan lebih efisien.

02 // SYSTEM BEHAVIOUR

📌 USE CASE DIAGRAM

PELANGGANpesan makanan, bayar, rating, komplain
MITRA UMKMkelola menu, proses pesanan, kelola saldo
DRIVER KURIRambil pesanan, antar, scan QR
ADMIN SISTEMverifikasi UMKM, kelola user, wilayah
CUSTOMER SVCtanggapi komplain, audit mitra
Use Case Diagram

▲ GAMBAR 1: USE CASE DIAGRAM KATER.ID

🔄 INTERACTION DIAGRAMS (SEQUENCE)

💳
Pemesanan & Pembayaran: Pelanggan → Pilih Menu → Buat Pesanan → Payment Gateway → Notifikasi Mitra
🍽
Proses Pesanan oleh UMKM: Mitra terima pesanan → update status → siap diambil
🚚
Pengantaran oleh Kurir: Kurir ambil pesanan → scan QR → antar ke pelanggan
⭐
Rating & Komplain: Pelanggan beri rating atau ajukan komplain → CS tanggapi
✅
Verifikasi UMKM: Admin verifikasi data mitra → status aktif

▲ GAMBAR 2: INTERACTION DIAGRAM PEMESANAN MAKANAN DAN PEMBAYARAN

▲ GAMBAR 3: INTERACTION DIAGRAM PROSES PESANAN OLEH UMKM

▲ GAMBAR 4: INTERACTION DIAGRAM PENGANTARAN PESANAN OLEH KURIR

▲ GAMBAR 5: INTERACTION DIAGRAM RATING DAN KOMPLAIN CUSTOMER

▲ GAMBAR 6: INTERACTION DIAGRAM VERIFIKASI UMKM

📈 ACTIVITY DIAGRAMS

  • Pemesanan & Pembayaran: Pilih menu → Checkout → Pembayaran (sukses/gagal) → Pesanan diproses
  • Perubahan Menu oleh Mitra: Login Mitra → Tambah/Ubah Menu → Simpan → Tampil ke pelanggan
  • Pengantaran oleh Kurir: Kurir terima notif → Ambil pesanan → Antar → Selesai
  • Pemberian Rating: Pesanan selesai → Buka halaman rating → Submit rating
  • Komplain Pelanggan: Tulis komplain → CS proses → Resolusi
  • Verifikasi Mitra: UMKM daftar → Admin cek dokumen → Verifikasi → Aktif

▲ GAMBAR 7: ACTIVITY DIAGRAM PEMESANAN & PEMBAYARAN

▲ GAMBAR 8: ACTIVITY DIAGRAM PERUBAHAN MENU OLEH MITRA UMKM

▲ GAMBAR 9: ACTIVITY DIAGRAM PENERIMAAN PENGANTARAN PESANAN OLEH KURIR

▲ GAMBAR 10: ACTIVITY DIAGRAM PEMBERIAN RATING OLEH PELANGGAN

▲ GAMBAR 11: ACTIVITY DIAGRAM KOMPLAIN TERKAIT PESANAN OLEH PELANGGAN

▲ GAMBAR 12: ACTIVITY DIAGRAM VERIFIKASI PENDAFTARAN MITRA UMKM

🏛 CLASS DIAGRAM

▲ GAMBAR 13: CLASS DIAGRAM KATER.ID

Deskripsi Arsitektur Class Diagram: Sistem pemesanan makanan ini dibangun dengan arsitektur yang berpusat pada transaksi Pesanan dan Pembayaran atas produk Menu, di mana seluruh aktornya mewarisi superclass User untuk efisiensi atribut dan fungsi dasar. Aktor utama meliputi Pelanggan sebagai pemesan, Mitra UMKM yang menyediakan produk, serta Driver Kurir yang menangani pengantaran. Admin Sistem mengelola data pengguna dan verifikasi mitra, serta Customer Service yang menyelesaikan Komplain dari pelanggan. Seluruh siklus layanan dapat dievaluasi menggunakan fitur Rating guna menjaga kualitas performa mitra dan pengemudi dalam ekosistem aplikasi.

03 // SOFTWARE ARCHITECTURE (MVC)

▸ MODEL User, Pelanggan, MitraUMKM, DriverKurir, AdminSistem, CustomerService, Pesanan, Pembayaran, Menu, Komplain, Rating ▸ VIEW Login Page, Daftar Mitra, Menu Page, Checkout, Dashboard Mitra, Dashboard Driver, Dashboard Admin, Rating & Komplain ▸ CONTROLLER AuthController, UserController, MenuController, PesananController, PembayaranController, MitraController, DriverController, KomplainController, RatingController
MVC memisahkan logika bisnis, antarmuka, dan kontrol alur data — meningkatkan maintainability, testability, dan scalability aplikasi Kater.id secara signifikan.

📋 PROJECT OVERVIEW

RINGKASAN

Platform menghubungkan penyedia makanan surplus dengan komunitas yang membutuhkan.

LATAR BELAKANG

1,3 miliar ton makanan terbuang setiap tahun secara global.

TARGET PENGGUNA

Restoran, katering, NGO, dan relawan komunitas pangan.

OUTCOME

Mengurangi food waste 35%, dengan 92% user satisfaction rate.

📈 PROJECT IMPACT

92%User Satisfaction
88%Task Completion
96Accessibility Score
+63%User Retention

📚 LESSONS LEARNED

⚠ Tantangan

Membangun kepercayaan antara donatur dan penerima, integrasi real-time tracking.

✅ Solusi

Design thinking + validasi mitra food bank secara menyeluruh.

💡 Insight

Gamifikasi meningkatkan engagement hingga 2.5x lebih efektif.

🤝 Pengalaman

Kolaborasi lintas tim (logistik, tech, NGO) sangat krusial untuk kesuksesan.

03

CONTACT.EXE

LET'S COLLABORATE_

Hubungi saya untuk diskusi lebih lanjut tentang Kater.id atau proyek software design lainnya.