Implementing smart transactions on Android using Kotlin
Not everyone is aware of their spending habits….especially when you’re out and about going to different places. This is why the engineering team would like to welcome an exciting new feature to Monese, which allows our customers to keep track of their spending called smart transactions.
Here at Monese, the engineering team has taken a step forward in making customers spending habits more visible to them. Before it wasn’t as easy for a customer to visualise their past purchases and payments in detail, which is why we’ve developed this feature to make it easier to see where your money is being spent and possibly share a place you may have particularly liked..the world is your oyster!
Out with the old, in with the new!
Above is a snippet of the kind of transactions you should expect to see from now on for any purchases you make in store or online, payments you make to fellow Monesers and just generally spending everywhere you go!
Depending on certain places, you will be able to see instant rich information including a map with the place’s address along with all important details such as a place’s website, contact number, opening and closing times. Should you choose to revisit a place you enjoyed or forgot where you got that awesome coffee from, you can use our app to see these details…kind of like a virtual diary of your spending.
Categorise your spending
We’ve also included a nice small touch where each transaction will be automatically categorised for you based on the place you are visiting. If the existing category is wrong or you wish to change it, then you have the option to select another category for any of your transactions. It’s a handy feature for our customers especially if they like to be specific about the small details of their spending.
Soon we might allow our customers to possibly add their own categories, if the existing category does not match their transaction or exist in our current system. This will help us understand the customer’s spending better and give them the freedom to categorise their own transactions freely. Moreover, if the customer is more cautious about their spending this could eventually lead to better money management.
Bringing designs to life
As part of our rollout of smart transactions, your spending will begin to look much more dynamic and Monese-style bright! There were different states and elements to consider whilst developing the UI, because depending on the type of transaction, not all details were required to be shown per transaction. So we had to think outside of the box but architect the app well to support all different use cases.
In order to create these designs in the Android team, we decided to implement using different layouts including a CoordinatorLayout and AppBarLayout, which as you scroll down the page, transitions with animation into a sticky header. This switch over is obtained with an CollapsingToolbarLayout and with a bit of animated tricks.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:visibility="invisible"
tools:visibility="visible"> <android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/sticky_header_height"
android:background="@color/grey"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:contentInsetStart="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout></FrameLayout>
With these layouts, you have the flexibility to add animations such as fading in and out, bringing the header layout to life and enriching the experience for customers, as well as hiding elements or moving important content to display on the toolbar at all times.
Other parts of the layout is where we display the merchant’s location on a smaller map, from which the customer can tap on, view details about the merchant i.e address, contact details and opening hours and be able to navigate to its location using an external third party application. This is a useful feature especially if you want to track where you used your card abroad, smart transactions will give a log history of all the places you visited.
Challenges faced
There were many obstacles and challenges faced when developing the design of the app, particularly for various screen sizes and ensuring the functionality of the app runs smoothly with all these new transactions without a glitch for our customers. We currently support 4.1 and above, so this presents some support challenges when building complex designs.
One difficult part of the project was determining whether the merchant was in a certain opening period from the API as each customer will be purchasing from various different time zones around UK and Europe, displaying the correct hours in real time were crucial to avoid confusion for customers based on where they live. Some workarounds were needed, but in the end we decided to make use of the user’s device’s timezone and utc offset value from the API response to display correct opening and closing times back to them.
The toolbar animation was also pretty tricky to implement in order to ensure a smooth user experience when scrolling up and down the screen, especially for older versions of Android. Due to the sticky header, there were times when additional spacing would get added to the bottom of the page, making it look too big on larger screen devices, but the gap being too small on a smaller devices, not naming any names..*cough* S3 *cough*. However, this was needed to support the toolbar when the top header would turn into a collapsible toolbar. So small adjustments were made to the design to support most screen sizes.
Lessons learnt
In the aftermath of getting a feature developed and released, there’s always a few lessons learnt along the process. For me, I think creating a clear MVP structure is important, especially when you’re required to create multiple screens with similar sections, it should be developed to adapt to different scenarios.
As smart transactions are custom built to support different types of payments, we needed to ensure the base layout was abstract, making it easy to add additional fields if required for various transactions. By doing so, it was simple making changes to the layout which could either be applied to support all use cases, or particular edge cases, considering we wanted to support many different transaction types.
Gaining experience with developing this feature in Kotlin was enjoyable and unforgettable. Compared to Java, it was much easier being direct with Kotlin, as it is more aware of your layout and its content, which was very handy without having to declare every single element. But always remember to initialise your constructor! Without doing so would result in plenty of null pointer exceptions.
Upcoming feature
At Monese, we think money management is key in making your banking experience with us much more enjoyable. One feature currently under wraps which we hope to be releasing very soon are in-transaction stats. You will be able to see how often you spend at a particular merchant, calculating your total and average money spent for the given month. These details will be supported within smart transactions under different merchants which you’ll be spending your money at.
The benefits of this feature is it will allow you to get a bigger picture of your spending habits at particular merchants as most customers don’t realise where their money is going every day. For example, you could be spending £5 at your favourite coffee place every day, would you realise how much this is costing you every month? Once you see your average spending there, it may nudge you to question yourself, should you be spending this much on coffee everyday? Or, is your money better spent elsewhere? This may not be how all customers think, but we know customers will find this useful based on our user testing.
Thank you for reading my post, I hope you enjoyed it! Please feel free to share this around or leave a clap or two and don’t forget to try out our new feature Smart transactions which are now live for all our users on Android and iOS. The rest of the spending features will be rolling out during 2018 and will likely evolve after further user testing.
This post was written by Faiza Iqbal, Android developer @Monese. This is the fifth instalment in a weekly recurring series from the product and engineering team at Monese.
