Laporan Project Human and Computer Interaction

-

Aedentrisa Yasmanda Paulindino - 2301952943 


BINUS PEDULI


I. Topic Project

Project prototype website yang sudah kami buat mengambil topik “Empowering the Society”. Alasan kami memilih topik ini dikarenakan pada masa sekarang, masih banyak orang yang kesulitan, baik dari segi fisik maupun ekonomi. Selain itu pula, pada masa pandemic COVID-19 sekarang, semakin banyak orang yang membutuhkan uluran tangan sesamanya untuk bertahan hidup. Belum lagi, akhir-akhir ini sering terjadi bencana alam seperti gempa, longsor, banjir, dan lain sebagainya.

Oleh karena itu, melalui project ini, kami ingin mengutarakan ide yang sudah kami bahas bersama, dimana ide ini dapat menjadi pertimbangan bagi pihak BINUS untuk mengatasi masalah sosial yang terjadi.

II. Tools

Pembuatan project ini menggunakan tools “Figma”.

III. User Interface

Prototype website yang sudah kami buat bernama “Binus Peduli”. Dimana pada prototype website tersebut terdapat beberapa menu yang di dalamnya mengandung header, content dan footer.

Berikut kami lampirkan gambar UI dari prototype website yang sudah kami buat beserta penjelasannya:

- Trending



Pada menu “Trending”, terdapat navigation bar yang berisi berbagai pilihan menu dalam website. Selain itu, website ini juga memiliki content yang berisi sebuah hero section terkait kampanye yang sedang ramai diikuti oleh banyak orang.

Hero section ini mengandung ajakan bagi mereka yang mengakses website, untuk ikut berpartisipasi dalam campaign tersebut. Dibawah hero section terdapat donation card yang akan mengarahkan user ke page campaign yang sedang diadakan.

- Stories



Pada menu “Stories”, terdapat berbagai artikel terkait informasi seputar campaign, baik itu artikel dengan topik yang sedang trending, success stories, top fundraisers dan features card yang menampilkan berbagai pilihan artikel lainnya.

Berikut kami lampirkan di halaman selanjutnya, bentuk full UI apabila artikel sudah dipilih. Silahkan di zoom untuk melihat lebih jelas gambar UInya.



- How it Works dan About Us



Pada menu “How it Works” berisi cara kerja dari website “Binus Peduli” jika user ingin berpartisipasi atau mengadakan suatu campaign.

Di dalam menu ini, terdapat langkah- langkah cara memulai penggalangan dana, mengatur donasi dan cara membagikan campaign yang sedang diadakan ke teman.

Selain itu, dalam website “Binus Peduli” tedapat menu “About Us” yang berisi visi, misi, komitmen dan kebijakna dari “Binus Peduli” dan quote section.

- Profile


Pada menu “Profile” terdapat bar-bar yang dapat diisi oleh user untuk melengkap data diri. Data diri tersebut seperti, foto profile, nama lengkap, tanggal lahir, email, nomor ponsel, dan user juga dapat menambahkan bio.

Dalam tampilan UI tersebut juga terdapat tombol kembali dan tombol simpan.

- Donasi Saya


Pada menu “Donasi Saya”, terdapat content yang berisi informasi seberapa sering seorang user melakukan donasi. Informasi tersebut ditampilkan dalam bentuk kalender yang akan menandai kapan user melakukan donasi.

Selain itu pula, user dapat melihat riwayat donasi yang sudah dilakukan pada samping kalender.

- Daftar & Masuk (Register & Login)



Pada menu “Daftar”, terdapat sebuah form yang dapat diisi oleh user untuk akun Peduli” pendaftaran dapat dilakukan dengan cara melengkapi data pada gambar ataupun melalui akun google dan facebook.

Selain menu “Daftar”, website “Binus Peduli” juga memiliki menu “Masuk” untuk para user yang sudah memiliki akun “Binus Peduli”.

IV. User Experience

Setelah membuat prototype website “Binus Peduli”, kami mencoba menyebarkan prototype ini, untuk dicoba oleh beberapa orang demi mendapatkan sebuah feedback (User Experience).

