Nabilah Bunga | DoTrack — UI/UX Design Portfolio

📱 INTERACTIVE PROTOTYPE — DOTRACK

Prototype interaktif di dalam mockup HP — klik layar untuk interaksi

PROTOTYPE FIGMA DESIGN FIGMA

🖼 UI SCREENS — DOTRACK

SPLASH SCREEN

ONBOARDING

DASHBOARD

TAMBAH TUGAS

POMODORO

Fitur Unggulan: Splash screen dengan branding biru-kuning yang ramah, onboarding singkat yang langsung menjelaskan manfaat utama, dashboard dengan kartu tugas mendesak, sesi fokus Pomodoro dengan progress ring, ringkasan statistik harian (total, terlambat, selesai, pending), kategori tugas, kalender agenda harian, hingga halaman statistik fokus & pencapaian jangka panjang.

01 // INTRODUCTION

Description: DoTrack adalah aplikasi manajemen tugas dan fokus yang membantu pengguna mengatur aktivitas harian secara terstruktur. Aplikasi ini menggabungkan to-do list, kalender, teknik Pomodoro, dan statistik produktivitas dalam satu pengalaman yang ringkas dan mudah dipahami.

Solution Proposed: Pengguna dapat mencatat tugas dengan deadline yang jelas, menjalankan sesi fokus terstruktur lewat Pomodoro timer, memantau agenda harian lewat kalender interaktif, serta melihat tren produktivitas mereka dari waktu ke waktu untuk membentuk kebiasaan kerja yang lebih sehat.

⚠ Problem Statement

Banyak mahasiswa dan pekerja kantoran mengalami kesulitan dalam mengelola waktu dan menjaga konsistensi fokus di tengah tumpukan tugas harian. Tanpa alat yang terstruktur, mereka cenderung menunda pekerjaan, kehilangan prioritas, dan tidak memiliki gambaran jelas tentang produktivitas mereka sendiri. DoTrack hadir sebagai solusi all-in-one untuk mengatasi tantangan ini.

🎯 TUJUAN APLIKASI (APPLICATION GOALS)

📋

MANAJEMEN TUGAS

Membantu pengguna mencatat, mengatur, dan memprioritaskan tugas harian dengan deadline dan kategori yang jelas.

⏱

FOKUS TERSTRUKTUR

Menyediakan sesi Pomodoro yang terintegrasi untuk membantu pengguna menjaga konsentrasi dan menyelesaikan tugas lebih efisien.

📅

AGENDA VISUAL

Menampilkan kalender interaktif agar pengguna dapat melihat dan merencanakan aktivitas harian dengan lebih baik.

📊

TRACKING PRODUKTIVITAS

Memberikan statistik dan insight tentang pola produktivitas pengguna, sehingga mereka dapat terus meningkatkan performa.

Tujuan Utama: DoTrack dirancang untuk menjadi "co-pilot" produktivitas harian — membantu pengguna tidak hanya menyelesaikan tugas, tetapi juga memahami kebiasaan kerja mereka dan terus berkembang.

👥 USER PERSONA

Persona pengguna DoTrack berdasarkan riset awal terhadap target audiens — mahasiswa dan pekerja kantoran yang membutuhkan struktur dalam aktivitas harian mereka.

👴 RINA ANGGRAINI Mahasiswa Akhir • 22 Tahun

Motivasi: Menyelesaikan skripsi tepat waktu tanpa kehilangan fokus di tengah banyaknya referensi dan revisi.
Pain Point: Sering kewalahan dengan deadline dosen dan kesulitan membagi waktu antara bimbingan, riset, dan aktivitas lainnya.
Kebutuhan: Aplikasi yang bisa membantunya memecah tugas besar menjadi langkah-langkah kecil dan memberikan notifikasi pengingat.

🚀 TARGET USER

💻 BUDI PRATAMA Software Engineer • 28 Tahun

Motivasi: Meningkatkan produktivitas kerja harian dan menyelesaikan sprint tanpa lembur yang tidak perlu.
Pain Point: Sering terganggu oleh notifikasi dan meeting dadakan, sehingga sulit menyelesaikan coding task tepat waktu.
Kebutuhan: Pomodoro timer yang terintegrasi dengan task list dan statistik fokus harian.

📈 EARLY ADOPTER

👩 SARI DEWANTI Freelance Designer • 25 Tahun

Motivasi: Mengatur jadwal proyek desain dari berbagai klien tanpa ada yang terlewat.
Pain Point: Deadline yang saling bertabrakan dan kurangnya visualisasi agenda harian.
Kebutuhan: Kalender interaktif dan fitur statistik untuk melihat beban kerja mingguan.

💡 POWER USER

