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.

A robust set of features that includes transactions history and a large section of ways to earn Kin. 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:

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. 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:

Kin balance and user information. 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.