A Subscription/DirectDebit
management & tracking app.
The below project involved creating a UI/UX for a
fin-tech app, with a focus on letting their users keep track and manage direct debits/subscriptions coming out of their various bank accounts. 

Keeping track of recurring payments can be difficult.

 

We made it easy.

The project began by performing detailed research into areas such as the target demographic, age groups, usage, goals, competitor analysis and psychological principles suited for the objective. 

Competitors include apps such as Monzo, Truebill, Billy, Outflow & Trim.

 

Through analysing the UI/IX, features, design, target demographic & copy of the above apps, we have compiled the information extracted to help build an intuitive & familiar experience for our users

 

The demographic of said apps are mostly within the 18 - 28 age bracket. They’re attracted to this financing apps for various reasons, however the main are: the fact that they’re still developing their money management skills, have bad spending habits, enjoy having clarity of mind when it comes to their finances and have the desire to stay on top of their accounts in order to enable themselves to maximise activities on a limited budget.

 

18 - 28 year olds mostly value accessibility and convenience due to their fast paced lifestyle, heavily intertwined with the instant feedback made possible due to technological advancements. When designing a digital experience for this specific age group, it’s important to consider their wants such as:

 

  • Instant & to-the-point interactions.

  • Speed.

  • Easily readable information.

  • Accessibility.

  • Minimal learning curves.

  • Familiarity of operation.

By understanding the target audience, we know precisely what they're looking for.

 

This analysis allows us to design a product we're confident they'll love.

Home
Main functions of the app are easily found here. This allows our demographic to find exactly what they're looking for instantly.
The monthly spend is visible in wherever the user may be within the app, in order to keep them aware of current charges.
The main colour of the UI is influenced by the colour of the selected credit card, allowing for a visual experience which feels customised specifically for you. 
Active subscriptions and their monthly price are prominently highlighted to encourage mindfulness.
Calendar
The calendar screen has been designed to visually highlight when the subscriptions are taken out.
To navigate to the sub calendar, the user simply has to swipe from left to right on the card, making their navigational experience rapid and familiar.
Selecting the highlighted date brings up extra information on which charge is being taken out. This allows instant access to any data the user may be looking for.
Any dates, names & prices can easily be altered within the sort menu, making it a convenient experience.

Design Principles 

The Mechanics:

Simplified UI enables easier

access to key insights.

Through stripping the UI features of this app down to their basics, we allow our target demographic to really focus on their finances & spending rather than getting caught up in unnecessary fluff. 

Beautiful graphs provide visual feedback on how your automated expenses are affecting your bank account, as well as providing invaluable insights on spending trends & habits within a certain time period. 

To encourage exploration of the features & information, we eliminated countless menu options and made navigating the app as simple as swiping between different cards. 

By converting the above points into design principles when working on a targeted digital product, we are able to increase the user retention percentage, alongside the likelihood of users recommending the product, actually utilising the features, purchasing a paid plan, and most importantly becoming a loyal customer/user.

Considering the age bracket these users fall into, as well as their wants & needs in terms of a fin-tech app, we can translate the above wants into tangible design properties which allow the above requirements to organically develop while the digital product is being used. The design properties we discovered for this demographic are as follows:

 

  • Relatively clatter free UI.

  • Highly visual layout of information.

  • No overcomplicated features. Prefer minimalism.

  • A quick access dashboard featuring most important information/features.

  • A simple to understand & familiar design hierarchy.

  • Key information to be bold & highlighted prominently.

  • Attractive & Informative use of graphs.

  • No over saturation of micro-features and add-on’s.

  • Use of colour which promotes clarity, calmness & organisation. 

  • Intuitive UX which allows the app to feel highly familiar eliminating a learning curve.

Research Outcomes & Production Response

Most of the competition apps however lack a sleek and modern design which conforms to what their demographic is used to and actually enjoys using, meaning that returning to the app isn’t necessarily something that the user looks forward to. Alongside this, all of the apps mentioned above (apart from Truebill) clearly lack an navigation flow analysis & development which decreases the familiarity aspect, while at the same time increasing the learning curve and excluding a large percentage of their target demographic whom may have a shorter attention span, therefore increasing the chance of them abandoning the usage of said app. 

 

