Perancangan Antarmuka Pengguna untuk Aplikasi VetCare

Perancangan Antarmuka Pengguna untuk Aplikasi VetCare

Challange :

            Rancanglah antarmuka pengguna aplikasi berbasis mobile atau web lengkap yang mempertemukan pemilik hewan dengan dokter hewan panggilan. Dalam sistem ini dokter hewanlah yang akan menghampiri rumah pasien bukan sebaliknya. Ada tiga user dalam sistem yang dirancang yaitu admin, dokter hewan, dan pemilik hewan.

Form yang dibuat :

a)      Halaman log in

b)      Form pendaftaran sebagai dokter hewan atau pemilik hewan

c)      Dashboard dan rancang menu apa saja yang dibutuhkan pada tiap user

d)     Form pencarian dokter hewan terdekat untuk user pemilik hewan

e)      Agar dokter bisa mempersiapkan apa saja yang harus dibawa ke rumah pasien, buat juga form yang mengakomodir gejala sakit hewan yang bisa diisi oleh pemilik.

1.      Launch Aplikasi

 

Aplikasi yang saya rancang bernama VetCare. Apabila kita menjalankan aplikasi ini tampilan awal yang akan terbuka yaitu tampilan ini. Aplikasi ini cukup mudah untuk digunakan dan cukup membantu para pemilik hewan berinteraksi dengan dokter hewan yang berada disekitar rumahnya.

2.      Halaman Log in

 

Ini merupakan tampilan halaman login dari aplikasi VetCare. Pada halaman login ini hanya terdiri dari dua borang yang harus diisi yaitu borang email dan borang password. Apabila kita belum memiliki akun VetCare kita bisa mengklik button Buat Akun dan kita akan masuk ke tampilan halaman seperti di bawah ini.

3.      Form Pendaftaran

Pada form pendaftaran ini terdapat 2 jenis form yaitu form pendaftaran sebagai Dokter Hewan atau sebagai pemilik hewan.

a. Daftar sebagai Dokter Hewan

 

Jika kita mengakses form pendaftaran sebagai Dokter Hewan maka tampilan yang akan ditampilkan yaitu sebagai gambar diatas. Untuk borang nya sendiri pada form pendaftaran sebagai Dokter Hewan itu lebih banyak dibanding sebagai Pemilik Hewan. Dikarenakan nanti pada saat pencarian dokter hewan, biodata masing-masing dokter hewan akan ditampilkan kepada pemilik hewan agar memudahkan pemilik hewan dalam memilih dokter hewannya sesuai pengalaman dan kebutuhannya. Setelah diisi semuanya maka user akan diarahkan ke dashboard.

b.      Daftar sebagai Pemilik Hewan

 

Sedangkan ini adalah tampilan form pendaftaran sebagai Pemilik Hewan. Pada form ini tidak terlalu banyak borang yang harus diisi, dikarenakan pemilik hewan yang mempunyai akses untuk mencari dokter hewan dan menghubungi dokter hewan yang dibutuhkan untuk mengobati hewan peliharaannya. Para pemilik hewan cukup mengisi borang nama, email, no telepon, dan password. Setelah diisi semuanya maka user akan diarahkan ke dashboard dengan tampilan seperti pada penjelasan berikutnya.

  

4.      Dashboard

 

Ini adalah tampilan dashboard dari aplikasi VetCare. Dimana pada dashboard ini terdapat empat menu pilihan yang dapat dipilih yaitu menu Profil, Cari Dokter, Riwayat Pemeriksaan, dan Keluar. Dimana penjelasan dari masing-masing menu akan dijelaskan sebagai berikut :

a.      Profil

 

Ini adalah tampilan menu profil dari aplikasi VetCare. Pada menu ini terdapat data pribadi dari user semisal nama, email, no telepon, dan foto profil yang sudah di upload oleh user. Tidak hanya itu saja pada menu ini kita juga bisa mengganti kata sandi, mengubah bahasa, membaca ketentuan layanan dan kebijakan dari aplikasi ini, dan juga memberi nilai untuk aplikasi ini.

b.      Cari Dokter

 