Insight Persona: Ketiga persona memiliki kebutuhan inti yang sama — struktur, visibilitas, dan kontrol atas aktivitas harian mereka. DoTrack menjawab kebutuhan ini melalui kombinasi to-do list, Pomodoro, kalender, dan statistik dalam satu platform.

📌 USER JOURNEY MAP

Alur perjalanan pengguna (user journey) dari pertama kali membuka aplikasi hingga menyelesaikan tugas dan melihat statistik produktivitas.

🚀STEP 1ONBOARDINGPengguna melihat splash screen dan onboarding singkat tentang fitur DoTrack.

📝STEP 2TAMBAH TUGASMembuat tugas baru dengan judul, deskripsi, deadline, dan kategori.

📅STEP 3LIHAT AGENDAMemeriksa kalender untuk melihat semua tugas yang terjadwal hari ini.

⏱STEP 4FOKUS POMODOROMenjalankan sesi fokus 25 menit untuk menyelesaikan tugas prioritas.

✅STEP 5SELESAIKAN TUGASMenandai tugas sebagai selesai, skor fokus dan statistik terupdate.

📊STEP 6CEK STATISTIKMelihat tren produktivitas mingguan dan rekomendasi jadwal dari AI.

▲ GAMBAR: USER JOURNEY MAP DOTRACK

Key Takeaway: Journey ini dirancang untuk meminimalkan friction — dari onboarding yang cepat, pembuatan tugas yang intuitif, hingga sesi fokus yang terukur. Setiap langkah saling terhubung untuk membentuk ekosistem produktivitas yang utuh.

02 // SYSTEM BEHAVIOUR

📍 USE CASE DIAGRAM

PENGGUNAkelola tugas, jalankan sesi fokus, pantau statistik

NOTIFIKASIkirim pengingat deadline & sesi fokus

MODUL STATISTIKhitung skor fokus & distribusi kategori

AI INSIGHTberi rekomendasi jadwal optimal

▲ GAMBAR 1: USE CASE DIAGRAM DOTRACK

📜 KETERANGAN 1. Use Case Diagram — Diagram ini menunjukkan interaksi antara Pengguna dengan sistem DoTrack, di mana Pengguna dapat melakukan onboarding, login, mengelola tugas (tambah, lihat, edit, tandai selesai), menjalankan sesi Pomodoro, melihat kalender, serta mengakses statistik fokus dan pencapaian, dengan dukungan tiga aktor sistem yaitu Notifikasi, Modul Statistik, dan AI Insight yang bekerja di belakang layar.

🔄 INTERACTION DIAGRAMS (SEQUENCE)

✏

Tambah Tugas Baru: Pengguna isi judul & deskripsi → Atur deadline → Sistem simpan ke kategori → Tugas muncul di dashboard & kalender

⏱

Jalankan Sesi Pomodoro: Pengguna pilih tugas → Mulai timer 25 menit → Sistem catat durasi fokus → Notifikasi saat sesi selesai → Update skor fokus

📅

Lihat Agenda Kalender: Pengguna buka tab Kalender → Pilih tanggal → Sistem tampilkan agenda berdasarkan waktu → Pengguna tandai tugas selesai

📊

Lihat Statistik Produktivitas: Pengguna buka tab Statistik → Sistem hitung tren fokus mingguan → Tampilkan distribusi kategori & pencapaian → AI beri rekomendasi jadwal

▲ GAMBAR 2: INTERACTION DIAGRAM TAMBAH TUGAS

📜 KETERANGAN 2a. Interaction Diagram — Tambah Tugas — Sequence diagram ini menggambarkan alur saat pengguna mengisi form "Tambah Tugas" (judul, deskripsi, deadline, kategori), lalu sistem memvalidasi inputnya — jika valid, data disimpan ke database dan pengingat deadline otomatis dijadwalkan; jika tidak valid, sistem menampilkan pesan error agar pengguna mengisi ulang.

▲ GAMBAR 3: INTERACTION DIAGRAM SESI POMODORO

📜 KETERANGAN 2b. Interaction Diagram — Sesi Pomodoro — Sequence diagram ini menggambarkan alur saat pengguna memilih tugas dan memulai timer Pomodoro 25 menit, di mana sistem terus memperbarui tampilan ring timer setiap detik dan merespons kontrol pause/skip/stop, sampai akhirnya sesi selesai dan datanya tercatat ke modul Statistik beserta notifikasi "sesi selesai" ke pengguna.

▲ GAMBAR 4: INTERACTION DIAGRAM TUGAS SELESAI

📜 KETERANGAN 2c. Interaction Diagram — Selesaikan Tugas — Sequence diagram ini menggambarkan alur saat pengguna membuka daftar tugas hari ini lalu mencentang satu tugas untuk ditandai selesai, di mana sistem langsung memperbarui status tugas di database dan menghitung ulang progress harian yang ditampilkan di ring progress.

