CHIuXiD 2019

CHIuXiD 2019

Role

  • UI-UX Designer
  • Front End Developer

Objective

Merancang website CHIuXiD 2019 dengan tema “Recalling memory”

Tools

Paper, Adobe XD, Photoshop, WordPress

Challenges

Membuat sebuah laman yang menunjukkan ke user/pengguna tentang perjalanan panjang dari awal CHIuXiD ada hingga sekarang. Dan harus memasukkan “Bali” di dalam website. Kemudian saya dan tim di minta untuk menunjukkan kapan acara ini kan di mulai, siapa speakersnya, gimana cara sponsor untuk gabung, gimana cara pengguna untuk gabung.

Moodboard

Ini hasil gabungan dari beberapa masukkan untuk konsep website CHIuXiD

Sketching

Saya dan tim melakukan design sprint dimana salah satu dalam tahap sprint adalah Mapping dan sketching. Kita di beri waktu oleh client dalam pengerjaan ini Hanya 8 jam. Agar hasil yang di capai maksimal kita menggunakan yang namanya time boxing. Kita Bagia tiap tahap menjadi 30 menit. Jadi detialnya seperti ini:
  • Mapping: 30 Menit
  • Sketching: 30 Menit
  • Decide: 30 Menit
  • Prototype: 30 Menit
  • Testing: 30 Menit

Mapping

Di tahap pertama ini dari setiap kita melakukan research kebutuhan/permasalahannya apa. Karena kita sudah mempunyai persona untuk acara ini. Jadi setiap kita saling membagi tugas. Ada yang menelpon pihak panita/peserta yang pernah ikut. Ada juga yang melakukan research data dengan mencari tahu tentang acara-acara sebelumnya. Ada juga yang melakukan research dengan orang yang belum pernah ikut event ini tapi dengan persona yang sama. Setelah semua data sudah terkumpul. Barulah kita kumpulkan semua datanya dalam sebuah stick note.

Sketching & Decide:

Setelah melakukan mapping. Kita masuk ke tahap selanjutnya yaitu sketching. Tiap orang di beri waktu 10 menit untuk melakukan research mengenai “Bali” dan “Recalling Memory”.

Selanjutnya kita melakukan sketching, sketching disini bukan sketching berbentuk wireframe tapi lebih ke bentuk ide apa yang mau disampaikan/konsep apa yang anda punya. Disini saya dapat ide karna bali itu terkenal

dengan pantainya. Maka saya buat gambar pantai dan matahari dan daun kelapa. Dan juga Karena tema ini dengan recalling memory/ mengenang masa lalu yang berarti masa lalu dengan masa sekarang saling berhubungan.

Saya buat sebuah kumpulan photo. Setiap photonya itu saling terhubung atau steve jobs bilang connecting the dots. Dimana setiap photo kita campur dari photo kegiatan awal hingga terbaru. Itu salah satu ide dari saya.

Setelah saya dan teman” melakukan sketching. Setiap kita mempresentasikkan hasil ide yang telah di buat tadi. Dan setiap orang di beri waktu 5 menit untuk melakukan presentasi.”

Setelah selesai semua. Masing – masing dari kita di beri 3 buah sticker bulat untuk memilih ide/konsep mana yang sesuai dengan kebutuhan website.

Setelah selesai voting, salah satu dari kita membuat rangkuman hasil dari voting. Rangkuman ini akan di pakai untuk di tahap prototyping.

Prototyping:

kita masuk ke tahap selanjutnya. Sebelumnya kita sudah validasi ide dan sekarang waktunya untuk menuangkan ide tersebut ke dalam sebuah prototype. Seperti biasa sebelum melakukan prototyping kita di berika untuk mencari ide selama 10 menit. Ada yang membuat moodboard ada juga yang membuat list tentang apa yang nanti ingin di tuangkan.

Setelah itu kita melakukan Prototyping dalam sebuah kertas A4 yang nantinya akan di isi Ide/konsep dari setiap kita. Konsep/Ide ini kita bisa isi apapun yang terpenting tidak keluar dari konsep dan hasil rangkuman di tahap sebelum ini.

