I have several banking apps on my phone. Nevertheless, none really gathers all my money-related needs. That’s why I decided to create Omebank : a platform to manage accounts, transfer money and start investing in stock options.
Product Designer
User interviews
Survey
UX Audit
UX/UI Design
Interaction Design
User tests
Miro
Whimsical
Figma
Userbit
3 months
Methods used: User interviews, Survey, Affinity mapping
First things first: let’s understand our users! I started the Empathy phase by organising interviews with potential users. As the project genesis came from a personal frustration, my targeted audience would be young adults. I interviewed 8 people, between 20 and 31 years old, for 1 hour each. The objective was to understand how young adults use banking apps, their needs, their pain points and the relationship they have with their banks. To combine qualitative and quantitative data, I also created a survey which got 47 respondents. Finally, I combined those data in Userbit and built an affinity map to identify clusters.
Anna, 21 years old
Romain, 27 years old
Fanny, 28 years old
Users often combine several banking apps on their phone, one for each account or need
Users need instantaneity for the common actions they make on their banking app
Users have a variety of needs related to banking apps and they expect to fulfil them all
Methods used: UX Audit (Bastien & Scapin framework)
To create an effective product, I needed to analyse competitors to understand their strengths and their weaknesses in terms of User Experience. I conducted a UX Audit of the three most used banking apps highlighted by the research : Lydia, Boursorama and BRED. The Bastien & Scapin framework defines 8 heuristic criteria to analyse an experience. Here is a data visualisation of this analysis:
Lydia interface is simple and straight to the point. It makes it easy to understand and complete actions
BRED and Boursorama apps feel overwhelmed by the lack of visual coherence and the use of technical language
Core functionalities tend to be hidden in the navigation, which makes it hard to find and use
Once I had a clear vision of the banking environment, I needed to rephrase and combine my findings into a simple question, that could leverage the main insights gathered and stimulate ideation:
First brick of UX Design, user flows describe the way users will be able to complete tasks within a product. I designed mine to showcase the product organisation and to answer to one of the main pain points identified : the combination of different features in an accessible and clear navigation.
After the application architecture was defined, I put on paper my first ideas for the page structures, in order to iterate quickly before entering the design on software. Navigation was a particularly important topic because banking service offers many features and their ease of access greatly influences the user experience.
After a batch of paper testing, I finally decided to go for a bottom navbar because it offered the simplest and most convenient way to explore functionalities and keep them in sight at all times.
Going through sketches to visualise first ideas was a real time-saver. I followed the same process for some components and for each page structure : home, dashboard, message, analytics and personal account.
First brick of UX Design, user flows describe the way users will be able to complete tasks within a product. I designed mine to showcase the product organisation and to answer to one of the main pain points identified : the combination of different features in an accessible and clear navigation.
First opening
Sign in
Sign in focus
Login
Home
Dashboard
Investments
Transfer
Message
I used those to run a first batch of usability tests with 10 users. It led to some improvements in the amount of information displayed on screen. I also increased contrasts between blocks to highlight features get a better scanability.
User Interface, as one of a product key elements, is composed of several elements: colors, logo, typography, icons and components. I designed Omebank UI following several principles: consistency, clarity, transparency and interaction.
I wanted Omebank to express wisdom, calm but also vitality and sophistication. As most of banking apps or either blue or green, I also searched for a distinctive color palette. Purple caught my attention because it reflected Omebank personality as well as being linked with wealth in Western culture.
#210033
#380055
#630096
#B933FF
#FFFFFF
#FFFFFF - #DC99FF
OmeBank allows its users to manage their money and enjoy it! It made me think of the French poem « La Cigale & la Fourmi », written by Jean de La Fontaine. I thought it would be a good concept to rehabilitate the spendthrift cicada character, while hiding OmeBank letters in the negative space.
Omebank is reliable and trustworthy. But I didn’t want it to feel too strict. As typography is important vector of emotion in User Interface, it had to follow those principles. And be easily readable too. That’s why I headed to a sans serif font, with slightly rounded corners : Rubik.
Text - Rubik Regular - 16px
OVERLINE - RUBIK REGULAR (ALL CAPS) - 8px
Subtitle - Rubik Regular - 8px
Text - Rubik Regular - 16px
OVERLINE - RUBIK REGULAR (ALL CAPS) - 8px
Subtitle - Rubik Regular - 8px
Text - Rubik Regular - 16px
OVERLINE - RUBIK REGULAR (ALL CAPS) - 8px
Subtitle - Rubik Regular - 8px
Simplicity, understandability and style. Feather icons checked all the boxes. The thin outline of this open-source set makes it stylish but easily scannable and explicit enough for everyone.
UI elements had to follow Omebank business spirit : simplicity, smoothness and efficiency. Among those, I had to design different types of cards and buttons, as well as text fields and navigation, all nesting into consistent pages.
Onboarding
Lack of guidance was one of the main pain points highlighted by the UX audit of BRED and Boursorama. To clarify Omebank offer and services, a quick slider presents the app value proposition to users on first opening.
Home & Transfer
On the home screen, balance and transactions for each credit card are clearly displayed. To get more information, one just needs to click on the transaction. As money transfer is the 2nd most used feature, the flow is also quite direct.
Investments
Stock management is one of Omebank core features. Users can visualize their portfolio value and growth and get personalized tips from a specialized advisor. Buying and selling is also easy as pie with a dedicated page for each stock.
Message
Having a quick and simple contact with our bank is a must-have, especially with neobanks. Thus, an instant messenger allows users to contact directly their specialized advisors. A contact card is also displayed in the Account section, in case of emergency.
Reduction of transfer execution time compared to BRED
Less navigation error compared to Boursorama
Reduction of balance check time compared to Boursorama
Nevertheless, two main points to improve:
Final step of Design thinking: time to test the prototype! Out of the 47 survey respondents, 6 gave me 30 minutes of their time to use the first version of Omebank and give their feedbacks. Those tests were globally positive and highlighted the solutions I brought to original pain points:
Omebank is now ready to go live! To monitor its launch and analyze its performance, I have used the HEART framework, developped by Google, to identify KPIs that could help me measure the user experience. Those KPIs will be tracked on Firebase.
Number of support contacts
Comments on app stores
Session time
Number of session per week
Number of app downloads
Ratio downloads/deletion
Number of app deletion
Number of inactive users
Completion rate for each feature
Completion time for each feature
Surveys and interviews have been very instructive techniques to discover user needs and pain points with banking apps. I have seen the importance of complementarity in UX Research and the added value brought by the use of quantitative and qualitative data.
Working on UI Design, I have created many components. For the interface to be polished and understandable, I have realized that consistency between those was necessary, in terms of shapes, colors or effects.
Accessibility was not in my scope, which is bad as a designer who values ethics. Some components don't respect the AAA contrast ratio, which makes them unusable for people with visual impairments. An additional work on colors would be necessary to increase ratios between the different shades of purple I used.
Finally, with more time and budget, I would consider feedbacks from Omebank user tests and make some improvements on tutorial and transfer information before making the app available on the app stores.
Wanna discover my other works?
Offer an alternative to traditional social platforms
Product Design - September 2021
Check it out
Follow my lastest news on my social media
