Poketka App

Contactless Payment App Connected Directly With Your Bank Account
(Formerly Known as Saifu)

Mobile App
Art Director
Česká Spořitelna

At the turn of 2017, banks have gradually introduced mobile payments. Ceska Sporitelna, as the biggest bank in the Czech Republic, didn't want to be left behind.

I was invited to be an external contractor during the project and my task was to create branding and user interface of the application, which would then later be taken over by the internal team. Although the application wasn't developed exactly as we expected, it launched and gained over 24,000 regular users and admirable rating. Check the app on Google Play

What Is Saifu? Why Fish?

The name Saifu is of Japanese origin and means "wallet". Since Sporitelna pioneered an innovative path of development, they came up with an interactive guide to accompany the application – a fish named Abnaki as a symbol of wisdom.
Abnaki fish movements by 3Bohemians


Thanks to the comprehensive brief, I had a clear idea of what the logo needed to contain: a wallet, a fish, a signal, and a chip. In order to give the client a clear visual understanding, I created a simple collage in which I depicted the individual motifs. This allowed all of us to better understand my vision for the logo.

Check Your Ideas

When designing the logo, I work with both pencil and vectors. I draw rough ideas on paper, and once I am confident I’m on the right path, I move to Illustrator. I enjoy working with Illustrator because I can quickly create multiple variations from one vector and play with it. Among other things, it allows me to check whether the paper motif works equally well in digital form
Drawing helps me check my ideas

Don't Be Afraid of Early Feedback

I prepared several rough proposals for the logo for the first meeting with the client in order to make a decision on which logo would be chosen and require further work. At this stage, it is very important to present the proposal to the client in person so that he/she understands that it is mainly the first draft and not the final appearance of the logo. We had several such meetings and I worked on the logo continuously without getting into dead ends.

The client chose the draft on the right

Logo Variations

As soon as the client approved one of the rough drafts, I began to design variations that differed even in the smallest details. This is a typical process – continually duplicating, editing and comparing with the previous variation in order to create the best version of the logo for the client’s vision.
Logo variations

Crafting Details

It took a few weeks to get to the result I was happy with. Several times, I drew the whole logo again from scratch.  However, I believe the more time you devote to designing and verifying functionality in a real-world environment, the better the result will be.

Good Communication Is a Key

At the beginning of each client meeting, it is necessary to agree on how the team will communicate and what tools will be used. For project management, we first used Basecamp, but later we replaced it with Jira for clarity. The app was done with a proven combination of Sketch for design, InVision for prototype and Zeplin for hand-off to developers.

How to Engage Customers

At the time the application was created, mobile payments were not yet widespread. For many users, this was their first time making a mobile payment. Because of this, studio 3Bohemians created 3D fish animations to help users the first set up and which also informed about all transactions within the app. This made the communication more personal to the user, and the application differed from the competition.

Don't Overwhelm Users

Banking applications must have a high-security standard. We had to incorporate the mandatory first-time security steps (login, verification, card, NFC…) while explaining the payment itself to users. Because of that, it was unavoidable to have just a few screens. Therefore, I focused on making the individual steps as clear as possible. I also created illustrated animations that explained mobile payment in an interesting and illustrative way.

Design System & Style Guide

From the beginning, I put great emphasis on preparing an easy-to-use design system and a clear style guide, which I would later hand over to the internal team of Ceska Sporitelna. Keeping the style set and giving developers high-quality assets is as important as the appearance of the application itself.
Style guide

Theory vs Practice

In practice, it's often difficult to keep the style set both in design and in development. It's mostly because of deadlines, technical limitations and miscomunication. Unfortunately, this was also our case and the application gradually began to differ from the design. As the deadlines approached, so did the concessions and compromises.
Think of all possible screen states
What Would I Do Differently Now?