Saya membuat di kolom paling atas dengan isi di sebelah kiri logo dan di sebelah kanannya saya isi dengan menu. Lalu di bagian kolom ke 2 saya isi dengan sebelah kiri Isi dari judul lalu di bawah judul berisi tulisan deskripsi untuk even CHIuXiD. Untuk background kolom 2 saya isi dengan gambar bali. Untuk ilustrasi kira” seperti ini.

Lalu di kolam ke 3 Saya buat dua kolam sebelah kiri untuk foto – foto acara di tahun awal chiuxid mengadakan acara. Di sebelah kanannya ada judul dan isi tema beserta deskripsinya.

ketika di klik judulnya nanti akan ke website chiuxid 2016. Satu hal lagi di bagian gambar di setiap bordernya saya ingin bordernya menggunakan Batang pohon kelapa agar konsep balinya terasa. Hasilnya kurang lebih seperti ini:

Kemudian di bagian selanjutnya di kolom 4 dan 5 sama seperti di atas. Di bawah kolam 4 dan 5 saya isi dengan subscribe lalu di bawahnya lagi saya isi dengan tanggal launching event CHIuXiD.

Hasil dari prototyping tadi seperti, kita presentasikan ke dalam tim. Setelah presentasi. Setiap kita di beri dua buah sticker bulat. Sticker 1 bulat besar berwarna hijau sticker 2 bulat Warna merah sebanyak 5 buah.

Setiap sticker beda fungsi. Yang besar untuk memilih prototyping mana yang menurut kamu paling bagus dan sesuai. Dan bulat yang kecil di gunakan untuk memilih element/section mana yang paling bagus dan kira” paling possible di gunakan untuk di website.

Tokopedia

Membuat Laman User Profile yang Efektif

Perjalanan Pengguna

  1. Ketika seorang user tertarik dengan pedagang yang ada di tokopedia dan kemudian ingin membuka halaman profil dari pedagang tersebut.
  2. User memilih profil dari pedagang dengan mengetuk profil pedagang via jualan yang ditampilkan atau melalui mesin pencari.
  3. Setelah memilih profil, maka ditampilkan halaman profil pedagang tersebut.

Analisa Masalah

Ketika user melihat halaman sebuah profil pedagang, user merasa kurang yakin dengan pedagang tersebut. Dikarenakan Banyak faktor yang membuat user kurang merasa yakin dengan profil dari pedagang, diantaranya informasi biodata yang tidak diperbaharui, tidak ada riwayat penjualan, ulasan/testimoni dari pembeli sebelumnya dan kapan penjual terakhir aktif di Tokopedia. Interaksi yang sulit antara user dengan pedagang juga membuat user kesulitan.

Kebutuhan User

Dengan melihat perjalanan pengguna dan faktor – faktor diatas, maka asumsi mengenai user yang dapat saya ajukan adalah:

  1. Membeli barang yang dibutuhkan:

    Dapat dengan mudah mencari barang apa yang di jual
    Dapat menggunakan fitur save untuk barang yang nantinya akan di beli

  2. Melihat reputasi dan riwayat pedagang:

    Dapat melihat dengan mudah reputasi apa yang di dapat oleh penjual
    Dapat melihat persentase rate kesuksesan dalam menjual produk

  3. Dapat bersosial dengan teman:

    Dapat membagikan halaman/produk/ulasan kepada orang lain
    Dapat berinteraksi dengan penjual dan orang lain

Target User:

  • Kaum Millennial
  • Suka berbelanja di waktu kerja
  • Pemburu diskon
  • Suka membagi berita tentang barang murah ke rekan/sahabatnya
  • Pengguna Smartphone & Desktop
  • Menyukai teknologi
  • Tinggal di sekitar Jakarta

Ideation

Bagaimana jika user dapat melihat riwayat, Jumlah sales, Rating, Ulasan, Produk terlaris dari pedagang. Dengan begitu user yang melihat akan lebih percaya. Selain itu juga bisa membantu user untuk lebih mudah berkomunikasi seperti halnya dia menggunakan social media.

