Poketka App
Contactless Payment App Connected Directly With Your Bank Account
(Formerly Known as Saifu)
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.
Moodboard
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.
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.
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?
Design control – Working with a large team of people can create conflict during the design process. The biggest drawback is that we did not use a versioning tool (for example, Abstract) to introduce design control and streamline team communications.
Focus on the essentials of the app – the application contained a whole section of a discount program. From my point of view, it was unnecessary in the first phase. If we skip it, there would be more room to fine-tune the appearance and functionality of the essential parts.
Takeaways
Each project must have strong foundations to build on (research, strategy).
Each project must have clearly defined processes (communication, tools, procedures, responsibilities).
Use appropriate tools for better design control (Abstract, Figma).
Clear communication is the key.
Deal with problems as soon as possible.
Share early conceptual work and rough creative directions to get constructive feedback before you continue on.
The time spent corresponds to the quality of the design.
Find an interesting motif that can be originally reflected in the design.
Don't overwhelm users with onboardings.
Think of all possible screen states.
Keep in mind that other people will work with your design over time.
Create high-quality assets for developers.
Test the application regularly with end-users.