Hasil yang kami peroleh mengenai user experience dari penggunaan prototype website ini terangkum dalam beberapa point, sebagai berikut:

  • Design prototype website simple dan minimalis, dimana pemilihan warna baik untuk text, background, icon, dan element lainnya sudah sangat pas.
  • Ukuran dan pemilihan font juga sudah dipilih dengan sangat baik, sehingga tidak menyulitkan user dalam membaca.
  • Navigasi pada prototype website berjalan dengan baik tanpa masalah (Loading, error, dll).
  • Penggunaan icon sudah sesuai dengan kegunaannya.
  • Prototype website bersifat informatif dan menarik, sehingga memudahkan user untuk langsung menggunakannya.

V. Flow Product

Product dari project yang sudah kami kerjakan ini adalah sebuah prototype website bernama “Binus Peduli”. Berikut dibawah ini, adalah alur atau flow dari product kami:

Saat user mengakses link prototype website “Binus Peduli” user akan langsung diarahkan ke menu “Trending” seperti yang ditunjukan kotak merah pada gambar di bawah ini.


User dapat memilih beberapa pilihan menu seperti yang ditunjukan kotak merah pada gambar di bawah ini, untuk ke halaman menu lainnya.


Apabila user memilih menu “Stories”, secara otomatis tampilan menu akan berubah sesuai dengan nama menu yang dipilih. Pada menu “Stories”, user dapat membaca artikel dengan menekan text “Read more ” seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Setelah user menekan text tersebut, user akan di bawa ke halaman detail artikel. Dan pada halaman detail artikel, user dapat membaca keseluruhan artikel dengan cara men-scroll halaman. Selain itu pula, user dapat kembali ke halaman utama awal dari menu “Stories” setelah menekan tombol “kembali”. User juga dapat memilih beberapa pilihan menu lainnya seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Selanjutnya, apabila user memilih menu “How it Works”, user akan dapat melihat informasi detail dari menu tersebut. Selain itu, user dapat memilih beberapa pilihan menu lainnya seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Apabila user memilih menu “About Us”, user secara otomatis akan dibawa kehalaman paling bawah dari menu “How it Works”. User juga dapat memilih beberapa pilihan menu seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Selanjutnya, apabila user memilih icon orang yang berada di samping icon search, secara otomatis, akan muncul pop up menu yang di dalamnya terdapat sub menu yang juga dapat dipilih user seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Apabila user memilih menu “Masuk”, maka user akan berpindah ke halaman pengisian form untuk masuk ke akun “Binus Peduli”. Setelah user mengisi kelengkapan form dan menekan tombol masuk, user akan langsung di arahkan ke halaman “Trending”. Selain itu juga user dapat menekan tombol kembali, apabila ingin membatalkan pilihan ataupun memilih menu lainnya seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Selanjutnya, apabila user memilih menu “Daftar”, maka user akan berpindah ke halaman form untuk membuat akun “Binus Peduli”. Setelah user mengisi kelengkapan form dan menekan tombol daftar, user akan langsung di arahkan ke halaman “Trending”. Selain itu juga user dapat memilih menu lainnya seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Apabila user memilih menu “Profile”, user akan dibawa ke halaman profile, dimana user dapat mengganti atau mengupload, menghapus dan menyimpan profile picture. Selain itu, apabila user ingin keluar dari halaman change profile, user dapat menekan simbol “X” seperti yang ditunjukan kotak merah pada gambar di bawah ini.


Selain itu pada menu “Profile”, user dapat melengkapi data diri dan menyimpannya. User dapat menekan tombol kembali, apabila ingin membatalkan pilihan. Selain itu pula, user dapat memilih menu lainnya seperti yang ditunjukan kotak merah pada gambar di bawah ini.

 
Sedangkan, apabila user memilih menu “Donasi Saya” user akan dibawa ke halaman informasi donasi yang sudah pernah dilakukannya, user dapat melihat list riwayat donasi dengan cara meng-scroll pada bagian “Riwayat Donasi”. Selain itu pula, user dapat menekan tombol kembali, apabila ingin kembali ke halaman sebelumnya ataupun memilih menu lainnya seperti yang ditunjukan kotak merah pada gambar di bawah ini.

Catatan:

- Seluruh sosial media pada bangian footer prototype webside dapat di tekan seperti yang ditunjukan kotak merah pada gambar di bawah ini.

 
 