▲ GAMBAR 5: INTERACTION DIAGRAM LIHAT STATISTIK

📜 KETERANGAN 2d. Interaction Diagram — Lihat Statistik — Sequence diagram ini menggambarkan alur saat pengguna membuka halaman Statistik, di mana sistem mengambil beberapa data sekaligus (skor fokus, total jam Pomodoro, tren bulanan, distribusi kategori, pencapaian) dari database, lalu AI Insight memprosesnya menjadi satu rekomendasi jadwal yang ditampilkan ke pengguna.

📈 ACTIVITY DIAGRAMS

Tambah Tugas: Isi judul & deskripsi → Atur deadline → Pilih kategori → Simpan → Tugas tampil di dashboard
Sesi Fokus Pomodoro: Pilih tugas → Mulai timer → Jeda/lanjut sesuai kebutuhan → Sesi selesai → Catat ke statistik
Penyelesaian Tugas: Buka daftar tugas hari ini → Tandai selesai → Progress harian diperbarui → Skor fokus naik
Eksplorasi Statistik: Buka tab statistik → Sistem render grafik tren fokus → Tampilkan pencapaian terbaru → Saran optimasi jadwal

▲ GAMBAR 6: ACTIVITY DIAGRAM TAMBAH TUGAS

📜 KETERANGAN 3a. Activity Diagram — Tambah Tugas — Diagram ini memetakan langkah pengguna mengisi form tugas baru, dengan percabangan keputusan pada validasi judul (kalau kosong, alur berhenti dengan pesan error) dan pilihan akhir antara menyimpan sebagai draft atau melanjutkan hingga tugas tersimpan dan muncul di dashboard.

▲ GAMBAR 7: ACTIVITY DIAGRAM SESI POMODORO

📜 KETERANGAN 3b. Activity Diagram — Sesi Pomodoro — Diagram ini memetakan alur sesi fokus dari mulai timer berjalan, perulangan (repeat) selama waktu belum habis dengan opsi pause/skip/stop di setiap iterasi, hingga sesi selesai dan sistem menentukan apakah ini sesi terakhir (lalu menyarankan istirahat panjang) atau masih ada sesi berikutnya.

▲ GAMBAR 8: ACTIVITY DIAGRAM TUGAS SELESAI

📜 KETERANGAN 3c. Activity Diagram — Selesaikan Tugas — Diagram ini memetakan alur saat pengguna memilih tugas dari daftar, dengan pengecekan apakah tugas sudah selesai sebelumnya (jika ya, alur berhenti sebagai read-only), lalu mencentang tugas, memperbarui progress, dan mengecek apakah semua tugas hari itu sudah tuntas.

▲ GAMBAR 9: ACTIVITY DIAGRAM LIHAT STATISTIK

📜 KETERANGAN 3d. Activity Diagram — Lihat Statistik — Diagram ini memetakan alur sistem mengumpulkan dan menampilkan berbagai data statistik secara berurutan (skor fokus, jam fokus, tren bulanan, distribusi kategori, pencapaian, rekomendasi AI), diakhiri dengan keputusan pengguna apakah mau menerapkan rekomendasi jadwal atau tetap dengan jadwal lama.

🏛 CLASS DIAGRAM

▲ GAMBAR 10: CLASS DIAGRAM DOTRACK

📜 KETERANGAN 4. Class Diagram — Diagram ini memperlihatkan struktur data DoTrack yang berpusat pada entitas Tugas dan SesiPomodoro, di mana satu Pengguna bisa memiliki banyak Tugas yang terhubung ke satu Kategori dan difokuskan lewat beberapa SesiPomodoro, sementara data dari keduanya diagregasi oleh entitas Statistik untuk menghasilkan skor fokus, memicu Pencapaian, dan menyusun JadwalRekomendasi.

Deskripsi Arsitektur Class Diagram: Sistem DoTrack dibangun dengan entitas utama Pengguna, Tugas, dan SesiPomodoro yang saling terhubung melalui mekanisme Kategori, Notifikasi, dan Statistik. Setiap Tugas memiliki atribut deadline, kategori, dan status, sementara SesiPomodoro mencatat durasi fokus yang kemudian diagregasi ke modul Statistik untuk menghasilkan skor fokus dan rekomendasi jadwal melalui modul AIInsight.

03 // SOFTWARE ARCHITECTURE (MVC)

► MODEL User, Tugas, Kategori, SesiPomodoro, Notifikasi, Statistik, Pencapaian, JadwalRekomendasi, Kalender ► VIEW Splash Screen, Onboarding, Login/Register, Dashboard, Tambah Tugas, Lihat Semua Tugas, Pomodoro, Kalender, Statistik, Profil ► CONTROLLER AuthController, TugasController, KategoriController, PomodoroController, KalenderController, StatistikController, NotifikasiController, ProfilController

