Monese's journey from mobile to web
Here at Monese, we’re committed to providing financial freedom for our customers to live and work anywhere. Listening to our customers’ needs and thinking about the borderless generation with an entrepreneurial spirit, we embarked on a journey to expand Monese products from mobile to web.
Based on research, we were able to discover the functionalities our customers desire and one finding stood out: almost 46% of our customers wanted a web version of Monese for the following key reasons:
- Customers want to be able to access their account without a phone. They need access to their account in case they lose their phone or it’s stolen.
- Customers want to have more complex account management capabilities. Customers who need to manage large amounts of data need the capability to simplify how it can be found, downloaded and transferred to other accounting or accountancy software.
- Customers want to be able to multitask. Not all customers are tech-savvy or comfortable enough to manage multitasking from mobile. For example, this applies when you’re calling your clients or bank and need to have a look at your statement and account information at the same time.
The goal
Our first goal was to build a simple version of a responsive web app with core online money management functionality to test how well it resonates with our customers and learn how they’ll use it.
We started by planning an MVP with core money management features that’d help us validate customer needs for a web app, to understand how people interact with our product. As we aimed to deliver the web app MVP in three months, we aimed to design and develop in an agile way using SCRUM with continuous iterations, based on continuous feedback.
The product MVP allows users to:
- view account balance without a mobile device
- know the total balance across personal, business and partner accounts
- see personal, business and other accounts
- find transactions with detailed filtering options
- search for specific transactions more easily
- sort transactions by date and amount
- download filtered account statements to desktop
One of the main design challenges in this project was delivering the solution in a responsive format, so users from mobile, tablet and desktop can access it, no matter their screen size or device. Besides that, we also wanted to keep the design consistent with the Monese mobile app and provide customers with solutions for the needs we identified, adding value to specific features that could be explored more with a larger screen size.
Once we had produced our first MVP designs, we decided to test a prototype. The test involved asking users to log in online to check their balance and perform some basic tasks framed around filtering their transactions. This test included a second mobile prototype that participants had to use to authenticate their first access.
The outcome of this test was the discovery of login design issues in the early stages, which could be easily fixed with clearer information and an explanation of what happens during each step of the flow.
When it comes to navigation filtering, despite the limitations of our prototype, users liked to play around with filter and sorting options. This made the importance of this feature much clearer for us.
Several users also gave good feedback about the simple and clean look, and the overall familiarity with the mobile app. In general, the outcome of this testing was great, as it allowed us to understand the necessary improvements, and confirmed many of our research hypotheses.
The MVP development
Monese for web was built using a micro-frontend approach. Our different micro-frontends are deployed using dedicated servers and integrated using web component specifications that keep the solution framework-agnostic.
Our web app is implemented as an SPA (Single Page Application), built using the React JS framework. The backend services are accessed via the web API gateway. All backend data and functionality is exposed through GraphQL endpoints. Services behind the Web Gateway API are responsible for supporting front-end services with data behavior.
It was built so that every product team is able to work independently and separately as the product grows, performing web-related server-side operations and accessing third-party services.
When it came to the security of Monese for web, the site was developed and independently tested to OWASP Application Security Verification Standard level 2.0, to ensure our customers’ money and data are secure.
Final thoughts
We’re committed to building a seamless online experience for our users regardless of device or browser. We want our customers to enjoy Monese wherever and with whatever they feel most comfortable.
This is just the first iteration — we’re exploring making a lot of improvements to the web experience, but more on that later. If you’d like to try it out, visit Monese to log in or sign up. 🙂
