A Kin Wallet felhasználói felületének megtervezése

Projektkövetelmények

Tervezési folyamatunk a termékigény meghatározásával kezdődik. Ebben az esetben termékünknek be kell mutatnia a Kik felhasználóit a Kin keresésének és kiadásának folyamatába. Ez azt jelenti, hogy a felhasználók teljesen új élményt kapunk a Kik-ben.

A termék korábbi iterációja során (a token-disztribúciós eseményen részt vevő felhasználók számára elérhetővé tett változat) úgy döntöttek, hogy a pénztárca Kin kinézetét fogja látni.

Ez azt jelenti, hogy az új Kik-felhasználók, akik ezt a terméket nézik, új funkciókat, valamint új megjelenést és érzetet fognak élni, amely nagyon különbözik attól, amellyel a Kik-nél szoktak.

Ezért már korán rájöttünk, hogy fontos, hogy ezt a verziót a lehető legszélesebbé tegyük.

Felhasználói utazások tervezése IA szerkezet

Beszállás

A felhasználók a @KikTeam boton keresztül kerülnek a pénztárcára. Ez lehetővé teszi számunkra, hogy bemutassuk azt, amit a Kik felhasználók ismernek - csevegnek -, hogy bemutassuk ezt az új élményt.

Pénztárca-információs architektúra (IA) - különféle struktúrák vizsgálata

A projekt két iterációja során két lehetséges IA struktúrát vizsgáltunk meg.

  1. Robusztus funkciókészlet, amely magában foglalja a tranzakciók előzményeit és a Kin megszerzésének nagy részét.
  2. Karcsúbb készlet, amely csak az egyenleg és a keresési / kiadási lehetőségeket tartalmazza.

Az első iteráció

A korai iteráció során azzal a főoldallal kezdtük, amelyet a TDE résztvevői pénztárcájához használtunk, és hozzáadtuk a menü navigációt a keresési és tranzakciós előzményekhez. A kiadások és az egyenleg a főoldalon maradnának, hogy minimalizálják a projekt hatókörét, és építsenek a már elérhető felhasználók tetejére. A menüstruktúra elősegítené az ehhez a verzióhoz tervezett robusztus szolgáltatáskészletek különálló területekre történő csoportosítását, hogy segítsenek az útmeghatározásban és csökkentsék a kognitív terhelést.

A két új oldalra (bevételi és tranzakciós előzmények) két hagyományos tervezési mintát vizsgáltunk meg:

  1. A tranzakciók előzményeinek ütemterve: Ez a minta lehetővé teszi számunkra, hogy az információkat időrendi sorrendben nyújtsuk be, amely megfelel az oldal céljának - bemutatja a bejövő és a kimenő Kin tranzakciókat az idő múlásával. Ez általános a banki alkalmazásokban.
  2. Tartalomkártyák a kereséshez: Ezt a mintát általában használják a tartalomfogyasztásra és az e-kereskedelemhez kapcsolódó termékekben, amely megfelel annak a helynek, amelyben Kin működni fog.

Felfedeztük a lista elrendezéseit és a nagy kártyákat is:

Ezt a verziót tervezve kibővítettük a Kin márka felhasználói felületét, és új stílusokkal és felhasználói felületmintákkal kellett kísérleteznünk.

A második iteráció

A projekt második iterációjához (IPLv2) jutva, egy kisebb funkciókkal kezdtük. Egy egyszerű tervezési megoldást kerestünk, amely a Kik felhasználóit egyértelműen új tapasztalatoknak teheti ki, és könnyen megvalósítható.

A pénztárca ez a verziója egyszerű lesz, csak egy oldal és elrendezés, fejléc és fülek tesznek különbséget a kétféle információ között:

  1. Gyerekközösség és felhasználói információk.
  2. A kétoldalú gazdaság kínálatai - keresési és kiadási lehetőségek.

Ennek a struktúrának a felhasználásával kétféle hierarchiát tudtunk létrehozni.

A kék fejléc felhívja a felhasználók figyelmét a Kin egyenlegére, nevük és fényképük pedig azt bizonyítja, hogy ez a számlájuk.

A fülek területe egy ragacsos fejlécgel görgethető, hogy a hangsúly az egyensúlytól a gazdaságra váltson. Feltételeztük, hogy amint a felhasználók elmozdítják a figyelmüket az egyensúlyuktól ezekre a lapokra, már nincs szükségük az egyensúlyra vonatkozó információkra. A két fül közötti váltásnak azonban mindig elérhetőnek kell lennie, mivel mindkét fül azonos hierarchiájú szintjét adjuk meg.

UI tervezés

Nézd és érezd

A pénztárca felhasználói felületének stílusa a Kin márka stílusú útmutatóján alapul. Célunk, hogy egyaránt megbízható és barátságos megjelenést hozzunk létre kék hangok, vonal ikonok és minimális vonal illusztrációk felhasználásával, a tudomány és a technológia hivatkozásával.

A Kin stílus útmutatójából: Hős és folt illusztráció, logó felhasználás, színek és tipográfiaWallet UI

Animációk és képernyőváltások

Kétféle animációt használtunk

  1. Átmenetek, amelyek visszajelzést adnak a felhasználói tevékenységekről, és elvárásokat teremtenek a jövőre nézve.
  2. A hibák és a rendszerhibák barátságos készítése, összhangban azzal a céllal, hogy megbízható és barátságos érzetet teremtsünk.

Transitions

Miután a felhasználók elfogadták a feltételeket, néhány másodpercig tart a pénztárca beállítása. Ez azt jelenti, hogy valamilyen betöltési állapotot kellett létrehoznunk. Úgy döntöttünk, hogy kihasználjuk ezt a lehetőséget, hogy hangsúlyozzuk a Kin gondolatait - a decentralizációt és a közösséget.

A logóból származó elemek (kör alakú gömbök) felhasználásával metaforát hoztunk létre az egyének számára, akik saját tempójukban és irányukban mozognak, de még mindig összejönnek.

Mikro interakciók

Megpróbáltuk minimálisra csökkenteni a mikrointerakciókat, és csak visszajelzésként használhattuk őket a felhasználói tevékenységekhez.

Szélvédő esetek

A szélső esetek és a hibaállapotok nem nagy tapasztalatok, mégis a tervezés során ezeket figyelembe kell vennünk. Megpróbáltuk megtalálni a módját, hogy a hibaállapot barátságosabbá váljon.

Mi a következő lépés

Felhasználói visszajelzés megszerzése!

Mialatt ezen a projekten dolgoztunk, sok kérdés merült fel a használhatósággal, a felhasználók számára megfelelő elrendezéssel és a Kik új külsőjének és érzetének általános válaszaival kapcsolatban.
Jelenleg a felhasználói műhelyek felállításának folyamatában vagyunk, használhatóság tesztelést végezünk, és adatokat szerezzünk erre a verzióra, amint az elindul.