Rebranding a digital bank: The story behind our new look
Update: Watch the presentation on the Monese rebrand from the Digitized17 conference here
Monese is a branchless banking service that allows residents of the European Economic Area to open a local banking account in as little as 120 seconds, even if the customer has no immediate proof of address or has poor credit history. We built Monese to help the 90 million people across Europe who are ‘financially excluded’ because banks find it difficult to identify or credit score them.
As a financial product it is essential to gain the trust of users and therefore having a consistent and recognisable identity is paramount to Monese’s success.
Why did we decide to re-brand?
Having launched on android and seeing our user base grow rapidly, launching on iOS was an obvious next step and it felt like a good time to review and revise our look.
Whilst we had an existing identity we ultimately felt that the brand needed to better reflect what we’d learned from seeing our product used first hand by real customers — and our deeper understanding of their needs.
Here are a few more issues we identified:
The logo wasn’t a particularly ownable mark—it felt a little childish with its overly-friendly curves.
Our use of the ‘Brandon’ typeface didn’t give us a strong voice and it’s over-use by many startup companies meant it could never be our own.
There were a mixture of sharp and rounded forms that were inconsistent and jarring across brand elements.
Our extensive use of red created a challenge when showing error states in the Monese app.
Monese was growing up and our identity needed to reflect this, whilst having the flexibility to be applied across multiple touch points.
We made initial efforts to patch up our existing branding. The more we tackled it, the more we understood the founding weaknesses that were holding us back. We needed a clear set of values and a new identity to better express the significance of our offering.
As a lean team we knew that a full re-brand was going to be a stretch but if we were ever going to do it, now was the time. Our mission was to unify the company around one common brand story, to form stronger connections with our audience and provide a solid foundation for future growth.
Brand storyboarding
We began the extensive work by immersing ourselves in what Monese has already achieved and what we’re moving towards. Working across our studios in London, UK and Tallinn, Estonia, we connected with everyone in the company to gather opinions on how each of us would describe our values.
In close collaboration with user experience analysts, and management teams, we began by defining a brand storyboard. We discussed how our banking services are helping people to ‘level-up’ and progress with their lives. We went on to define our values. We took this very seriously as these would go on to form the core of our personality and act as a basecamp we could circle back to for each brand decision that we make.
The list we created was a helpful start but there were far too many for us to remember. With input from people across the company we went on to distill them down to a much leaner set of three core values.
Progressive
At Monese we’re always looking to the future—staying one step ahead by using new technology to help our customers.
Human
We see the value of human beings, individually and collectively. We are n0n-judgemental with our audience, which sets us apart from other more traditional banks.
Trustworthy
We provide a safe home for your money and are open and transparent with our customers. We have an approachable attitude and are always ready to answer questions.
The Process
With tight timelines to meet, we moved quickly and began conceptual design sprints. As we’re a startup we often needed to take time away from the sprints to work on app features and other aspects of the business so to keep things manageable we made sure our core focus was on the branding work for set periods of time and then took days away from it to work on other things.
Each sprint was usually around 4 days. We set daily goals to keep our focus and stay on track, examining our values and exploring ideas for further development. We met at the end of each sprint to review; not to make any big decisions at first but rather to share our ideas and walk through each other’s thought process.
Designing our mark
At Monese we help our customers to move freely in their lives by providing them with a banking service that’s easy to join, simple to use, and secure. We wanted to design a mark that both reflects this and communicates our values —‘progressive, human, and trustworthy’. We began sketching…
After exploring several routes, we honed down our decisions, and began to craft our preferred choice. We went through many iterations to ensure our final logo would convey the qualities of each of our brand values.
We decided upon a combination of flowing interconnecting lines to form a unique mark that reflects what we’re like — secure, dynamic and human. To add a soft-touch to the mark we added rounded corners which make it feel more human and flowing.
Typography
While working on the design of the mark we began exploring typefaces. The main issue with our current typeface was that it felt too quirky — not something you would trust with your salary. Although it’s well-designed and slightly-rounded sans serif form worked well for us in the early stages of the company, it lacked maturity — a quality that our new voice needs to reflect.
We decided upon the typeface “FF Mark”. Being recently designed in 2013, the forms were drawn from some of the most successful sans-serifs in history, but it feels contemporary and right at home in the modern design landscape.
Each glyph has been carefully crafted to give it a strong, simple and bold edge but it’s curves give it a reassuring and friendly feel which help to marry it well with the rounded forms of the new Monese logo mark.
A large part of our audience are non-native English speakers which meant legibility was paramount to our decision. Mark’s large x-height helps it work clearly in small sizes within user interface elements and it’s versatile set of weights give it flexibility to work across multiple brand touch points.
Overall we feel Mark is the right choice as it elevates our brand voice to have a strong and trusting tone.
Colour palette
We wanted our palette to feel vibrant and fresh whilst also using colours that could clearly communicate elements of our banking service to non-native English speakers, so our choices had to be functional as well as aesthetic. We looked at the various states of information we would need to communicate within our app and selected a flexible set of colours that would help improve usability.
The punchy blue, green and yellow of our new primary palette convey far more life than our old pale and muted palette, which we feel is a far more suitable voice for Monese. One of our early testers said “it doesn’t feel heavy like other banking apps”.
Defining a signature interaction
As we are a digital product we believed that a strong brand system should be more than just an identifier, and should determine the behaviour of the product. As a banking service, one of the most important interactions that our users have with the product, is the ability to make a payment. We decided to focus on this interaction and to make it a core feature of our brand.
We looked at several treatments, and examined how they could work using animation.
After reviewing the animations, we went on to prototype them with javascript and carry out some user testing, as it was important that the animation didn’t interfere with the action itself.
Keeping the interaction simple was key, to ensure its usability and avoid style over substance. We introduced a fluid trailing line mechanic, that is revealed as the user slides down to make a payment. The elastic and fluid-like motion injects more personality and a sense of delight into the interface.
Developing the system
Looking further, we explored how the payment lines could expand as a cohesive visual system. We created graphic textures by forming a large network of trailing lines to communicate multiple payments in motion. Cropping into this network creates a range of expressions, from measured and precise, to vibrant, and expressive.
The user feedback we had collected on our old debit card showed that some customers thought the previous card didn’t feel like a legitimate banking product. Based on this feedback, we decided to design a more alluring dark card that shows off the revealing network of trail-lines. The interconnecting lines of the pattern communicate the continuous progress of payments through the Monese platform.
As Monese is a product largely aimed at people that move around, we thought it would be appropriate to give our identity a real sense of motion. We wanted the system to feel as though it’s moving, as if to show a snapshot of this motion. This way we could really communicate our value of being progressive.
The expressive shapes have a fluid and human feel which is consistent across the forms found in the logo mark and the app interface elements.
Redesigning the app
Along with the brand refresh, we fully redesigned the app for both android and IOS. We wanted the interface to feel bright and fresh, and be easy to navigate through. Working with the UX team, we thought carefully about each element to ensure every decision had a clear purpose for the user.
Using illustrations, we brought in elements to surprise and delight the user, and also introduced an interactive graph with a similar line style to that of the logo. All icons were redesigned to have a friendlier more rounded form, and we introduced a timeline style to display the home-screen transactions.
Illustrations and characters
We introduced a new style of illustrations, and a set of characters to help explain parts of the app, and add a sense of playfulness. The characters help to reassure the user of how approachable we are as a company, always being here to offer a friendly helping hand.
As an example; when signing up for a Monese account users have to wait for their ID documents to be checked over. We introduced an animation of a scanner that’s reading their documents. After a short time, one of the characters jumps into the scanner and comes out with a spray tan! We hoped this would give the user a small reward for waiting, and might even make them want to wait for the animation to loop around again to see it.
The result
To go back to our initial reasons for revising our visual identity — previously we felt the old Monese branding ended up being overly simplistic and untrustworthy. Not only did an overly-soft logo miss-matched with polygon-like patterns and illustrations give off a mixed tone but ultimately it didn’t feel unique enough to call our own.
Since we addressed all of these issues — from a stronger and more trustworthy logo to a friendlier colour palette — we’re confident our new identity will provide Monese a foundation to keep growing in the long-term. It has already been embraced enthusiastically by all teams in our company and we can only hope our customers will welcome the change as well.
And here’s some feedback we’ve had so far:
P.S. Monese is hiring in London and Tallinn
www.monese.com
Update: Watch the presentation on the Monese rebrand from the Digitized17 conference here
