Athena is a cross-platform app that allows people to manage their finances, create budgets and saving plans and also offers integration with bank accounts, credit cards or online payment services.
I was asked to be the lead UX/UI Designer for Athena. A cross-platform product (desktop, mobile & tablet) that allows users to manage their finances, offers integration with banks & online payment systems and enables people to easily create budgets & saving goals.
After reading the brief and project requirements I started with thorough research about this field of business. I looked up articles about the best budget and financial monitoring apps and services on the market and begun to use and analyse them daily. During this period I also started to make notes and observations about their functionalities, specifications, user flows and content structures.
With the help of my notes I prepared specific set of questions and conducted couple of inteviews that allowed me to gather more information from the Athena’s potential users about their preferences and needs. After interviews, I established key audiences for the product and also wrote down sample personas from each category which help immensely (mainly to make sure that the final product can be easily used by anybody). Additionally I prepared 3 different scenarios (situations) for app’s potential users, to further understand their behaviouar and needs and to confirm that the project’s main goals will be fully accomplished.
Armed with robust data summary and results from the research phase, I prepared Athena’s sitemap and started to drew sketches for the app screens (all platforms). Sketches for mobile platform are useful materials for creating low fidelity prototype to test the essential user flow and navigation structure, which helped me this time as well. I conducted first testing with low-fi prototype which led to changes in menu structure and navigation. That’s the reason why some details are different between sketches and wireframes.
Wireframing & Prototyping
Based on intense sketching phase, I prepared wireframes for each of the app’s screens for all platforms. For mobile & tablet screens I also drew connections between the screens to highlight their relations. Detailed wireframing is also a great tool for creating medium-fidelity prototypes, which is a always welcomed to further proof-test the project and gather valuable feedback before proceeding to the UI phase of the design (for this I use InVision as well).
Athena’s UI is designed using fresh and distinctive colours with plenty of white space to achieve visual attractivity while keeping it’s interface simple and clean. As the most effective navigation users prefered (according to testing) the bottom tab menu and plenty of sideways scrolling through the app, which is especially friendly on mobile & tablet platform. Athena allows users to create their account and link it with banks within seconds. Thanks to the clean UI, management of the finances, budgets and saving goals is easy for any user. Visual graphs allow to track income and spending, while monitoring user’s habits and financial behaviour, thus helping people to have total control of their finances, which is the most important goal of the project.
Unique budget & finance monitoring app, Athena, combines best of the best. While some competitor’s projects focus only on some parts of the financial activities of the users, our product provides the most effective way how to keep user’s financial credit healthy, lets them to act within their budgets and means and also enables them to easily achieve their dreams with our amazing steps saving goals system.
For research purposes, I used 9 different services and apps daily to get the best personal experience and ideas how to approach my own solution.
Users can see their financial data easily thanks to 4 various visual graphs.
Two-level testing with low and medium fidelity prototypes helped me to polish navigation structure and achieve better overall results.