ACCIO
Designing a budgeting application that allows users to analyse their finances by creating their own, customised charts
Background
As the Greek economy is recovering, young professionals want to organise their finances and achieve their financial goals. I researched and compared popular expenses trackers and financial tools available in Greece and decided to design a budgeting tool which would address the users’ needs and pain points.
Methods
•Research Interviews
•Persona
•Affinity Mapping
•Users Stories
•Information Architecture Diagram
•Cost - Value Prioritisation framework
Tools
•Figma
•Miro
Deliverables
•Style Guide
•Wireframes
•Mockups
Key Learning Takeaways
•Prioritising based on time constraints and effort required
•Key UI conventions for web and desktop applications
•Creating systems that speed up the wireframing process
Process
During my initial competitive analysis of the most popular financial tools in Greece, I noticed that the apps were too complex, and the information was not organised in a practical way. To further understand the potential users’ habits, motivations and pain points, I interviewed 20 participants between 28 – 38 years old who had a full-time job. After transcribing and coding the data , I decided to focus on 5 participants who organised their finances using a financial tool.
Image 1. Affinity diagram
I organised the information with affinity mapping. The main themes that emerged were:
-
80% participants are budgeting on desktop PC
-
80% of participants use Excel for budgeting
-
60% of participants like to analyse their spending
-
80% of participants don’t rely on bank expenses breakdown charts as the categorisation is crude or inaccurate
Image 2 (left) and 3 (right). Personas
I created personas as a way to stay focused and design for my users. I also created user stories to help me better define user needs.
Image 4. User stories
It was obvious to me that the users wanted a simple desktop app that would allow them to analyse their spending.
How might we create a budgeting app that would allow users to analyse their spending?
Having defined the user needs and keeping in mind my time constraints, I decided to create a budgeting app that would allow users to create their own, customisable charts.
I listed the top tasks my app would perform. The top tasks were:
-
Add income
-
Add expenses
-
Create income/expenses categories
-
Create custom charts
I jotted down ideas for each task, which I then evaluated using a cost - value framework. The cost was dictated by the time and effort required to design and implement the solution and the value was based on the user needs, and heuristics such as findability, discoverability, consistency, and the principles of designing complex apps.
Image 5. Cost - Value prioritisation framework
Once I had selected the ideas that fitted my criteria, I did an information architecture diagram. This made the sketching of ideas that followed a lot easier, as I already had this helpful structure in place.
Image 6. Information Architecture diagram
I sketched my solutions and annotated the sketches. I selected the solutions that were uncluttered and presented the information in a clear and consistent manner, and started creating my low fidelity wireframes in Figma.
Image 7. Annotated sketches
During this phase I focused on the layout. I wanted all the actions to be on the same screen to aid discoverability. I placed the budget and the charts on the same screen, so that users can see both at a glance. At the same time, I kept my designs simple, clean and uncluttered to avoid overwhelming the user.
I moved on to create mid-fidelity wireframes. Having decided on the layout and the information architecture made this process easier and faster.
Image 8. Low and Mid-fidelity wireframes
In this step, I made sure that the important actions, such as adding new budget categories or creating a chart, were findable and could be accessed in more than one ways. Knowing that users like to learn as they go,
I added an undo and redo button to help reverse any errors.
I showed my designs to a potential user that fitted the age group I was targeting and was also budgeting monthly. He liked the idea of being able to create his own charts in his budgeting app and having everything in one place. He suggested changes in the wording (‘Values’ instead of ‘Dataset’ in the Create Chart panel) and indicated that it was not clear which fields could be edited and which could not.
I tweaked my designs based on the feedback. I also realised that the area I had dedicated to charts was only enough for pie charts but not for charts that had more width. To solve this problem, I dedicated more space to the chart area and merged the Create Chart panel with the panel showing the charts.
Images 9 and 10. Mid-fidelity prototypes, Chart panel before (left) and after (right)
Images 11 and 12. Mid-fidelity prototypes, Create Chart panel before (left) and after (right)
Before I moved on to creating the high fidelity wireframes, I created a simple style guide which contained the colour palette of the app, the fonts and font sizes I would use as well as the hifi version of my components. This aided consistency and helped me speed things up by allowing me to replicate the key components in all my designs.
Image 13. Style guide
I chose orange as the colour of my top bar as I find it energising and used blue as an accent colour for buttons as it is complimentary to orange and it is commonly used in this way in web and desktop applications.
I kept the rest of the elements in soft grey tones as I find it easier on the eyes and not overwhelming to the user. Lastly, since most of my users were using Excel for budgeting, I referred to Fluent UI and made an effort to have a feel similar to MS Office applications.
In terms of typography, I used Noto Sans as it is clean and easy to read. I used the contrast between the Regular and Semibold styles to show the hierarchy of elements on the screen.
Image 14. Accio mockup - Main screen
Image 15. Accio mockup - Main screen, Create chart panel
Next steps
As a next step I would add more colour to further show the hierarchy between the elements on the screen and I would perform usability testing to uncover any issues with my designs. Also, since this application is aimed at the Greek market, I would create a version in Greek.