N26 Design Case
N26 is a customer centric and mobile-first retail bank, which allows users to enjoy a simple, elegant and easy-to-use banking app – anywhere, anytime. The company was originally raised in Germany and even we are talking about a startup, it has more than 2M clients, more than 500 employees and a $215m USD background investment. N26 has offices in Berlin, NYC and Barcelona, between other "hot" countries. And their intention is to keep growing.
The main product is the mobile app. It's free and it's available for iOS and Android, but the real business where they earn money from, are the credit cards, the bank accounts and other services they offer. There is a freemium version and then two more premium options which offer you a lot of different advantages. The highlights of N26 are:
- Take control of your finances by using just one app
- Get unexpected clarity over your money
- Travel like you never left
- Forget paying for the basic stuff
- Chat us, tweet us, email us
- Sign up and get your bank account in 8 minutes
Making a design proposal for the new N26's function, the Saving Rules, as if I was their Product Designer.
N26's users: international men and women from 18 to 55 years old.
To convince as many financial active users as possible to set up saving accounts. “Saving, as enjoyable as spending.”
No fees. No strings attached. Flexible savings. Easy and in real time.
Making a project about a subject that I am not familiar with such as "Saving rules".
- DAY 1: Briefing | Research | References | Proposal
- DAY 2: Organization | Flow definition | Hand sketching
- DAY 3: UI Design | Content creation
- DAY 4: Usability testing | UX improvement
- DAY 5: Working Process drafting
- DAY 6: Final review | Export
- I will start talking about my banking background: none. This means that I don’t know nothing about banking, savings or rules. I don’t even have a credit card, only a debit one and my savings are in a separate account so I use them carefully for the goals I planned.
- Due to my lack of knowledge about banking, I had to search on the internet how savings work and what saving rules are and their different options and types.
- Savings: A savings account is a deposit account held at a retail bank that pays interest but cannot be used directly as money in the narrow sense of a medium of exchange (for example, by writing a cheque). These accounts let customers set aside a portion of their liquid assets while earning a monetary return.
- Saving rules: settings to automatize deposits where the client can choose the time frame, amount and destination account so he/she doesn’t have to do them manually.
- I downloaded the N26 app and took all the screenshots I could in order to create a style guidelines to be able later to integrate my design within the original one.
Look for visual references from competitors (IFTTT, Capital, Savedroid, Acorns, Goin...), Fintech apps or just graphic resources that can be useful for my task (Dribbble, UI/UX Instagram accounts that I follow, apps that I use everyday...).
Identify the N26 style guidelines: branding (logo, font-family, color palette)
Identify how they solve the different types of screens (main, info, empty state, grid, pop-up, notification, form step...) and interaction elements (inputs, buttons, dropdowns...).
Make screenshots from the current version of the N26 app (from my phone) to get familiar to it and be able to integrate my design within it.
- Most of the users are young (20-35) so they will be more likely to have short terms goals than long term ones (buy a house or retirement saving) at the time to save money.
- Since saving rules are directly related to spaces, they should appear as settings from this last ones.
- By designing a smoothie, easy and funny flow, users will see both flows (create a new space and a new rule) as a game and they will be more proactive to not only do it again but share it with their family and friends.
UI/UX Design, Testing and Launch
- Flow planning
- Hand sketching
- Digital translation to Sketch
- Content creation with Photoshop and Illustrator
- Prototyping and live testing with Principle
- Corrections and improvements
- Final review
- Export and launch
Here you can see some of the screens I designed for the project.