Ide yang diajukan:

  • Produk terlaris
  • Ulasan atau review
  • Lokasi
  • Kapan Terakhir online
  • Reputasi
  • Timeline untuk posting

Solution

Langkah selanjutnya adalah membuat High Fidelity. Pada tahap ini kita menyusun informasi apa saja yang perlu dilihat,dan apa saja yang berguna untuk membantu pedagang agar user/pembeli percaya hanya dengan melihat profile pagenya. Sebelum masuk ke tahap High Fidelity saya melakukan research di google dengan kata kunci sebagai berikut:

  • #ecommerce
  • #Millennial
  • #karakteristik generasi millennial
  • #Cara memikat generasi millennial

Setelah itu saya melakukan research ke sosial media terbesar tempat para millenial berkumpul seperti Facebook, Instagram, Twitter, Ask Fm. Secara perilaku kaum millennial ini suka update status, selfie, hinggan berkomentar. Ide saya di sini, saya masukkan unsur-unsur media sosial seperti penjual bisa memposting di lamannya.

Di mana pembeli dapat membalas postingannya dan pembeli dapat berbagi dengan teman – teman kalau info itu berguna.

Bagi penjual mungkin fitur timeline bagus untuk menjaring audience. Penjual bisa mempromosikan jualannya atau pun penjual bisa juga bertemu rekan bisnisnya.

Bagi pembeli dengan adanya fitur timeline dia bisa tahu info terbaru dari penjualnya, pembeli juga merasa dekat dengan penjual karena adanya interaksi yang di bagun di kolom komen.

Membuat wireframe

Setelah mengumpulkan data dan ide langkah selanjutnya saya membuat beberapa wireframe dan memvalidasi ide saya.

Saya melakukan validasi ini dengan cara hasil dari wireframe lalu di upload ke dalam InvisionApp. Lalu mereka memberi masukkan dan memvoting yang mana menurut mereka sesuai dengan kriteria mereka pada saat melihat halaman Online Shop yang ingin mereka beli.

Membuat wireframe

Di bawah ini adalah penjelasannya:

Nomor 1 — Profile picture: kesan pertama yang kita pilih untuk ditampilkan. Foto yang menjadi rangkuman siapa kita dan apa yang bisa kita jual.

Nomor 2 — Badge: Fitur eksklusif yang hanya dimiliki oleh Gold Merchant. Dibuat lebih besar agar user dapat melihat status toko online ini dapat lebih dipercaya.

Nomor 3 — Social Media dan Follow: Ketika user puas dengan layanan dan dagangan dari si penjual, user tidak ingin kehilangan kesempatan untuk mendapatkan informasi terbaru. User juga bisa melihat keseharian si pedagang dengan menekan tombol social media yang ada.

Nomor 4 — Status: Rangkuman data yang menunjukkan kesuksesan si pedagang dalam mengirim paket, Testimoni dari pelanggan hingga jumlah total penjualan.

Nomor 5 — Timeline Post: Tempat untuk pedagang mengupdate informasi terbaru seperti: Diskon, Barang terbaru, ataupun hal-hal lucu yang bisa membangun interaksi dengan pembeli.

Nomor 6 — Testi Photo: Kumpulan photo dari para pembeli, dengan adanya kumpulan photo ini pembeli juga bisa melihat hasil jualan si pedagang seperti apa yang nantinya akan meningkatkan kepercayaan kepada pembeli baru maupun pembeli lama.

Nomor 7 — Favorite: Kumpulan pelapak lain yang menurutnya bisa menjadi inspirasi untuk berdagang.

Nomor 8 — Timeline: Tempat hasil update-an dari postingan penjual. User bisa memberikan komentar hingga membagikan informasi ini ke media social.

*Asumsi saya di sini saya juga seorang pembeli, ketika saya ingin membeli produk di online shop saya buka halaman profil, saya lihat biodatanya, melihat jumlah penjualan, lihat review, bahkan jumlah followersnya. Saya juga melakukan riset ke beberapa teman-teman yang sering berbelanja di online shop. Mereka suka berbelanja di Toko Online yang Biodatanya jelas, Ada feedback/ulasan dari pembeli, dan yang terakhir adanya reputasi(bintang) dan satu lagi mempunyai pengikut.

