Case study: Athena

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. Please note that the signed NDA agreement shortens this case study.

Challenge

In 2017 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 create budgets & saving goals instantly.

Research

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 a specific set of questions and conducted a couple of interviews that allowed me to gather more information from Athena's potential users about their preferences and needs. After interviews, I established key audiences for the product and also wrote down user personas representing each group, which helped immensely.

Additionally, I prepared three different scenarios for the app's potential users, to further understand their behaviour and needs and to confirm that we will accomplish the project's primary goals.

Sketching

Armed with robust data summary and results from the research phase, I prepared Athena's information architecture and started to drew sketches for the app's screens (all platforms). Sketches for a mobile platform are valuable materials for creating low fidelity prototype to test the essential user flows and navigation structure, which helped me this time as well. I conducted first usability testing with a low-fi prototype, which led to changes in menu structure and navigation.

Wireframing & Prototyping

Based on an 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 an excellent instrument for creating medium-fidelity prototypes, which is always welcomed to further proof-test the project and gather valuable feedback before proceeding to the UI phase of the design.

Solution

Athena's UI is designed using fresh and distinctive colours with plenty of white space to achieve visual attractivity while keeping its interface clean and straightforward. As the most effective navigation users prefer the bottom tab menu and plenty of sideways scrolling through the app, which is exceptionally friendly on the 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 tracking 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 crucial goal of the project.

Project Highlights

Unique budget & finance monitoring app, Athena, combines the 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 act within their budgets and means and also enables them to quickly achieve their aspirations with our original steps saving goals system.

9

For research purposes, I used nine different services and apps daily to get the best personal experience and ideas on how to approach my solution.

4

Users can see their financial data easily thanks to four various visual graphs.

2

Two-level testing with low and medium fidelity prototypes helped me to polish navigation structure and achieve better overall results.

Post a Comment