Ferratum, headquartered in Helsinki, Finland was founded in May 2005 and has expanded its operations across 25+ countries. The company has its background in lending and financial service.
Ferratum has developed its own proprietary core mobile banking platform, the Mobile Wallet. The Mobile Wallet is to be rolled-out throughout Europe and Ferratum will position the Mobile Wallet in the center of its customer communications.
Design problems and team setup
First launched in 2017, Ferratum Mobile Bank was aimed to revolutionize banking industry. It promised to delivery full online onboard experience, unlike traditional banks which usually require branch visit. Customer then can get fast access to IBAN bank account and other services which are similar to what traditional banks offer.
However until 2018, Ferratum Mobile Bank still failed to gain enough momentum and not able to attract enough new customers. Onboarded customers also didn't seems to be engaged nor stay active.
Group wide, no design system was established, so looks and feels of Ferratum products was very much varied across different channels. Design work's production time and quality were severely affected by this.
I was product designer of a six-designers team, in addition 3-4 outsource designers (UI designers, graphic designers) were called in when needed.
My main responsibilities:
- Designing new Ferratum Prime app which succeeded to 2017 Ferratum Mobile Bank. Preparing wireframes, prototypes; conducting usability tests. Cooperating with our UI talents to create world-class UI. I also had provided majority of animation/motion works for the app.
- Building first-ever Ferratum DS.
- Mentoring junior designers in team.
Understanding the right problems to be solved
Providing new set of appealing value proposition was aligned company's strategy of ramping up client base.
Solving problem with onboard process would increase product potential growth and generate revenue.
Existing solutions could be improved / fixed with acceptable amount of time & resources.
Competitors' solutions (Revolut, N26, Monzo, etc.) were well examined and understood.
I could summarize my process into 2 parts: Define and scope, and detail design.
1.1 Creating personas
Gathering customer data (interview & survey) and stakeholders' input (during our service blueprint workshop).
Looked at tagged data to see if overlap emerge naturally. Identified patterns.
Personas then got shared widely across organization, sometimes they needed some tweaking afterward.
1.2 User stories
Creating user stories for each persona. A user story is a perfect way to distill the user need and express it in a way everyone can understand.
1.3 User flows & sitemap
A user story wraps around a user’s need in a story. A user flow translates the user story into a simple language of programming. It breaks down all the CTAs, logics, backend automation, pages, and external assets we need to actualize the user story.
I reverse-engineered the app sitemap based on the final user flows. Map out all the pages needed both functional and informational pages.
Establishing road map with PO.
Defining Minimum Loveable Experience - MLE.
I chose quick & dirty paper wireframes for this step, since it helped out a lot to hash out the details. And it is always faster on paper than software.
It was then time to transform all our paper prototypes to a digital one and link screens to each other as click-able prototypes.
1.7 Usability testing
Our objective at this phase was to validate flows and information architectures. We exposed the designs to as many eyes as possible and improve the designs before the real usability tests with real users in later stage.
2.1. Creating visual library / design system
All existed artefacts from all channels: web, mobile app, social media, ad were collected and analysed for UX/UI shortcomings and inconsistencies. Selected group of employees and customers were interviewed for feedback and insights.
Setting up centralised Sketch design library, with appropriate components for each platform. Standardised design tools (Sketch + Abstract, Invision, Zeplin, Usabilityhub).
Design drivers of the DS: fast, simple, relevant, calmness, joy.
Functional patterns: what user want/need, e.g. check account balance, navigate, get cash.
Perceptual patterns: what user feels & do intuitively such, e.g. typography, color palette, motion.
2.2 Interaction design
Interface concept and sketch were done by our outsource designer. I contributed by providing direction, filtering proposed UI elements through our DS to make sure they were consistent across platform and accessibility compliance.
I was responsible fully for the motion aspect of the app.
2.3 Usability study
Thorough study using prototypes with polished design. I and UX researcher had conducted several batches of interviews (each batch – 5 interviews) depending on our capacity and budget.
Test methodologies: Heuristic evaluation, cognitive walkthrough, accessibility testing.
If the designs passed the usability test, we started prepare the assets for the production. If it didn’t, then we needed to revisit our prototypes and improved the user flows and layout. Then we would have to conduct another round of usability tests.
The whole onboarding process was redesigned and relaunched. With the goal of frictionless onboarding, local strong authentication solutions (Finnish TUPAS, Latvian SmartID, Swedish BankID) were used. The cumbersome video call or documents upload were no longer needed.
The process was also transformed into web based service which helped scalability for future market rollouts. USPs were communicated better in the beginning of the flow, while various UX/UI issues were addressed too.
Beside onboarding, app's features and products are now designed around user stories with clear motive. Screens were decluttered from an overwhelm amount of info. Theme of sustainability was promoted and used as accent of the design language.
Ferratum Design System covers all channels with comprehensive guideline and resources for designers from: design tokens, tone of voice guide, motion and information architect.
Ferratum DS has improved ROI, making it easier to launch new products / channels, standardise design language, increase working efficiency, improving general UX (taking design deliveries' quality to the next level)
Conclusion & success metrics
With the removal of onboarding bottleneck, more and more users get to experience the app where they find their financial needs addressed.
Ferratum Mobile Wallet was launched successfully in Latvia in 2020 (~100.000 downloads) with upcoming other European countries in 2021. Ferratum web channel has driven sales up 20% on average across all active countries. Ferratum's digital presence is now more unified and coherent than ever.
On the contrary note, there was still rooms for improvement, such as motion and animation aspect of the design weren't invested properly. Due to resource constraint and limited capability, generic / pre-made motions were used widely. Sound and tactile feedback were neglected totally too.
UI developing and refining cycle was still very troublesome, with developer and designer cooperation wasn't always smooth.
Frequent business direction changes and delays hampered design process and overall project's velocity.