Page Produk

Di bawah ini adalah penjelasannya:

Nomor 1 — Etalase: Informasi atau produk apa saja yang dijual oleh pedagang.

Nomor 2 — Menu: Untuk menampilkan menu utama, terdapat 3 menu yaitu: Home, Produk dan Ulasan. Kalau kita lihat dari halaman pertama hingga ke 3 terdapat informas profile picture yang tidak berubah. Dia terlihat tetap. Maka saya tempatkan Menu di bawah profile picture.

Nomor 3 — Sorting: User dapat melihat informasi berdasarkan paling terbaru, penjualan paling terbanyak, termahal – hingga termurah.

Nomor 4 — Produk: Informasi tampilan dari produk yang di jual.

Page Produk

Di bawah ini adalah penjelasannya:

Nomor 1 — Jumlah Ulasan: Informasi mengenai jumlah masukkan/ulasan secara keseluruhan.

Nomor 2 — Sorting: Pengguna dapat memilih informasi apa saja yang didapat oleh pedagang dari ulasan positif, negatif maupun ulasan negatif dan positif.

Nomor 3 — Ulasan: Hasil masukkan dari pembeli.

Nomor 4 — Report: Pembeli bisa mereport komen ataupun ulasan dari akun lain. Tapi untuk tulisan replay ini hanya bisa dilihat oleh pedagang.

Eshoppers

Eshoppers App

Eshoppers

the application is about online shopping with a different idea , where the customer will request for item and sellers will responds if they have that requested item , the idea is kind of similar to this website

Challenge

The home page could be a circle with plus inside it, when users click the plus the icons of the categories(cars, fashion, food,games, etc..) will appear all around the circle

After place an order from users , sellers will present their goods with the information ( name , goods name , price , sellers rate , chat button , buy button, description)

Inspiration Website

https://wadielrayn.wordpress.com/2016/09/08/creative-user-interface-designs-for-app-inspiration/ the animations , colors of the apps , creativity

Outcome

Mandiri App

Bank Mantap Apps

Bank Mantap

Bank Mandiri Taspen Pos (Mantap) untuk melakukan transformasi digital. Salah satu program yang akan diuji coba yaitu pembukaan rekening bank secara online, tanpa harus ke kantor cabang.

Challenges

Create a unique design that captures the essence of Bank Mantap (We expect your materials aligned with our customer needs)

Mandiri-login

Login Page

Ketika pengguna pertama kali masuk ke aplikasi. Tampilan onboarding ini akan muncul dan pengguna harus login menggunakan No Hp yang terdaftar.

Homepage

Ketika pengguna sudah berhasil masuk login. Maka pengguna akan  melihat histori transaksi selama pemakaian di selama ini. Pengguna juga dapat melihat fitu-fitur unggulan seperti transfer uang, pembelian, pembayaran hinggan melihat transaksi secara detail.

Mandiri-Homepage
Mandiri-Pembayaran

Pembayaran

Di halaman ini pengguna dapat memilih pembayaran seperti Listrik, Internet Ataupun Mengisi Go-pay. 

Pembelian

Pengguna dapat melakukan pembelian dari merchant merchant online shop dan juga dapat membeli pulsa. 

Mandiri-Pembelian
Mandiri-Riwayat Transaksi

Riwayat Transaksi

Di halaman ini pengguna bisa melihat detail transaksi apa saja. Tanda form warna kuning menandakan bahwa form tersebut sudah pengguna pilih. Kalau belum di pilih warna form seperti ada pada tombol batal.

Transfer

Pengguna dapat memilih menu untuk melakukan transaksi seperti ke rekening yang pernah di transfer  sebelumnya ataupun ke rekening yang akan baru mau di transfer.

Mandiri-Transfer

Squline

Redesign Homepage Squline

Challange:

Membuat Sebuah Landing Page yang lebih singkat dan konversi tinggi

User:

  • Professional
  • Mahasiswa