Through looking at what the competitors have done well, and what they’ve missed out on, we have allowed ourselves to build an understanding of how we may be able to get an advantage, while at the same time attracting more traffic towards our digital experience. Based on the above, UI has to:

 

  • Feature a friendly and encouraging tone of copy.

  • Have perfect usability of the core features, in terms of layout, design, familiarity and level of complexity.

  • Consist of a sleek, modern & minimalistic design language which evokes feelings of pleasure & delight.

  • Navigation flow analysis & development based on the personality & wants of the target demographic.

  • The features have to be closely tied in with their visual representation, allowing for a seamless experience.

 

Through combining the target demographics wants and needs in terms of the functionality, with the elements and features which provide a seamless, familiar and intuitive experience, we have all the knowledge necessary to design a digital experience which improves on the competition through gaining insights on their pros and cons. The above paired with customer psychology principles ensures that the product not only functions well, conforms to the target audience and is generally an enjoyable experience, but is also a profitable product which performs in

attracting users, retaining them and converting

into paying customers.

Menu
The menu screen was designed to reduced the amount of options, and therefore encourage exploration via the swiping mechanics.
This screen also allows for quick change between user profiles, as well as setting up charge reminders.
To exit the screen, the user is prompted to swipe up on the nav bar located just below the monthly charge. 
This section of the app also features as a quick access area for the data graphs and trends cards.
Graphs Cards
The graphs cards provide invaluable information regarding spending, in a visual format which helps users stay mindful & aware.
Information is minimally showcased and solely reserved for the key spending factors, in order to not overwhelm the user with impractical data.
The emoji's automatically change based on how the user is performing with their spending habits, overlaid with their budget to allow a quick estimation of the progress. 
The information on the cards are presented in small bitesized segments which help the user absorb the information with more clarity.

Lo-Fi Design:

Testing & assessing the

navigation, mechanics & layouts.

By creating low fidelity concepts, firstly we give ourselves the room to figure out which features and bits of information are the most important for the specific demographic the digital product is for. In terms of SUMA, we realised that our users are most interested in figuring out:

 

  • How much they’re spending per month.

  • Where their money is going.

  • When the direct debits are being taken out.

  • All the above, individually for each card/account. 

 

By figuring this out, we now know which features are to be prominently featured and highlighted on the home page of the application. The leftover features are therefore less important, and can be incorporated on a different page or in a less popular location within the app.

 

Once we’re aware of roughly where the functions will be located, we can begin the navigation flow analysis. This key process allows us to determine how intuitive, familiar and easy it is to navigate the app. The following step is carried out through building a rough wireframe of the potential layout, upon which we allow different users to interact with it, and give feedback on their impressions of how easy it is to use, find different features and the general feel of the navigation. This feedback is then taken into consideration, the layout re-arranged and tested over again until both the users and the design team are satisfied

with the functionality. 

Results

Upon finalising the project, we felt as the pain points, demographic, research, testing and analysis have been adressed and solved efficiently. Every one of these requirements has been met and meticulously solved through the design choices of the SUMA user interface.

The SUMA UI/UX is an accurate solution to the intricate requirements identified via the initial research stage.

The app is currently being built, however throughout the testing phase of the finalised digital product we have found that the target demographic finds the interface a lot easier to navigate and utilise, while generally taking pleasure in the experience the UI/UX provides.

Based on the feedback, its safe to say that this design builds cohesion, order and meaning for the userbase, through utilising their wants and needs, paired with psychological design cues and comprehensive research in a way which organically maintains a meticulously tailored digital experience.

Thank you for viewing!
Setting Up Charges
Again, to minimise unnecessary menus, any changes to charges can are done within the home screen, and accessed in one click/swipe.
The data is fully customisable and does not require linking the app with any external apps, allowing the users to have full customisability.
Swiping from right to left on any subscription, brings up the edit interface where the user can efficiently make changes without leaving the home screen.

Contact.

Albert Basin Way,

London.

+44 74114 20025

Menu.

Home

Portfolio

Start a project

© 2020