3.2 Perancangan Aplikasi
3.2.2 Perancangan Story Board
3.2.3.1 Perancangan Story Board Mobile
Perancangan layar aplikasi ini merupakan perancangan layar
Graphic User Interface (GUI) yang berisi menu-menu dari aplikasi
antrian berbasis mobile yang dapat diakses oleh customer. Perancangan layar yang tersedia adalah sebagai berikut:
Gambar 3.11 Perancangan Layar Log In
Perancangan layar Log In terdiri dari:
• Logo aplikasi
• EditText Username, untuk input username customer yang
telah terdaftar.
• Password, untuk input password customer yang telah terdaftar.
• Button Log In, untuk mengecek apakah username dan password telah sesuai dan proses masuk ke layar utama Home.
• Button Don’t have account? Sign Up here, untuk
menampilkan layar Sign Up bagi customer yang belum melakukan pendaftaran.
B. Perancangan Layar Sign Up
Gambar 3.12 Perancangan Layar Sign Up
Perancangan layar Sign Up terdiri dari:
• Logo aplikasi
• EditText Name, untuk memasukan nama customer yang akan
membuat account.
• Password, untuk memasukan password yang customer
inginkan.
• Confirm Password, untuk mengkonfirmasi kesamaan bahwa password yang diisi sebelumnya telah benar.
• EditText Email, untuk memasukan email yang dimiliki oleh customer.
C. Perancangan Layar Sign Up 2
Gambar 3.13 Perancangan Layar Sign Up 2
Perancangan layar Sign Up 2 terdiri dari:
• EditText Phone Number, untuk memasukan nomor
telephone yang dimiliki oleh customer.
• DatePicker Month, Date, dan Year, untuk memungkinkan customer untuk mengisi tanggal, bulan, dan tahun
kelahirannya.
• RadioButton Male dan Female, agar customer dapat
memilih jenis kelamin pria atau wanita.
• Button Submit, untuk mengecek data yang di input telah
benar agar customer bisa terdaftar dengan sukses.
D. Perancangan Layar Sign Up Confirmation
Gambar 3.14 Perancangan Layar Sign Up Confirmation
Perancangan layar Sign Up Confirmation terdiri dari:
• Logo aplikasi
• TextView Name, Password, Email, Phone Number, Birth Date, Gender, Address untuk menampilkan data diri yang
telah di input oleh customer saat melakukan Sign Up.
• Button Submit, untuk mengkonfirmasi bahwa data yang
ditampilkan di layar Sign Up Confirmation telah sesuai agar customer bisa terdaftar dengan sukses.
E. Perancangan Layar Sign Up Confirmation 2
Gambar 3.15 Perancangan Layar Sign Up Confirmation 2
Perancangan layar Sign Up Confirmation 2 terdiri dari:
• AlertDialogue Confirm, untuk memberi peringatan apakah customer ingin menyimpan profile berdasarkan data yang
telah di input.
• Button Yes, untuk memastikan bahwa customer setuju
bahwa data profile yang di input telah sesuai.
• Button Cancel, untuk membatalkan data profile yang telah
di input namun customer akan langsung merubah data kembali.
• Button No, untuk membatalkan data profile yang telah di input.\
F. Perancangan Layar Sign Up Success
Gambar 3.16 Perancangan Layar Sign Up Success
Perancangan layar Sign Up Success terdiri dari:
• Progress Dialogue Loading, untuk menampilkan data sedang
di proses
• Toast Registration Success, untuk memberitahukan kepada customer bahwa pendaftaran profile-nya telah sukses.
G. Perancangan Layar Home
Gambar 3.17 Perancangan Layar Home
Perancangan layar Home terdiri dari:
• Logo aplikasi
• Terdapat kata sambutan disertai username yang sedang membuka apilkasi di sisi kanan atas.
• Spinner Instance Name, agar customer dapat memilih
Instansi yang akan dikunjungi.
• GridView Pick Queue Number, agar customer dapat
mengambil nomor antrian.
• GridView My Profile, agar customer dapat melihat profile
dirinya sendiri.
• GridView My Queue, agar customer dapat melihat antrian
• GridView Call the Customer Service, agar customer dapat
menelepon customer service.
• GridView About Us, agar customer dapat melihat profile
aplikasi.
H. Perancangan Layar Select The Instance
Gambar 3.18 Perancangan Layar Select The Instance
Perancangan layar Select The Instance terdiri dari:
• Spinner Instance Name, untuk memudahkan customer
I. Perancangan Layar Pick Queue Number
Gambar 3.19 Perancangan Layar Pick QueueNumber
Perancangan layar Pick Queue terdiri dari:
• Logo aplikasi
• TextView Instance Name, untuk menampilkan instansi
yang telah dipilih sebelumnya.
• TextView Queue Number, untuk menampilkan nomor
antrian yang tersedia.
• Toast Your queue number has been added, Go to My queue menu to see All your queue number untuk
memberitahukan bahwa nomor antrian telah terdaftar.
• Button Ok, untuk membuka layar berikutnya yaitu Pick Queue Number and Time Estimation.
J. Perancangan Layar Pick Queue Number and Time Estimation
Gambar 3.20 Perancangan Layar Pick Queue Number and Time Estimation
Perancangan layar Pick Queue Number and Time Estimation terdiri dari:
• Logo aplikasi
• TextView Instance Name, untuk menampilkan instansi
yang telah dipilih sebelumnya.
• TextView Queue Number, untuk menampilkan nomor
antrian yang tersedia.
• Time Estimation, untuk menampilkan perkiraan waktu
nomor antrian akan dipanggil.
K. Perancangan Layar Pick Queue Number Validate
Gambar 3.21 Perancangan Layar Pick Queue Number Validate
Perancangan layar Pick Queue Number Validate terdiri dari:
• Logo aplikasi.
• TextView Instance Name, untuk menampilkan instansi
yang telah dipilih sebelumnya.
• TextView ! (Alert), untuk menampilkan bahwa nomor
antrian tidak bisa diambil.
• Toast You can pick queue number after 1 minute, untuk
memberitahukan bahwa customer dapat mengambil nomer antrian berikutnya setelah 1 menit.
L. Perancangan Layar My Profile
Gambar 3.22 Perancangan Layar My Profile
Perancangan layar My Profile terdiri dari:
• Logo aplikasi
• TextView Name, Email, Phone Number, Birth Date, Gender, dan Address, untuk menampilkan customer profile.
• Button Edit Profile, untuk mengubah customer profile. • Button Change Password, untuk mengubah password
M. Perancangan Layar Edit Profile
Gambar 3.23 Perancangan Layar Edit Profile
Perancangan layar Edit Profile terdiri dari:
• Logo aplikasi.
• EditText Name, untuk memasukan nama baru customer yang
akan diganti.
• Password, untuk memasukan password yang customer miliki
sebelumnya.
• Confirm Password, untuk mengkonfirmasi kesamaan bahwa password yang diisi sebelumnya telah benar.
• EditText Email, untuk memasukan email yang dimiliki oleh customer.
N. Perancangan Layar Edit Profile 2
Gambar 2.24 Perancangan Layar Edit Profile 2
Perancangan layar Edit Profile 2 terdiri dari:
• EditText Phone Number, untuk memasukan nomor telepon
yang dimiliki oleh customer.
• DatePicker Month, Date, dan Year, untuk memungkinkan customer untuk mengisi tanggal, bulan, dan tahun
kelahirannya.
• RadioButton Male dan Female, agar customer dapat
memilih jenis kelamin pria atau wanita.
• EditText Address, agar customer dapat memasukan alamat. • Button Submit, untuk mengecek data yang di input telah
O. Perancangan Layar Edit Profile Confirmation
Gambar 3.25 Perancangan Layar Edit Profile Confirmation
Perancangan layar Edit Profile Confirmation terdiri dari:
• AlertDialogue Confirm, untuk memberi peringatan apakah
customer ingin menyimpan profile berdasarkan data yang
telah di input.
• Button Yes, untuk memastikan bahwa customer setuju
bahwa data profile yang di input telah sesuai.
• Button Cancel, untuk membatalkan data profile yang telah
di input namun customer akan langsung merubah data kembali.
• Button No, untuk membatalkan data profile yang telah di input.
P. Perancangan Layar Edit Profile Success
Gambar 3.26 Perancangan Layar Edit Profile Success
Perancangan layar Edit Profile Success terdiri dari:
• Progress Dialogue Loading, untuk menampilkan data
sedang diproses.
• Toast Your profile has been changed, untuk
memberitahukan kepada customer bahwa profile-nya telah diubah.
Q. Perancangan Layar Change Password
Gambar 3.27 Perancangan Layar Change Password
Perancangan layar Change Password terdiri dari:
• EditText Old Password, agar customer bisa memasukan
password lama.
• EditText New Password, agar customer bisa memasukan
password baru.
• EditText Confirm New Password, agar customer bisa
mengkonfirmasi password baru.
• Button Submit, untuk mengecek data yang di input telah
benar agar perubahan password yang dilakukan customer bisa terdaftar dengan sukses.
R. Perancangan Layar Change Password Confirmation
Gambar 3.28 Perancangan Layar Change Password Confirmation
Perancangan layar Change Password Confirmation terdiri dari:
• AlertDialogue Confirm, untuk memberi peringatan apakah customer ingin menyimpan profile berdasarkan data yang
telah di input.
• Button Yes, untuk memastikan bahwa customer setuju
bahwa password yang di input telah sesuai.
• Button Cancel, untuk membatalkan password yang telah
di input namun customer akan langsung merubah data kembali.
• Button No, untuk membatalkan password yang telah di input.
S. Perancangan Layar Change Password Success
Gambar 3.29 Perancangan Layar Change Password Success
Perancangan layar Change Password Success terdiri dari:
• ProgressDialogue Loading, untuk menampilkan data
sedang diproses.
• Toast Your profile has been changed, untuk memberitahukan kepada customer bahwa profile-nya telah diubah.
T. Perancangan Layar My Queue
Gambar 3.30 Perancangan Layar My Queue
Perancangan layar My Queue terdiri dari:
•Logo aplikasi
•TextView Instance Name 1, untuk menampilkan nama
instansi pertama yang telah dipilih.
•TextView Instance Name n, untuk menampilkan nama
instansi yang dipilih selanjutnya karena customer dapat memesan nomor antrian di lebih dari 1 Instansi.
•TextView Recent Queue Number, untuk menampilkan
nomor antrian yang sedang berjalan.
•TextView My Queue Number n, untuk menampilkan
•TextView Status, untuk menampilkan status antrian.
Terdapat 3 status yaitu, “waiting”, “on service” dan “done”. Status “waiting” akan muncul ketika nomer antrian customer belum dipanggil. Status “on service” akan muncul ketika nomor antrian customer sedang dilayani oleh customer service. Status “done” akan muncul ketika nomor antrian telah dilayani oleh
customer service ataupun terlewat.
U. Perancangan Layar Set Notification and Time Estimation
Gambar 3.31 Perancangan Layar Set Notification and Time Estimation
Perancangan layar Set Notification and Time Estimation terdiri dari:
• TextView Instance Name, untuk menampilkan nama
Instansi yang telah dipilih.
• TextView In this feature you can activate your queue number of each instance that you have picked, untuk
memberi tahu bahwa fitur ini berguna untuk membantu
customer mengaktifkan notifikasi.
• TextView Your Number, untuk menampilkan nomor
antrian yang customer miliki.
• TextView Time Estimation, untuk menampilkan perkiraan
waktu nomor antrian customer akan dipanggil.
• Button Set Notification, untuk mengaktifkan notifikasi.
V. Perancangan Layar Set Notification Success
Perancangan layar Set Notification Success terdiri dari:
• Toast Notification for this instance has been switched on,
untuk memberitahu customer bahwa notifikasi untuk instansi yang bersangkutan telah diaktifkan.
W. Perancangan Layar Show Notification
Gambar 3.33 Perancangan Layar Show Notification
Perancangan layar Show Notification terdiri dari:
• TextView Date, untuk menampilkan tanggal • TextView Time, untuk menampilkan waktu. • Logo q-mobile
• TextView n number left, untuk menampilkan berapa orang
yang harus dilewati sebelum nomer antrian customer dipanggil.
X. Perancangan Call to Customer Service
Gambar 3.34 Perancangan Call to Customer Service
Perancangan layar Call to Customer Service terdiri dari:
• Instance Customer Service Number, untuk menampilkan
nomor telepon customer service sesuai dengan instansi yang di pilih sebelumnya.
• Keyboard Phone Number, untuk mengetik nomer telepon
Instansi, namun jika pada nama Instansi sudah dipilih pada layar Menu, maka nomer telepon pada Customer Service akan muncul secara otomatis.
• Button Call, untuk melakukan panggilan ke nomor Instansi
yang berada pada layar.
Y. Layar Perancangan About
Gambar 3.35 Layar Perancangan About
Perancangan layar About terdiri dari:
• Logo aplikasi.
• TextView About, untuk memberitahukan bahwa layar yang
dibuka adalah layar About.
Z. Perancangan Layar Log Out
Gambar 3.36 Perancangan Layar Log Out
Perancangan layar Log Out terdiri dari:
• Option menu Log Out, agar customer bisa keluar dari
aplikasi dengan cara menekan tombol menu pada device.