Дизајн корисничког интерфејса Кин Валлет

Захтеви пројекта

Наш процес дизајнирања почиње одређивањем потреба за производом. У овом случају, наш производ мора Кик кориснике упознати са процесом зараде и трошења Кин-а. То значи да ћемо бити укрцани на кориснике са потпуно новим искуством унутар Кик-а.

Током претходне итерације овог производа (верзија је била доступна корисницима који су учествовали у догађају дистрибуције токена) одлучено је да ће новчаник имати изглед Кин марке.

То значи да ће нови корисници компаније Кик који гледају овај производ доживети и нове функције и нови изглед и осећај који се разликује од онога на шта су навикли од Кик-а до сад.

Из тог разлога смо рано схватили да ће бити важно да ова верзија буде што лежернија.

Планирање структуре корисничких путовања путовања корисника

Укрцавање

Корисници ће се упознати са новчаником преко робота @КикТеам. То нам омогућава да искористимо оно што су корисници Кик-а упознати - ћаскајући - да представимо ово ново искуство.

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

Током две итерације овог пројекта размотрили смо две могуће структуре ПУ.

  1. Робустан скуп функција који укључује историју трансакција и велики део начина за зараду.
  2. Лежернији скуп који укључује само опције равнотеже и зараде / потрошње.

Прва итерација

Током ране итерације започели смо са главном страницом која је коришћена за новчаник учесника ТДЕ-а и додали навигацију менија за зараду и историју трансакција. Потрошња и равнотежа ће остати на главној страници како би се минимализирао обим пројекта и надограђивало оно што је већ било доступно корисницима. Структура менија помогла би у групирању робусних скупова значајки планираних за ову верзију у засебна подручја како би се помогло у проналажењу начина и смањењу когнитивног оптерећења.

За две нове странице (зарада и историја трансакција) погледали смо у два конвенционална дизајна:

  1. Временска црта за историју трансакција: Овај образац ће нам омогућити да представимо информације хронолошким редоследом, што се уклапа у сврху ове странице - приказивање улазних и одлазних Кин трансакција током времена. Ово је уобичајено за банкарске апликације.
  2. Садржајне картице за зараду: Овај се образац најчешће користи у производима потрошње садржаја и е-трговине, који се уклапа у простор у којем ће Кин деловати.

Такође смо истраживали користећи распореде листа и велике картице:

Дизајнирајући ову верзију, проширили смо УИ комплет за бренд Кин и морали смо да експериментишемо са новим стиловима и УИ обрасцима.

Друга итерација

Прелазећи на другу итерацију овог пројекта (ИПЛв2), започели смо са мањим низом функција. Тражили смо једноставно дизајнерско решење које би Кик кориснике изложило новом искуству на јасан начин и било би лако имплементирати.

Ова верзија новчаника биће једноставна, са само једном страницом и изгледом, заглављем и картицама како би се разликовале две врсте информација:

  1. Родни биланс и информације о кориснику.
  2. Двострана понуда економије - могућности зараде и потрошње.

Употреба ове структуре омогућила нам је стварање два нивоа хијерархије.

Плаво заглавље скренуло би пажњу корисника на њихов Кин баланс, с њиховим именом и фотографијом, као потврду да је то њихов рачун.

Подручје картица може се помицати љепљивим заглављем како би се фокус пребацио из равнотеже у економију. Претпоставили смо да једном када корисници преусмјере пажњу са своје равнотеже на ове картице, више им нису потребне информације о билансу. Међутим, пребацивање између двају картица увек мора бити доступно, јер обе картице дајемо исти ниво хијерархије.

УИ дизајн

Погледајте и осети

УИ стил новчаника заснован је на водичу за стил марке Кин. Наш је циљ створити изглед и осећај који је истовремено поуздан и пријатељски користећи плаве тонове, линије икона и минималне илустрације линија, референцирајући науку и технологију.

Из водича за Кин стил: Илустрација хероја и спота, употреба логотипа, боја и типографијаКорисничко сучеље новчаника

Анимације и прелази на екрану

Користили смо две врсте анимација

  1. Прелази који ће дати повратне информације о радњама корисника и створити очекивања о томе шта следи.
  2. Прављење грешака и системских грешака је у складу са нашим циљем да створимо поуздан и пријатељски осећај.

Прелази

Након што се корисници сложе са условима, потребно је неколико секунди да поставе новчаник. То значи да смо морали да створимо неку врсту учитавања. Одлучили смо да искористимо ову прилику да нагласимо идеје које стоје иза Кина - децентрализација и заједница.

Користећи елементе из логотипа (сфере израђене од округлих облика), створили смо метафору за појединце који се крећу у свом темпу и правцу, али се још увек зближавају.

Микро интеракције

Покушали смо да микро-интеракције сведемо на минимум и да их користимо само као повратне информације за корисничке акције.

Случајеви ивица

Случајеви ивица и стања грешака нису сјајно искуство, али морамо их узети у обзир и у дизајну. Покушали смо пронаћи начин да стање грешке изгледа пријатељскије.

Шта је следеће

Добијање повратних информација корисника!

Током рада на овом пројекту имали смо пуно питања о употребљивости, правилном изгледу за наше кориснике и генералним одговорима на нови изглед и осећај унутар Кик-а.
Тренутно смо у процесу постављања корисничких радионица, вршимо тестирање употребљивости и добијамо податке за ову верзију када се она покрене.