Merancang Antarmuka Pengguna Dompet Kin

Persyaratan Proyek

Proses desain kami dimulai dengan menentukan persyaratan produk. Dalam hal ini, produk kami perlu memperkenalkan pengguna Kik untuk proses mendapatkan dan membelanjakan Kin. Ini berarti kami akan menjadi pengguna yang terintegrasi dengan pengalaman yang sama sekali baru di dalam Kik.

Selama pengulangan produk ini sebelumnya (versi yang tersedia untuk pengguna yang berpartisipasi dalam acara distribusi token), diputuskan bahwa dompet akan memiliki tampilan dan nuansa merek Kin.

Ini berarti bahwa pengguna Kik baru yang melihat produk ini akan mengalami baik fitur baru maupun tampilan dan rasa baru yang sangat berbeda dari apa yang biasa mereka dapatkan dari Kik sejauh ini.

Untuk alasan ini, kami menyadari sejak awal bahwa penting untuk menjaga versi ini selangsing mungkin.

Merencanakan perjalanan pengguna struktur IA

Onboarding

Pengguna akan diperkenalkan ke dompet melalui bot @KikTeam. Ini memungkinkan kami memanfaatkan apa yang akrab dengan pengguna Kik - mengobrol - untuk memperkenalkan pengalaman baru ini.

Arsitektur informasi dompet (IA) - memeriksa berbagai struktur

Kami melihat dua kemungkinan struktur IA selama dua iterasi proyek ini.

  1. Seperangkat fitur yang kuat yang mencakup riwayat transaksi dan sebagian besar cara untuk mendapatkan Kin.
  2. Perangkat yang lebih ramping yang hanya mencakup opsi keseimbangan dan hasilkan / belanjakan.

Iterasi pertama

Selama iterasi awal, kami mulai dengan halaman utama yang digunakan untuk dompet peserta TDE dan menambahkan navigasi menu untuk penghasilan dan riwayat transaksi. Pengeluaran dan keseimbangan akan tetap di halaman utama untuk meminimalkan ruang lingkup proyek dan membangun di atas apa yang sudah tersedia bagi pengguna. Struktur menu akan membantu dalam pengelompokan set fitur yang kuat yang direncanakan untuk versi ini ke area terpisah untuk membantu menemukan dan mengurangi beban kognitif.

Untuk dua halaman baru (penghasilan dan riwayat transaksi), kami melihat ke dalam dua pola desain konvensional:

  1. Garis waktu untuk riwayat transaksi: Pola ini akan memungkinkan kami untuk menyajikan informasi dalam urutan kronologis, yang sesuai dengan tujuan halaman ini - menunjukkan transaksi Kin yang masuk dan keluar seiring waktu. Ini umum untuk aplikasi perbankan.
  2. Kartu konten untuk mendapatkan penghasilan: Pola ini digunakan secara umum dalam konsumsi konten dan produk e-commerce, yang sesuai dengan ruang tempat Kin akan beroperasi.

Kami juga menjelajahi menggunakan tata letak daftar dan kartu besar:

Mendesain versi ini, kami telah memperluas kit UI untuk merek Kin, dan kami harus bereksperimen dengan gaya dan pola UI yang baru.

Iterasi kedua

Pindah ke iterasi kedua proyek ini (IPLv2), kami mulai dengan serangkaian fitur yang lebih kecil. Kami mencari solusi desain sederhana yang akan memaparkan pengguna Kik pada pengalaman baru secara jelas dan akan mudah diimplementasikan.

Versi dompet ini akan sederhana, dengan hanya satu halaman dan tata letak, dengan header, dan dengan tab untuk membedakan antara dua jenis informasi:

  1. Keseimbangan dan informasi pengguna.
  2. Penawaran ekonomi dua sisi - peluang untuk mendapatkan dan membelanjakan.

Menggunakan struktur ini memungkinkan kami untuk membuat dua tingkat hierarki.

Header biru akan menarik perhatian pengguna ke saldo Kin mereka, dengan nama dan foto mereka untuk memastikan bahwa ini adalah akun mereka.

Area tab dapat digulir dengan tajuk yang lengket, untuk mengalihkan fokus dari keseimbangan ke ekonomi. Kami berasumsi bahwa begitu pengguna mengalihkan perhatian mereka dari saldo mereka ke tab ini, mereka tidak lagi membutuhkan informasi saldo. Namun, beralih di antara dua tab harus selalu tersedia, karena kami memberikan kedua tab tingkat hierarki yang sama.

Desain UI

Lihat & Rasakan

Gaya dompet UI didasarkan pada panduan gaya merek Kin. Kami bertujuan untuk menciptakan tampilan dan nuansa yang dapat dipercaya dan ramah dengan menggunakan nada biru, ikon garis dan ilustrasi garis minimal, referensi ilmu pengetahuan dan teknologi.

Dari panduan gaya Kin: Ilustrasi pahlawan & spot, penggunaan logo, warna, dan tipografiUI Dompet

Animasi dan transisi layar

Kami menggunakan dua jenis animasi

  1. Transisi yang akan memberikan umpan balik pada tindakan pengguna dan menciptakan harapan tentang apa yang akan terjadi.
  2. Membuat kesalahan dan gangguan sistem ramah, sesuai dengan tujuan kami untuk menciptakan nuansa yang dapat dipercaya dan ramah.

Transisi

Setelah pengguna menyetujui persyaratan, diperlukan beberapa detik untuk menyiapkan dompet. Ini berarti kami harus membuat semacam keadaan pemuatan. Kami memutuskan untuk menggunakan kesempatan ini untuk menekankan gagasan di balik Kin - desentralisasi dan masyarakat.

Dengan menggunakan elemen-elemen dari logo (bola yang terbuat dari bentuk bundar), kami menciptakan metafora untuk individu yang bergerak dengan kecepatan dan arah mereka sendiri tetapi tetap bersatu.

Interaksi mikro

Kami mencoba menjaga interaksi mikro seminimal mungkin dan hanya menggunakannya sebagai umpan balik untuk tindakan pengguna.

Kasus tepi

Casing tepi dan status kesalahan bukan pengalaman hebat, namun kita perlu memperhitungkannya dalam desain juga. Kami mencoba menemukan cara untuk membuat keadaan kesalahan terlihat lebih ramah.

Apa berikutnya

Dapatkan umpan balik pengguna!

Saat mengerjakan proyek ini, kami memiliki banyak pertanyaan tentang kegunaan, tata letak yang tepat untuk pengguna kami, dan respons umum terhadap tampilan dan nuansa baru di dalam Kik.
Kami saat ini sedang dalam proses menyiapkan lokakarya pengguna, melakukan pengujian kegunaan dan mendapatkan data untuk versi ini setelah diluncurkan.