MVC Architecture memisahkan logika data tugas, antarmuka pengguna, dan kontrol alur interaksi — sehingga DoTrack lebih mudah dikembangkan, diuji, dan diskalakan untuk fitur-fitur produktivitas selanjutnya.

🎨 DESIGN SYSTEM

Sistem desain DoTrack dibangun dengan pendekatan pixel-perfect yang ramah, berwarna, dan mudah dikenali — mencerminkan semangat produktivitas yang menyenangkan.

🎨 COLOR PALETTE

Navy

#16284D

Blue

#6FA8DC

Yellow

#FFC93C

Cream

#F4F8FC

Cream 2

#E8F0FA

Muted

#44567A

📖 TYPOGRAPHY

HEADINGDoTrack — Fokus Produktif

SUBHEADKelola Tugas & Waktu dengan Lebih Baik

BODYAplikasi ini membantu kamu mencatat tugas, menjalankan sesi fokus, dan melihat statistik produktivitas harian.

PIXELPRESS START 2P — UNTUK AKSEN RETRO

INTERInter — untuk body dan UI yang bersih & modern

⚡ UI COMPONENTS

PRIMARY BUTTON SECONDARY OUTLINE DARK CARD INPUT BADGE

Prinsip Desain: Setiap komponen mengikuti aturan "pixel-perfect" dengan bayangan tegas dan border yang eksplisit — menciptakan tampilan yang kokoh, playful, dan mudah diingat.

📋 PROJECT OVERVIEW

RINGKASAN

Aplikasi manajemen tugas dan fokus yang menggabungkan to-do list, Pomodoro, kalender, dan statistik produktivitas dalam satu platform.

LATAR BELAKANG

Banyak pengguna kesulitan menjaga konsistensi fokus dan sering kehilangan momentum di tengah banyaknya tugas harian yang tidak terstruktur.

TARGET PENGGUNA

Mahasiswa, pekerja kantoran, dan siapa pun yang ingin mengatur waktu serta tugas hariannya dengan lebih disiplin dan terukur.

OUTCOME

Pengguna lebih konsisten menyelesaikan tugas tepat waktu dan memiliki gambaran jelas tentang pola produktivitas mereka sendiri.

📈 PROJECT IMPACT

82Skor Fokus Rata-rata

+12%Naik dari Minggu Lalu

124hTotal Jam Fokus

50Tugas Selesai

📚 LESSONS LEARNED

⚠ Tantangan

Merancang tampilan Pomodoro yang tetap terasa ringan dan tidak menekan, meski fungsinya mengukur waktu fokus secara ketat.

✅ Solusi

Menggunakan progress ring yang lembut dan warna biru-kuning yang hangat, alih-alih angka countdown yang terasa mendesak.

💡 Insight

Fitur statistik & rekomendasi jadwal terbukti paling sering diakses, menandakan pengguna ingin memahami pola kerja mereka sendiri.

🤝 Pengalaman

Kolaborasi erat antara riset perilaku pengguna dan desain visual sangat penting untuk membangun fitur produktivitas yang benar-benar dipakai.

NABILAH
BUNGA
SULISTIA

ABOUT.ME

DOTRACK — SOFTWARE DESIGN DOCS

✓ DOTRACK

📱 INTERACTIVE PROTOTYPE — DOTRACK

🖼 UI SCREENS — DOTRACK

01 // INTRODUCTION

MANAJEMEN TUGAS

FOKUS TERSTRUKTUR

AGENDA VISUAL

TRACKING PRODUKTIVITAS

👥 USER PERSONA

📌 USER JOURNEY MAP

02 // SYSTEM BEHAVIOUR

03 // SOFTWARE ARCHITECTURE (MVC)

🎨 DESIGN SYSTEM

📋 PROJECT OVERVIEW

📈 PROJECT IMPACT

📚 LESSONS LEARNED

CONTACT.EXE

LET'S COLLABORATE_

NABILAHBUNGASULISTIA

ABOUT.ME

DOTRACK — SOFTWARE DESIGN DOCS

✓ DOTRACK

📱 INTERACTIVE PROTOTYPE — DOTRACK

🖼 UI SCREENS — DOTRACK

01 // INTRODUCTION

MANAJEMEN TUGAS

FOKUS TERSTRUKTUR

AGENDA VISUAL

TRACKING PRODUKTIVITAS

👥 USER PERSONA

📌 USER JOURNEY MAP

02 // SYSTEM BEHAVIOUR

03 // SOFTWARE ARCHITECTURE (MVC)

🎨 DESIGN SYSTEM

📋 PROJECT OVERVIEW

📈 PROJECT IMPACT

📚 LESSONS LEARNED

CONTACT.EXE

LET'S COLLABORATE_

NABILAH
BUNGA
SULISTIA