Case Study: Ironhack Bootcamp project #3 N26 feature

NH - Product Designer
4 min readJun 7, 2021
Project 3 at Ironhack

My challenge in the third Ironhack project was to design a native environment of either iOs or Android for a new feature we proposed to an existing app. I selected a feature for the mobile banking app N26 and designed a money managing & budgeting feature and Hi-Fi wireframes for a buy crypto feature. The final deliverable was a native iOs Prototype. The problems the digital product was to solve was for N26 users to be able to more efficiently monitor their spending each month and be able to set budgets for their spending categories. The second feature allows you to buy crypto directly in the N26 app. I initially started with an advanced statistics feature but changed it after conducting user research. I based my research on mobile banking users, frequent crypto traders and existing N26 users.

My deadline for this project was 2 weeks. I began with competitor research analysing the money managing and budgeting features of Monefy, Money Manager and Buddy and compared them to current N26 features.

Competitor Analysis

Following the competitor research I used mind mapping to gain an overview of the different functionalities that should be incorporated.

Project Mind Mapping

In order to gain an overview of the design of different components of the N26 iOs app I composed an atomic design inventory, differentiating the components into Atoms, Molecules, Organism and Templates.

Atomic Design inventory N26

After conducting User interviews I created a Proto Persona based on the answers I had received.

Proto Persona

Proceeding creating the Proto Persona I phrased a How Might We & Problem statement:

Problem Statement & HMW

My next step was to create a User Journey for the proto persona Nina:

User Journey

I mapped out the User Flow for the user setting a budget in the money managing feature.

User Flow

My next step was to draw concept sketches based on my previous user research and competitor analysis.

Concept sketches

The first page of my concept sketches mirrors the current N26 overview page with the money managing feature on display. If the User clicks on the feature button, they will go to the landing page for their current month which is visible on the second screen. Here the user can see a visualisation of their spending, statistics, select between months and edit which categories of spending exist as well as see how close they are to reaching their budget limit in each category. If the user selects a category, they can see more details to their spending in that category for the current month and edit their budget goals. If the user is paying something and close to overspending they will see alerts on the payment. I conducted concept testing with different N26 users and incorporated their feedback into my Low-Fi prototype:

Low-Fi WIreframes

Proceeding this I tested the Design again and incorporated my new feedback into my High-Fidelity Prototype, adding a calendar filter and changing the spending visualisation in the category details.

Hi-Fi wireframes

I designed 5 screens for my money managing feature in a native iOS environment and developed an interactive prototype:

The prototype can be found here.

Buy crypto Low-Fi

I designed Low-Fi wireframes for my Buy Crypto feature and followed a similar process as with the previous feature.

Buy Crypto High-Fi

This concluded the project. In this project I learned the most about what the feature should look like by conducting user interviews, as some of the users started describing me their ideal product.

--

--