设计Kin Wallet用户界面

项目要求

我们的设计过程从确定产品需求开始。在这种情况下,我们的产品需要向Kik用户介绍赚钱和消费Kin的过程。这意味着我们将为用户提供Kik内部的全新体验。

在该产品的上一迭代(该版本可供参与令牌分配活动的用户使用)中,决定该钱包将具有Kin品牌的外观。

这意味着,观看此产品的新Kik用户将体验新功能和新外观,这与他们到目前为止使用Kik的习惯截然不同。

因此,我们很早就意识到保持此版本尽可能精简很重要。

规划用户旅程IA结构

入职

将通过@KikTeam机器人向用户介绍钱包。这使我们可以利用Kik用户熟悉的内容(聊天)来介绍这种新体验。

钱包信息架构(IA)-检查不同的结构

在此项目的两次迭代中,我们研究了两种可能的IA结构。

  1. 一组强大的功能,包括交易历史记录和大部分赚取Kin的方式。
  2. 精简版集,仅包含余额和收入/支出选项。

第一次迭代

在早期迭代中,我们从用于TDE参与者钱包的主页开始,并添加了用于收益和交易历史记录的菜单导航。支出和余额将保留在主页上,以最大程度地减少项目范围,并在用户可用的基础上继续发展。菜单结构将有助于将针对该版本计划的强大功能集分组到单独的区域中,以帮助进行寻路并减少认知负担。

对于两个新页面(收益和交易历史),我们研究了两种常规设计模式:

  1. 交易历史记录的时间轴:此模式将使我们能够按时间顺序显示信息,这符合此页面的目的—显示一段时间内传入和传出的Kin交易。这是银行应用程序的常见现象。
  2. 用于赚钱的内容卡:此模式通常用于内容消费和电子商务产品中,与Kin所经营的空间相适应。

我们还使用列表布局和大型卡片进行了探索:

在设计此版本时,我们扩展了Kin品牌的UI套件,并尝试了新样式和UI模式。

第二次迭代

转到该项目的第二个迭代(IPLv2),我们从一组较小的功能开始。我们正在寻找一种简单的设计解决方案,该解决方案可以使Kik用户以清晰的方式获得新的体验,并且易于实现。

这个版本的钱包将很简单,只有一页和版式,带有标题,并且带有用于区分两种信息的标签:

  1. Kin余额和用户信息。
  2. 双向经济产品-赚钱和消费的机会。

使用这种结构使我们可以创建两个层次的层次结构。

蓝色标题会吸引用户注意他们的Kin余额,并以他们的姓名和照片来保证这是他们的帐户。

标签区域可滚动,并带有粘性标题,以将焦点从余额转移到经济。我们假设一旦用户将注意力从余额转移到这些标签上,他们就不再需要余额信息。但是,两个选项卡之间的切换应始终可用,因为我们为两个选项卡提供了相同的层次结构。

UI设计

外观

钱包的UI样式基于Kin品牌样式指南。我们的目标是使用蓝色调,线条图标和最少的线条插图,并参考科学技术,以创造一种值得信赖和友好的外观。

来自Kin风格指南:英雄和现场插图,徽标用途,颜色和版式钱包用户界面

动画和屏幕过渡

我们使用了两种动画

  1. 过渡将提供有关用户操作的反馈,并对即将发生的事情产生期望。
  2. 使错误和系统故障变得友好,以符合我们创建可信赖和友好的感觉的目标。

转场

用户同意条款后,需要花费几秒钟来设置钱包。这意味着我们必须创建某种加载状态。我们决定利用这个机会来强调Kin背后的思想-分权和社区。

通过使用徽标中的元素(圆形的球体),我们为个人按照自己的步伐和方向移动但仍然聚在一起创建了一个隐喻。

微观互动

我们试图将微交互保持在最低限度,仅将其用作用户操作的反馈。

边缘情况

边缘情况和错误状态并不是很好的经验,但是我们在设计中也需要考虑它们。我们试图找到一种使错误状态看起来更友好的方法。

下一步是什么

获得用户反馈!

在进行此项目时,我们在可用性,针对用户的正确布局以及对Kik内部新外观的总体响应方面存在很多问题。
我们目前正在建立用户研讨会,进行可用性测试,并在该版本发布后获取该版本的数据。