Apabila user kehilangan koneksi saat membuka website “Binus Peduli” Secara otomatis seluruh halaman website, tidak akan bisa diakses dan akan muncul tampilan seperti gambar di bawah ini. 
 
 

Link

  • Link Prototype: https://www.figma.com/proto/cfHQBvTqoSp1TIy6tAAOFk/Binuspeduli.com?node- id=81%3A11&scaling=scale-down&page-id=0%3A1
  • Link Materi Presentasi Project Akhir: https://drive.google.com/file/d/1QM9M14LbMignLIzoc-qtClDsvfuWXtcg/view?usp=sharing
  • Link Dokumentasi Project Akhir: https://drive.google.com/file/d/1X3OpcBtgy4Zx9L4rawV3gbWFM9dKFflz/view?usp=sharing 

Komentar

Posting Komentar

Postingan populer dari blog ini

AVL Tree

-
Gambar
AVL TREE ---English Version--- Before we start to AVL Tree let's review Binary Search Tree (BST). Binary Search Tree This picture is the example of a skewed Binary Search Tree (BST). The left BST is inserted by 2, 5, 7, 8, and 13 respectively.  The right BST is inserted by 9, 1, 6, 3, and 4 respectively. AVL Tree AVL Tree is a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees cannot be more than one of all nodes. Height of a node: The height of an empty subtree is 0. The height of a leaf is 1. The height of an internal node is the maximum height of its children plus 1. Balance factor: The difference height of its LEFT subtree and its RIGHT subtree. The balance factor of all nodes in the AVL Tree should be at most 1. AVL Tree has two operations such as: 1. Insertion 2. Deletion AVL Tree Operation (Insertion) Look at the picture above, isn't it co...
Baca selengkapnya

Binary Search Tree

-
Gambar
Binary Tree Binary Tree adalah struktur data yang mirip dengan Linked List. Bila Linked List dianalogikan sebagai rantai yang linier maka Binary Tree dianalogikan sebagai pohon. Binary Tree dikelompokkan menjadi tree yang tidak berurut (unordered Binary Tree) dan tree yang terurut (ordered Binary Tree). Binary Tree dapat digambarkan berdasarkan kondisinya, yaitu:  Binary Search Tree (BST) merupakan tree yang terurut (ordered Binary Tree) yang memiliki kelebihan bila dibanding dengan struktur data lain. Diantaranya adalah proses pengurutan (sorting) dan pencarian (searching) dapat dilakukan bila data sudah tersusun dalam struktur data BST. Pengurutan dapat dilakukan bila BST ditelusuri (traversed) menggunakan metode in-order. Detail dari proses penelusuran ini akan dibahas pada pertemuan selanjutnya. Data yang telah tersusun dalam  struktur data BST juga dapat dicari dengan mudah dan memiliki rata-rata kompleksitas sebesar O(log n), namun membutuhkan waktu sebesar O(...
Baca selengkapnya

Heaps dan Tries

-
Gambar
Heaps dan Tries Heap Heap adalah struktur data berbasis pohon biner lengkap yang memenuhi properti heap. Heap properti terbagi menjadi 3 bagian yaitu Min-Heap, Max-Heap, dan Min-Max Heap. Mari kita bahas satu persatu seperti dibawah ini: Aplikasi Heap Priority Queue Selection Algorithms (menemukan elemen min / maks, median, elemen kth-terbesar, dll). Dijkstra’s Algorithm (menemukan jalur terpendek dalam grafik) Prim Algorithm (menemukan minimum spanning tree) Heap Sort An O(n.lg(n)) algorithm. Implementasi Array  Heap biasanya diimplementasikan didalam array. Elemen-elemen nya tersimpan secara berurutan adri index 1 sampai N dari atas sampai bawah dan dari kiri ke kanan dari node of the tree . Root tersimpan dari index 1 (kita biarkan index 0 kosong/tidak terpakai, demi kenyamanan) Setiap hubungan node dengan orang tuanya, anak kiri dan anak kanan dalam implementasi array dapat dihitung dengan mudah. Biarkan indeks simpul saat ini menjadi x. I...
Baca selengkapnya