Designing the Kin Wallet User Interface

Kin Design
Dec 8, 2017 · 5 min read

Project Requirements

Our design process starts by determining product requirements. In this case, our product needs to introduce Kik users to the process of earning and spending Kin. This means we’ll be onboarding users to a completely new experience inside Kik.

During the previous iteration of this product (the version made available for users who participated in the token distribution event), it was decided that the wallet will have the Kin brand look and feel.

This means that new Kik users viewing this product will experience both new features and a new look and feel that is very different from what they are used to from Kik so far.

For this reason, we realized early on that it will be important to keep this version as lean as possible.

Planning user journeys IA structure

Onboarding

Users will be introduced to the wallet through the @KikTeam bot. This allows us to tap into what Kik users are familiar with — chatting — to introduce this new experience.

Wallet information architecture (IA) — examining different structures

We looked into two possible IA structures during two iterations of this project.

  1. A robust set of features that includes transactions history and a large section of ways to earn Kin.
  2. A leaner set that include only balance and earn/spend options.

The first iteration

During the early iteration, we started with the main page that was used for a TDE participant’s wallet and added menu navigation for earning and transaction history. Spending and balance would remain on the main page to minimize the scope of the project and build on top of what was already available to users. The menu structure would help in grouping the robust feature sets planned for this version into separate areas to help with wayfinding and reduce cognitive load.

For the two new pages (earning and transaction history), we looked into two conventional design patterns:

  1. A timeline for transaction history: This pattern will allow us to present information in chronological order, which fits the purpose of this page — showing incoming and outgoing Kin transactions over time. This is a common for banking apps.
  2. Content cards for earning: This pattern is used commonly in content consumption and e-commerce products, which fits with the space Kin will operate in.

We also explored using list layouts and large cards:

Designing this version, we’ve expanded the UI kit for the Kin brand, and we got to experiment with new styles and UI patterns.

The second iteration

Moving to the second iteration of this project (IPLv2), we started with a smaller set of features. We looked for a simple design solution that would expose Kik users to a new experience in a clear manner and would be easy to implement.

This version of the wallet will be simple, with only one page and layout, with a header, and with tabs to differentiate between two types of information:

  1. Kin balance and user information.
  2. The two-sided economy offerings — opportunities to earn and spend.

Using this structure allowed us to create two levels of hierarchy.

The blue header would draw users’ attention to their Kin balance, with their name and photo toserve as reassurance that this is their account.

The tabs area is scrollable with a sticky header, to shift focus from the balance to the economy. We assumed that once users shift their attention from their balance to these tabs, they no longer need the balance information. However, switching between the two tabs should always be available, since we give both tabs the same level of hierarchy.

UI design

Look & Feel

The UI style of the wallet is based on the Kin brand style guide. We aim to create a look and feel that is both trustworthy and friendly by using blue tones, line icons and minimal line illustrations, referencing science and technology.

Wallet UI

Animations and screen transitions

We used two types of animation

  1. Transitions that will give feedback on user actions and create expectations on what’s to come.
  2. Making errors and system glitches friendly, in keeping with our goal to create a trustworthy and friendly feel.

Transitions

After users agree to the terms it takes a few seconds to set up the wallet. This means we had to create a loading state of some sort. We decided to use this opportunity to emphasize the ideas behind Kin — decentralization and community.

By using elements from the logo (spheres made of round shapes), we created a metaphor for individuals moving in their own pace and direction but still coming together.

Micro interactions

We tried to keep micro-interactions to a minimum and only use them as a feedback for user actions.

Edge cases

Edge cases and error states are not a great experience, yet we need to account for them in the design as well. We tried to find a way to make an error state look more friendly.

What’s next

Getting user feedback!

While working on this project we had a lot of questions on usability, the right layout for our users, and general responses to a new look and feel inside Kik.
We are currently in the process of setting up user workshops, doing usability testing and getting data for this version once it will launch.

Kin Blog

Kin is a cryptocurrency used for value exchange in a decentralized ecosystem of digital applications. Kin’s goal is to enable apps and their users to thrive.

Kin Design

Written by

Kin Blog

Kin Blog

Kin is a cryptocurrency used for value exchange in a decentralized ecosystem of digital applications. Kin’s goal is to enable apps and their users to thrive.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade