1
LAPORAN
“Pengembangan Prototype User Interface Aplikasi Color Muse Menggunakan Metode
Design Thinking”
Diajukan Untuk Memenuhi Salah Satu Tugas Pada Mata Kuliah Desain Antar Muka
Oleh:
Bulan Purnama Sari (236651044) Dosen Pengampuh:
Subhan Hartanto, M.Kom
PROGRAM STUDI TEKNIK INFORMATIKA MULTIMEDIA JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI SAMARINDA
2025
2
KATA PENGANTAR
Puji dan syukur penulis panjatkan ke hadirat Allah SWT atas segala rahmat dan karunia-Nya, sehingga laporan yang berjudul “Pengembangan Prototype User Interface Aplikasi ColorMuse Menggunakan Metode Design Thinking” ini dapat diselesaikan dengan baik.
Laporan ini disusun sebagai bagian dari proses pembelajaran dalam merancang antarmuka aplikasi dengan pendekatan Design Thinking. Aplikasi ColorMuse dibuat untuk membantu pengguna dalam menemukan dan memilih kombinasi warna secara mudah dan sesuai dengan preferensi mereka.
Penulis menyadari bahwa laporan ini masih memiliki kekurangan, baik dari segi isi maupun penyampaian. Oleh karena itu, penulis sangat terbuka terhadap kritik dan saran yang membangun demi perbaikan di masa mendatang.
Ucapan terima kasih disampaikan kepada semua pihak yang telah memberikan dukungan dan masukan selama proses penyusunan laporan ini, serta kepada rekan-rekan yang ikut membantu dalam proses pengembangan prototype.
Akhir kata, semoga laporan ini dapat memberikan manfaat serta menjadi tambahan referensi bagi siapa saja yang tertarik dalam pengembangan antarmuka pengguna dan desain aplikasi.
Samarinda, 17 Mei 2025
Penulis
3
DAFTAR ISI
BAB I PENDAHULUAN ... 4
1.1 Latar belakang ... 4
1.2 Tujuan ... 4
1.3 Ruang Lingkup ... 4
BAB II METODE DESIGN THINKING ... 5
2.1 Empathize (Empati) ... 5
2.2 Define (Menentukan Masalah) ... 5
2.3 Ideate (Mengembangkan Ide) ... 5
2.4 Gambar Wireframe ... 5
2.45Prototype... 6
2.6 Gambar Prototype ColorMuse ... 6
2.7 Test (Pengujian) ... 9
BAB III DATA FLOW DIAGRAM LEVEL 2 ... 11
4.1 DFD Level 2 – Proses Aplikasi ColorMuse ... 11
4.2 Gambar DFD Level 2 ... 12
BAB IV KESIMPULAN ... 13
5.1 Kesimpulan ... 13
5.2 Saran ... 13
4
BAB I
PENDAHULUAN
1.1 Latar Belakang
Dalam dunia desain grafis dan industri kreatif, pemilihan warna yang tepat menjadi salah satu aspek penting untuk menghasilkan karya visual yang menarik dan harmonis. Namun, tidak semua pengguna, baik desainer pemula maupun profesional, memiliki kemampuan memilih kombinasi warna yang sesuai. Oleh karena itu, dibutuhkan sebuah solusi digital berupa aplikasi yang dapat membantu pengguna mendapatkan rekomendasi palet warna yang relevan. Aplikasi ColorMuse dikembangkan sebagai jawaban atas kebutuhan tersebut.
1.2 Tujuan
Tujuan dari pengembangan prototype ini adalah untuk merancang antarmuka pengguna (User Interface) aplikasi ColorMuse menggunakan metode Design Thinking agar memudahkan pengguna dalam mencari, menyimpan, dan membagikan kombinasi palet warna yang sesuai dengan kebutuhan mereka.
1.3 Ruang Lingkup
Ruang lingkup laporan ini mencakup proses pengembangan prototype UI aplikasi ColorMuse melalui pendekatan Design Thinking, mulai dari tahap empati terhadap kebutuhan pengguna, perumusan masalah, pencarian ide, pembuatan prototype, hingga pengujian awal. Selain itu, laporan ini juga mencakup visualisasi Data Flow Diagram (DFD) Level 2 untuk mendukung proses teknis aplikasi.
5
BAB II
METODE DESIGN THINKING
2.1 Empathize (Empati)
Tahap ini bertujuan untuk memahami kebutuhan, perilaku, dan tantangan yang dihadapi oleh pengguna Color Muse. Proses ini dilakukan melalui observasi dan wawancara kepada beberapa pengguna yang mengalami kesulitan dalam memilih kombinasi warna. Ditemukan bahwa banyak pengguna merasa bingung dan tidak yakin saat menentukan warna yang sesuai untuk proyek desain mereka. Selain itu, diperoleh beberapa temuan tambahan sebagai berikut:
• Pengguna menginginkan akses cepat terhadap palet warna yang mudah digunakan.
• Pengguna membutuhkan inspirasi warna berdasarkan mood, tema, atau tren terkini.
• Beberapa pengguna ingin menyimpan, mengunduh, atau membagikan palet warna favorit mereka secara praktis.
• Pengguna menginginkan kemudahan dalam mengelola profil tanpa proses yang rumit.
• Beberapa pengguna membutuhkan informasi warna yang lengkap (CMYK, RGB, HEX) secara langsung agar dapat digunakan sesuai kebutuhan media digital maupun cetak.
2.2 Define (Menentukan Masalah)
Setelah melakukan analisis dari hasil tahap empati, dapat dirumuskan masalah utama yang dialami pengguna dalam bentuk pernyataan masalah sebagai berikut:
Problem Statement
Pengguna Color Muse, khususnya desainer grafis dan kreator visual, membutuhkan sebuah platform yang mampu:
• Memfasilitasi pencarian dan akses palet warna dengan cepat dan efisien
• Memberikan inspirasi warna berdasarkan mood, tema, dan tren visual terkini
• Memungkinkan penyimpanan, pengunduhan, serta pembagian palet warna favorit secara praktis
• Menyediakan pengelolaan akun yang sederhana dan tidak memakan waktu
• Menampilkan informasi warna secara lengkap (CMYK, RGB, HEX) dalam satu tampilan, tanpa perlu menggunakan alat bantu eksternal
6 2.3 Ideate (Mengembangkan Ide)
Berdasarkan permasalahan yang telah didefinisikan, dikembangkan berbagai ide solusi seperti:
• Menyediakan opsi login/sign up cepat melalui akun Google, Apple, atau Email.
• Menyediakan fitur filter palet berdasarkan kategori: Popular, New, Random, serta pencarian berdasarkan kata kunci.
• Memberikan opsi untuk menyimpan, mengunduh, dan membagikan palet warna.
• Menambahkan fitur Account Details sebagai pusat pengelolaan akun, di mana pengguna
dapat mengubah nama pengguna, mengganti/menghapus/mengunggah foto profil, serta memperbarui informasi akun dengan mudah.
• Menyediakan informasi warna secara lengkap dan langsung terlihat (CMYK, RGB, HEX).
2.4 Gambar Wireframe ColorMuse
7 2.5 Prototype
2.6 Gambar Prototype ColorMuse
Prototype dirancang menggunakan Figma. Dalam prototype terdapat tampilan login, sign up, halaman utama dengan daftar palet warna, serta fitur lainnya seperti search, save, download, copy link, dan koleksi pribadi pengguna.
• Frame 1 – Splash Screen
Tampilan awal yang menampilkan logo Color Muse saat aplikasi dibuka pertama kali.
• Frame 2 – Welcome/Login Options
Tampilan sambutan dengan pilihan login: Google, Apple, atau Email.
• Frame 3 – Login with Email
Pengguna memasukkan email untuk melanjutkan login.
• Frame 4 – Check Your Inbox (Login)
Konfirmasi bahwa email verifikasi telah dikirim ke pengguna untuk login.
• Frame 5 – Join Color Muse (Sign Up Options)
Opsi mendaftar akun baru dengan Google, Apple, atau Email.
• Frame 6 – Sign Up with Email
8 Pengguna memasukkan email untuk mendaftar akun.
• Frame 7 – Check Your Inbox (Sign Up)
Konfirmasi bahwa email verifikasi telah dikirim untuk menyelesaikan pendaftaran.
• Frame 8 – All Palettes
Menampilkan semua palet warna yang tersedia.
• Frame 9 – New Color Palettes
Palet warna terbaru yang ditambahkan.
• Frame 10 – Popular Color Palettes
Palet warna paling populer atau paling sering digunakan.
• Frame 11 – Random Color Palettes
Menampilkan palet warna secara acak dari koleksi.
• Frame 12 – My Collection (Kosong)
Menampilkan pesan bahwa pengguna belum menyimpan palet apa pun.
• Frame 13 – Detail Palet
Menampilkan detail warna dari sebuah palet (kode warna, keyword, tombol save, download, copy link, dll).
• Frame 14 – Filter Palet (Keyword Search)
Fitur pencarian dengan berbagai keyword warna seperti "blue", "warm", dll.
• Frame 15 – Account Popup
Menampilkan profil pengguna dan tombol logout.
• Frame 16 – Hasil Pencarian (Search Result)
Menampilkan hasil pencarian palet berdasarkan keyword seperti "Blue".
• Frame 17 – My Collection (Berisi)
Menampilkan palet-palet yang telah disimpan oleh pengguna.
• Frame 18 – Account Details
Menampilkan data akun pengguna seperti email dan username, serta tombol untuk mengubah akun.
• Frame 19 – Opsi Edit Photo
Menampilkan pilihan untuk unggah foto dari galeri, ambil foto baru, atau hapus foto.
9
• Frame 20 – Email Info Popup
Menampilkan alamat email akun saat ini.
• Frame 21 – Edit Username
Pengguna dapat mengubah username dengan tombol “Save”.
• Frame 22 – Confirm Change Account
Konfirmasi akhir jika pengguna ingin mengubah akun.
2.7 Test (Pengujian)
Prototipe yang telah dibuat kemudian diuji coba kepada sejumlah pengguna untuk mendapatkan umpan balik terkait kemudahan penggunaan, kelengkapan fitur, dan pengalaman secara keseluruhan. Hasil uji coba menunjukkan bahwa:
• Proses login/sign up sangat cepat dan efisien, tanpa memerlukan kata sandi.
• Fitur filter sangat membantu pengguna dalam mempersempit pilihan palet sesuai kebutuhan.
• Penyimpanan palet dilakukan dengan sangat mudah melalui satu kali klik.
• Pengelolaan akun dapat dilakukan dengan cara yang sederhana dan tidak membingungkan.
• Informasi warna dapat langsung disalin dan digunakan di aplikasi desain lain dengan praktis.
10 BAB III
DATA FLOW DIAGRAM LEVEL 2
4.1 DFD LEVEL 2 – PROSES APLIKASI COLORMUSE Proses 1: Login / Sign Up
• Input: Pengguna mengirimkan kredensial (email dan password atau melalui Google/Apple).
• Proses: Sistem melakukan verifikasi terhadap database pengguna.
• Output: Menampilkan hasil autentikasi. Jika berhasil, pengguna masuk ke sistem.
Proses 2: Eksplorasi Palet
• Input: Pengguna memilih kategori palet (misalnya merah, biru, hijau, dll).
• Proses: Sistem mengambil data palet dari Database Palet berdasarkan kategori yang dipilih.
• Output: Menampilkan daftar palet yang sesuai kepada pengguna.
Proses 3: Simpan ke Favorit
• Input: Pengguna memilih palet untuk disimpan.
• Proses: Sistem menyimpan data palet tersebut ke dalam Database Favorit Pengguna.
• Output: Memberikan notifikasi bahwa palet telah berhasil disimpan.
Proses 4: Pencarian Palet
• Input: Pengguna memasukkan kata kunci atau kode warna tertentu.
• Proses: Sistem mencari palet sesuai data input dan mengambil data dari Database Palet.
• Output: Menampilkan hasil pencarian palet yang relevan.
Proses 5: Sistem Log Out
• Input: Pengguna mengklik tombol Logout.
• Proses: Sistem menghapus sesi pengguna dan menghapus data sesi dari sistem.
• Output: Menampilkan konfirmasi bahwa pengguna telah keluar dari akun.
11 4.2 Gambar DFD Level 2
12 BAB IV
KESIMPULAN 5.1 Kesimpulan
Pengembangan prototype aplikasi ColorMuse dengan metode Design Thinking berhasil merancang solusi bagi pengguna yang kesulitan menentukan kombinasi warna. Fitur eksplorasi palet (new, popular, random), pencarian berdasarkan kategori, serta desain antarmuka melalui Figma dinilai efektif dan mudah digunakan. Tahapan Empathize hingga Test membantu memahami kebutuhan pengguna secara mendalam, dan hasil uji coba menunjukkan prototype ini sesuai harapan.
5.2 Saran
Untuk pengembangan lebih lanjut, disarankan menambahkan fitur seperti:
• Image to palette atau saran warna berbasis AI.
• Pembuatan palet warna secara manual.
• Pengujian teknis lebih lanjut saat aplikasi dikembangkan ke platform web/mobile, guna memastikan fungsi seperti login, pencarian, dan penyimpanan berjalan optimal dan aman.
