Ironhack prework challenge: Bankin’ s wireframe

6 min readApr 23, 2021

For Ironhack Prework’s second challenge, they proposed to represent wireframes of a user flow between 5 and 7 pages of an application of our choice. To do this, I choose an app that I have used for several years now, Bankin.

But what is Bankin?

Bankin is a mobile app destinate to manage your money and to do saving. It’s a free app created by a French start-up. With a quick overview on your different synchronised bank accounts, you can simply analyse your outcome and incomes and have the control on your spends without spending hours on an excel.

More importantly Bankin’ is an adviser and a manager of bankin money data in a pocket with a simple design that makes the accountancy as simple that a game. With more than 4 million people using it, they are not the leader in Europe (That is for reasons!).

Downloaded this app is one of the best decision I made, saving me a lot of time. I could say a lot about it but let’s come back to the main subject.

Why this app and not another?

There are many reasons why I choose this app for this exercise:

First and obvious I love this app
It’s easy and simple to use

Even if in the beginning, it take a few time to set up the way you want your analyse, it’s nothing compared that the time you make to do your excel. Moreover your data update automatically so after there is almost anything to update. Then with the practise and the time I get used to it and spend much less time on it.

The interface is simple and beautiful

Each time I open the app, the design make me feel good even when I don’t have money and when it’s red (which I can try to avoid easily now I see well what going on).

There is still way to improve it

Even before to know the existence of the UXUI Design, I often thought about way to improve the app. After using it a long time, I still have to learn about this app. That’s why doing this exercise inspire me.

The challenge

Your task is to create a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens of such app. Your final product should be a simple 5 screens’ interactive prototype built in the tool of your choice

The flow I will use for this exercise is the flow to check the health of your accounts. This flow is produce through 5 steps:

COMPTE: The account. When you arrive on the app, you can see first the resume of each bank account that you added.
BUDGET: The budget. In this page you can see with a quick view if you are respecting your budget that you set. For each categories that you choose. And if it’s not the case you can see where you’ve spend too much.
ANALYSE: the analysis. Here you will find more details about every category.
PROFIL: the profile. As it says you will find here every link important for your account.
EPARGNE: the savings chart. This one is a short who sum up the difference between your outcomes and incomes during the last 6 months.

To do the challenge, I used the Figma tool. The idea is to simplify the screen content as much as possible, highlighting only the basic aspects, such as texts, buttons, icons, etc. and thus generate the wireframe of the application.

The screenshot

The wireframes

After set up my file with the screenshot, it was the time to make the wireframe. My method was to overlay the screen and to draw the different important of the screen. Below this is the 5 wireframes that I first done.

Learning by doing

During this exercise I made some mistakes that I am about to confess:

Try to jump the steps

In the previous exercise, the instruction was to download the screenshot. But as the perfect beginner I was about to start the design before do any wireframe. Until I realised that it doesn’t make sense and decide to continue. At least it was just half of the first screen, but I realised how much time it can take to start straight away the design of an interface.

No make Lo-fi wireframe

I didn’t make a lo-fi wireframe frame thinking to save time as well. It wasn’t difficult to make a wireframe without lo-fi but I have to admit that is because I just need to copy the interface. But by doing the wireframe I realised how important is to have a base to follow (on paper or not).

No use systematically the UI kit

For this exercise, I had a wireframing kit to use to save time. But I was taking a lot of time going to one page to another to pick up components and refresh the page. So I decide to draw by myself. I have to admit that it took a time to finish it, but as I was doing a copy-paste of everything, I still could manage. However I used few components of the kit to try to learn.

During the prototyping I find one big issue: to use the same icons to go back to the right previous page, between 3 pages. It sounds easy before do the prototype, but when I tried it, it wasn’t working. There was any button for condition on the iteration so instead to struggle to long on it, I done another thing. When I came back to it, I imagine another way: if I can make condition with the feature, let’s create a condition with the design!