Розробка інтерфейсу користувача Kin Wallet

Вимоги до проекту

Наш процес проектування починається з визначення вимог до продукції. У цьому випадку наш продукт повинен ознайомити користувачів Kik з процесом заробітку та витрачання Кіна. Це означає, що ми будемо на борту користувачів до абсолютно нового досвіду в Kik.

Під час попередньої ітерації цього продукту (версія, доступна для користувачів, які брали участь у заході розповсюдження жетонів), було вирішено, що гаманець матиме вигляд та вигляд марки Kin.

Це означає, що нові користувачі Kik, які переглядають цей продукт, відчують як нові функції, так і новий зовнішній вигляд, що сильно відрізняється від того, до чого вони звикли від Kik досі.

З цієї причини ми рано зрозуміли, що важливо зберегти цю версію якомога меншою мірою.

Планування структури ІА поїздок користувачів

На борту

Користувачі ознайомляться з гаманцем через бота @KikTeam. Це дозволяє нам скористатися тим, що користувачі Kik знайомі - спілкуватися в чаті - щоб представити цей новий досвід.

Інформаційна архітектура Гаманця (ІА) - вивчення різних структур

Ми розглянули дві можливі структури ІА під час двох ітерацій цього проекту.

  1. Міцний набір функцій, що включає історію транзакцій та великий розділ способів заробити Кін.
  2. Пізніший набір, що включає лише варіанти балансу та заробітку / витрачання.

Перша ітерація

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

На двох нових сторінках (історія заробітку та транзакцій) ми розглянули дві традиційні моделі дизайну:

  1. Хронологія історії трансакцій: Ця модель дозволить нам представити інформацію в хронологічному порядку, що відповідає цілі цієї сторінки - відображати вхідні та вихідні транзакції Kin у часі. Це поширене для банківських програм.
  2. Картки вмісту для заробітку: Цей шаблон використовується в продуктах споживання вмісту та електронної комерції, який відповідає простору, в якому працюватиме Кін.

Ми також досліджували макети списків та великі картки:

Розробляючи цю версію, ми розширили набір інтерфейсу для бренду Kin, і ми повинні експериментувати з новими стилями та зразками інтерфейсу користувача.

Друга ітерація

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

Ця версія гаманця буде простою, лише одна сторінка та макет, із заголовком та вкладками, щоб розмежовувати два типи інформації:

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

Використання цієї структури дозволило нам створити два рівні ієрархії.

Синій заголовок звертає увагу користувачів на баланс їхніх родин, а їх ім’я та фото - як запевнення, що це їхній рахунок.

Область вкладок прокручується клейким заголовком, щоб перевести фокус з балансу на економіку. Ми припускали, що як тільки користувачі переключають свою увагу з балансу на ці вкладки, їм більше не потрібна інформація про баланс. Однак перемикання між двома вкладками має бути завжди доступним, оскільки ми надаємо обом вкладкам однаковий рівень ієрархії.

Дизайн інтерфейсу

Подивись і відчуй

Стиль інтерфейсу гаманця базується на посібнику зі стилю бренду Kin. Ми прагнемо створити зовнішній вигляд, який є надійним і привітним, використовуючи сині тони, лінійні значки та мінімальні лінійні ілюстрації, посилаючись на науку та технології.

З посібника зі стилю Кін: Ілюстрація героїв та точок, використання логотипів, кольорів та типографікиІнтерфейс гаманця

Анімації та екранні переходи

Ми використовували два типи анімації

  1. Переходи, які даватимуть відгуки про дії користувачів та створюватимуть очікування щодо того, що буде в майбутньому.
  2. Створення помилок та системних збоїв дружньо, відповідно до нашої мети створити надійне та доброзичливе відчуття.

Переходи

Після того, як користувачі погоджуються з умовами, для налаштування гаманця потрібно кілька секунд. Це означає, що нам довелося створити якийсь стан завантаження. Ми вирішили використати цю можливість, щоб підкреслити ідеї, що стоять за Кіном - децентралізацію та спільність.

Використовуючи елементи з логотипу (сфери круглих фігур), ми створили метафору для людей, що рухаються у своєму темпі та напрямку, але все-таки збираються разом.

Мікро взаємодії

Ми намагалися звести мікро взаємодію до мінімуму і використовувати їх лише як зворотній зв'язок для дій користувачів.

Корпусні кромки

Випади кромки та стани помилок не є чудовим досвідом, але нам потрібно враховувати їх і в дизайні. Ми намагалися знайти спосіб зробити стан помилки більш привітним.

Що далі

Отримання відгуків користувачів!

Під час роботи над цим проектом у нас було багато питань щодо зручності використання, правильного планування для наших користувачів та загальних відповідей на новий вигляд та відчуття всередині Kik.
Наразі ми створюємо семінари для користувачів, робимо тестування на зручність та отримуємо дані для цієї версії, коли вона буде запущена.