Проектиране на потребителски интерфейс на Kin Wallet

Изисквания към проекта

Нашият процес на проектиране започва с определяне на изискванията към продукта. В този случай, нашият продукт трябва да запознае потребителите на Kik с процеса на печелене и изразходване на Kin. Това означава, че ще бъдем на борда на потребителите на напълно ново изживяване в Kik.

По време на предишната итерация на този продукт (версията, предоставена за потребители, участвали в събитието за разпространение на маркери), беше решено портфейлът да има облика на марката Kin.

Това означава, че новите потребители на Kik, разглеждащи този продукт, ще изпитат както нови функции, така и нов външен вид и усещане, което е много различно от това, с което са свикнали от Kik досега.

Поради тази причина разбрахме рано, че ще бъде важно да поддържаме тази версия възможно най-постна.

Планиране на потребителски пътувания IA структура

Onboarding

Потребителите ще бъдат запознати с портфейла чрез бота @KikTeam. Това ни позволява да използваме това, което потребителите на Kik са запознати - в чата - за да въведем това ново изживяване.

Информационна архитектура на портфейла (IA) - изследване на различни структури

Разгледахме две възможни структури на ИА по време на две повторения на този проект.

  1. Здрав набор от функции, включващ историята на транзакциите и голям раздел от начините за спечелване на Kin.
  2. По-слаб набор, който включва само опции за баланс и печалба / изразходване.

Първата итерация

По време на ранната итерация започнахме с главната страница, която беше използвана за портфейла на участника в TDE и добавихме навигация в менюто за печалба и история на транзакциите. Разходът и балансът ще останат на основната страница, за да се сведе до минимум обхвата на проекта и да се надгради над това, което вече е достъпно за потребителите. Структурата на менюто би помогнала за групирането на надеждните набори от функции, планирани за тази версия, в отделни области, за да помогне за определяне на пътя и за намаляване на когнитивния товар.

За двете нови страници (история на печалбата и транзакциите) разгледахме два конвенционални модела на дизайн:

  1. Времева линия за историята на транзакциите: Този модел ще ни позволи да представим информация в хронологичен ред, което отговаря на целта на тази страница - показване на входящи и изходящи транзакции на Kin във времето. Това е често срещано приложение за банкови приложения.
  2. Карти за съдържание за печалба: Този модел се използва често в продуктите за консумация на съдържание и електронната търговия, което се вписва в пространството, в което ще работи Kin.

Също така проучихме, използвайки оформления на списъци и големи карти:

Проектирайки тази версия, ние разширихме UI комплекта за марката Kin и трябва да експериментираме с нови стилове и UI модели.

Втората итерация

Преминавайки към втората итерация на този проект (IPLv2), започнахме с по-малък набор от функции. Потърсихме просто дизайнерско решение, което да изложи потребителите на Kik на ново преживяване по ясен начин и би било лесно за изпълнение.

Тази версия на портфейла ще бъде проста, само с една страница и оформление, със заглавка и с раздели, за да разграничите два вида информация:

  1. Роднински баланс и информация за потребителя.
  2. Двустранните предложения за икономика - възможности за печалба и харчене.

Използването на тази структура ни позволи да създадем две нива на йерархия.

Синьото заглавие ще привлече вниманието на потребителите към баланса им в Kin, като името и снимката им запазват като уверение, че това е тяхната сметка.

Областта на раздели може да се превърта с лепкава заглавка, за да измести фокуса от баланса към икономиката. Предположихме, че след като потребителите прехвърлят вниманието си от баланса си към тези раздели, те вече не се нуждаят от информация за баланса. Превключването между двата раздела обаче трябва винаги да е налично, тъй като даваме на двата раздела едно и също ниво на йерархия.

UI дизайн

Погледни и се почувства

UI стилът на портфейла се основава на ръководството за стил на марката Kin. Ние се стремим да създадем външен вид и усещане, които са едновременно надеждни и приятелски настроени, като използваме сини тонове, икони на линии и минимални илюстрации на линии, препращайки науката и технологиите.

От ръководството за стил Kin: Илюстрация на герои и спотове, използване на логото, цветове и типографияПотребителски интерфейс на портфейла

Анимации и екрани

Използвахме два вида анимация

  1. Преходи, които ще дадат обратна информация за действията на потребителите и ще създадат очаквания за следващите.
  2. Правенето на грешки и системни бъгове приятелски, в съответствие с нашата цел да създадем доверие и приятелско усещане.

Преходите

След като потребителите се съгласят с условията, са нужни няколко секунди, за да настроят портфейла. Това означава, че трябваше да създадем някакво състояние на зареждане. Решихме да използваме тази възможност, за да наблегнем на идеите зад Кин - децентрализация и общност.

Използвайки елементи от логото (сфери, изработени от кръгли форми), ние създадохме метафора за индивидите, които се движат със собствено темпо и посока, но все още се събират.

Микро взаимодействия

Опитахме се да сведем микро взаимодействията до минимум и да ги използваме само като обратна връзка за действията на потребителите.

Калъфи за ръбове

Случаите с ръбове и състояния на грешки не са голямо преживяване, но все пак трябва да ги отчитаме и в дизайна. Опитахме се да намерим начин да направим състоянието на грешката да изглежда по-приятелски.

Какво следва

Получаване на отзиви от потребителите!

По време на работата по този проект имахме много въпроси относно използваемостта, правилното оформление за нашите потребители и общи отговори на нов облик и усещане в Kik.
В момента сме в процес на създаване на потребителски работилници, правим тестове за използваемост и получаваме данни за тази версия, след като тя стартира.