The Concept
The idea behind the Opus app was to have a single client portal where the user can manage all finances in a single place. It was broken down into 3 main sections, Plan, Now & Bank, that is accessed by swiping to the either side.
Plan
Create a budget and track their expenses, set up savings goals and track their overall progress.
Now
A timeline of all financial activity. The cards are interactive and can be swiped away to hide them. Any important alerts or notifications also appear on this screen, as well as financial insights, hints and product promotions.
Bank
A list of all their accounts, with the ability to see all transactions, make payments and add beneficiaries.
Annotations & Interaction Guide
As part of the developer handover, I created detailed annotation documents to form part of each user story.
They included style guides, interaction flows, gestures, micro-interactions and any other useful information needed to assist them in building it correctly.
This was before I had tools such as Zeplin or Miro available to me, so I had to be as detailed as possible, while trying to answer questions pre-emptively.
Icon Design & Glyph Font
A set of custom icons were developed for the app and converted into a glyph icon font.
This meant that icons only had to be added once, but could be displayed on screen in any size or colour, without loss of quality. It also made it easier to update existing icons as well as add new ones.
I also created a detailed reference guide for developers for using the icon font.
UI Elements Cheatsheet
A condensed style guide that was used as reference by designers in other projects.