Monica Crusellas | Making Number26 account smarter
I’m Monica, a product designer from Barcelona with a focus in UI and interaction design. Finding user-centred solutions to solve real problems for people it’s something that makes me really happy. While I’m not designing I’m learning code, practising German or reading books.
product designer, UI designer, interaction designer, prototyping, UX designer, visual designer, technology, startups, Barcelona, Berlin, Europe
22002
portfolio_page-template-default,single,single-portfolio_page,postid-22002,ajax_fade,page_not_loaded,,select-theme-ver-1.8,vertical_menu_enabled,wpb-js-composer js-comp-ver-4.3.4,vc_responsive

Making Number26 account smarter

Number26 (recently renamed N26) was the first bank in Europe that could be managed entirely over the smartphone. Launched in 2015 in Berlin, its goal was to reinvent traditional banking by embracing technology and focusing on the user experience. N26 is now a global company that keeps growing at high speed, with +700 employees and over 2 million users.

 

Design Concept and Goals

Increase user engagement by making N26’s account smarter

In order to compete with larger banks, we had to be really good at something that they weren’t so good at — the user experience. In just a few months after the product launch, we had accomplished a lot very quickly. We were by far the most modern bank in Europe at the time (early 2015), with a simple and beautiful app full of innovative features and a super smooth process to join the bank. But we wanted to explore how we could take the user experience to the next level.

As designers at N26, we invited users to the office regularly to chat about what they loved about the product but, most importantly, to hear about their frustrations and feature requests. At some point we detected a pattern of people asking to get relevant information, insights and recommendations about their financial activity. So we decided to examine how we could make the product smarter in order to elevate the user engagement.

 

My Role in The Team

The project was broken down in two parts, each part being composed by different teams.
On the first one, I worked on feature ideation, research and validation together with N26’ Head of Product, a UX Designer, an Interaction Designer and two team members of the Product Design Agency A&J Smart.

On the second part of the project, I led the design and usability testing, working together with a PM and two developers.

 

Design Process

Our initial goal was to conceptualise, design and validate our ideas really fast, so we started the process by conducting a 5-day Sprint session together with the A&J Smart team, who helped us plan and scope each day of the sprint.

 

The first step consisted on meeting with stakeholders to review business goals and define challenges. A key business goal was customer retention and activation, so we took this as our starting point.

 

business goals

 

Ideation

Brainstorming, voting and prioritising ideas
In order to gather a better understanding of our user habits, we ran a user story mapping session. Based on the resulting flow, we brainstormed solutions and ideas that would improve the user experience and that would make our users more engaged with the app. Then, we dot-voted these ideas and prioritised them based on effort and smartness.

 

story mapping

 

Top 3 voted ideas
  • Smart contextual cards
  • Cashflow trends 
  • Smart categorisation

 

Sketching session

With a clear direction and prioritised features to keep working, we ran a sketching session to visualise the top voted features and discuss particular interfaces and flows. The goal was to decide which key screens should be prototyped.

 

sketching session 2 sketching session 1

 

Validation

As a next step, we performed a guerrilla user research to validate our ideas. I created different cards to find out what kind of ‘smart’ financial information people would be more interested in finding in the app. Here are some examples:

 

testing cards 1 testing cards 2
guerrilla

 

Iteration, prototyping and testing

With the collected feedback, I developed a bit more the UI for each feature and created prototypes. Since the timeframe was really tight, the prototyping process was really fast, but I managed to create a few versions to test specific content and types of data visualisation. Once the prototypes were done, we conducted a more elaborated user testing with our target audience, in which we could better understand which features were really valuable for people.

 

prototype

 

For the prototypes, we wanted to present a smart homepage. I picked the bits of information that had gotten better feedback on the guerrilla research, integrating the smart contextual cards at the top of the screen. The most successful card had been the monthly report, so I placed it on the first position and made it stand out more than the rest visually. On click, the card would trigger a modal with a summary showing a simple cash flow visualisation and a few insights on spendings by category — the monthly report in place was just a list of transactions.

 

Below the cards section, people would find a cash flow overview displaying data of the last four months and the last four transactions. On a third level of hierarchy, I placed a section showing the top three spending categories.

 

user testing

 

What we learned

Cashflow Trend
Tested users validated our hypothesis of people willing to see a simple visualisation to quickly understand their financial trends. They wouldn’t mind finding this on the homepage but people still wanted to see a full list of transactions on the first screen.

 

Smart categorisation
People liked the idea of categorised expenses, but they didn’t consider it 100% accurate nor cared a lot about it. They didn’t find a fixed section in the homepage particularly useful, though didn’t mind it as a type of card or finding it within the monthly report.

 

Smart contextual cards
The contextual cards were very well accepted. They loved the monthly report, the majority of users told us they would open the app to check it out. This feature was a flexible way to show interesting information to our users and would make them more likely to open the app.
People rejected negative messages like “You spent more than usual last weekend” or “Here’s your Holidays expenses summary”. They wanted to see positive or neutral information on the cards.

 

cards test

 

Conclusion

Based on these findings, we confirmed that personal and relevant information about users financial activity and goals, as well as ‘fun facts’ snippets placed at the top of the homepage had a lot of potential to increase engagement and activate people. Next step would be designing the MVP – which the marketing team called PULSE26. A new team was built for it, in which I led the design.

 

Designing the MVP

Based on collected feedback, I mapped three different types of information that would be displayed in the cards. The two key bits of information were data related (e.g. monthly report, “You spent 100€ less than last month”) and ‘fun facts’ (e.g. “It’s payday!”), but we also wanted to take advantage of the cards versatility to announce new features or products (e.g. “Invite a friend to N26 and you both get 10€”).

 

exploring UI

 

I started the designs exploring the idea of using different UI patterns for each type of information. My thoughts were that this would potentially help users to know what to expect from each type of card. However, during the usability testing I realised that this actually added visual noise and people didn’t understand why the cards were different, they perceived all cards as a single type of notification — in which the app was communicating something to them. From a tech perspective it was going to be easier to start with only one design for all the cards, so I kept exploring a single pattern.

 

sketches and wireframes

 

On the initial designs I assumed people were familiar with the swipeable cards pattern and that they would understand that the cards were clickable without having to think about it. To my surprise, I found some people wouldn’t click or hesitated to do so. So I added buttons to all the cards to remove doubt and better communicate the action that would be triggered. The buttons pattern would help to distinguish interactive from non-interactive cards — in case we needed to use any in the future.

 

card-structure-details

 

In terms of visuals, I got better feedback on the cards with background images over the white cards with icons. People focused more their attention when they saw a nice picture, so I continued developing this design. It was a challenge to find the right type of image that allowed the text to have good readabilty. I used Unsplash since we didn’t have resources for self production.

 

 

 

Development

A key aspect was to decide which cards should be displayed at which time to make sure we didn’t annoy users with useless or repetitive information. We started releasing the monthly report card to see how people reacted to the new pattern and allowed people to dismiss the card by tapping the cross icon at the top-right corner. Tracking this interaction as well as the cards CTA would be key to measure users reaction.

 

Results

Positive feedback and high open rates of the monthly report proved success, and due to that accomplishment the team released more cards with personalised content over time. Three years later, after reaching over 2M users, the cards are still a a feature in the N26 app and a way to communicate and show relevant information to users.

 

A personal takeaway of this project was realising how valuable a 5-days design sprint can be to efficiently prioritise tasks and turn potentially months of work into a few days of work.

 

 

n262018

 

Testing and sketching session pictures credits: A&JSmart
Site

N26

Category

Research, User testing, UX UI Design