Designing the Kin Wallet User Interface
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.
Animations and screen transitions
We used two types of animation
- Transitions that will give feedback on user actions and create expectations on what’s to come.
- 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.