Menu selanjutnya yaitu menu cari dokter, yang mana pada menu inilah merupakan inti dari aplikasi VetCare ini sendiri. Saat kita mengakses menu cari dokter ini kita akan masuk pada halaman pencarian dokter berdasarkan lokasi user. Tampilannya yaitu seperti gambar diatas dimana user diminta untuk memasukkan lokasi user berada atau jika layanan lokasi pada handphone telah aktif maka aplikasi akan mengkases sendiri lokasi dari user. Dan juga seperti gambar diatas kita juga bisa langsung menghubungi dokter hewan berdasarkan riwayat dokter yang telah kita hubungi. Setelah user memasukkan lokasi maka aplikasi akan mencari dokter hewan dengan lokasi terdekat dengan lokasi user.

Ini adalah tampilan saat aplikasi mencari dokter hewan terdekat dengan lokasi user berada.

 

 

Setelah aplikasi selesai mencari dokter hewan terdekat, tampilan Cari dokter akan berubah seperti gambar diatas. Dimana seeprti gambar diatas kita dapat melihat ada emapt dokter hewan yang terdekat dengan lokasi user. Dan juga nanti akan ditampilkan nama dokter hewan, alamat, dan jarak nya seperti gambar diatas. Jadi kita bisa memilih sesuai pilihan kita.

Selanjutnya ini adalah tampilan dari Dokter Hewan yang telah kita pilih. Pada halaman ini kita bisa melihat biodata singkat dari Dokter Hewan yang kita pilih. Apabila kita tidak terlalu suka dengan dokternya kita bisa menekan tombol back di pojok kiri atas dan kita akan kembali ke halaman map sebelumnya. Apabila kita merasa suka dan cocok dengan dokter hewannya kita bisa langsung menghubungi dokternya dengan pilihan menu chat, konsultasi, dan telepon seperti yang ada pada gambar diatas. Penjelasan masing-masing form akan dijelaskan sebagai berikut.

 

Ini merupakan tampilan menu chat dari halaman sebelumnya. Dimana pada menu ini kita bisa berkonsultasi atau bertanya-tanya mengenai masalah yang sedang kita hadapi. User juga bisa meminta langsung dokter hewan untuk datang ke rumah user, namun biasanya apabila dokter telah menyetujui maka dokter akan memberikan instruksi agar user mengisi gejalan yang ada pada hewan peliharaanya pada menu konsultasi.

Dan ini merupakan tampilan pada form konsultasi. Pada form ini terdiri dari beberapa borang yang dapat diisi diantaranya jenis hewan, usia hewan, jenis kelamin hewan, keluhan, dan juga user bisa mengupload foto kondisi dari hewan peliharaaannya untuk memudahkan dokter dalam mengoabati hewan peliharaan user. Dan juga pada form ini sudah termasuk lokasi user, jadi saat user mengirim data tersebut kepada dokter hewannya, dokter hewan bisa langsung mengakses lokasi dari user akan dikunjungi.

Selanjutnya ini adalah tampilan dari menu telepon. Tidak hanya chat kita juga bisa langsung menghubungi dokter hewan melalui telepon, dan kita akan langsung terhubung dengan dokter hewan pilihan kita. Seperti pada gambar diatas kita akan langsung masuk ke tampilan telepon saat mengakses menu tersebut.

c.       Riwayat Pemeriksaan

 

Ini adalah tampilan dari menu Riwayat Pemeriksaan. Pada menu ini kita akan ditampilkan dengan macam-macam konsultasi yang pernah kita lakukan apda satu tahun terakhir. Seperti pada gamabr diatas kita bisa melihat pada tanggal dan bulan apa kita pernah berkonsultasi dengan dokter hewan pilihan kita

d.      Keluar

 

Dan yang terkahir adalah menu keluar. Apabila kita mengakses menu ini maka kita akan diarahkan apda halaman Log in. Jika kita tidak hanya ingin keluar saja dari aplikasi VetCare bukan ingin keluar dari akun VetCare kita hanya cukup menekan tombol button home pada handphone kita.

·         Deskripsi komponen yang digunakan pada perancangan

No	Item	Komponen	Keterangan
1.	Judul	Label	Memberikan judul pada aplikasi
2.	Button	Icon dan label	Memberi perintah atau masuk kehalaman selanjutnya dengan mengklik tombolnya.
3.	Foto	Image	Untuk memberikan foto pada form.
4.	Menu	Label, icons, shape	Untuk masuk ke halaman selanjutnya.
5.	Borang	Text Input	Untuk mengisi data yang harus diisi