52 Weeks of Interaction Design — Week 4: The statistical peek
Peeking through your stats for an expense management app.
This mini-article is part 4 of a 52-part series — 52 Weeks of Interaction Design by Saleh Riaz. The series is meant to be a personal project. Read more about it in the introductory article or find all interactions here.
Week 4— The Statistical Peek
Use case
The user shall land on a dashboard screen where they can have an overview and analytical insights regarding the budget and expenses so they can make informed decisions regarding their expenditure.
Understanding the user and defining the problem
Sarah is a 25-year-old marketing professional who is financially supporting their family. Sarah has multiple expenses such as transportation, weekly grocery, bills, housing, insurance, etc. Along with these, one of the major portions of her salary goes into online subscriptions of digital products that helps her with personal and professional goals. She also frequently works on freelance projects so she has a secondary income stream as well.
With all the inflow and outflow of money, Sarah has been having a really hard time tracking her expenses so she has been using excel sheets to write down the expenses and see what she is saving. The pandemic affected everyone one way or another so she wants to take her expenses tracking to another level so she can track as well as save more than what she already is. She needs analysis of her spending so she makes sound decisions regarding spending and saving.
The innovation in this space lies behind the research on how people are being more reliant on budget management app, specially post-covid-19 outbreak. According to research:
- the 1 million-plus consumers every year who need debt advice
- the 50 percent of consumers who are not confident making financial decisions
- 15.1 million people in the UK say that they regularly run out of money every month
Read more about the research on Open Challenge 2020
Discovering solutions
Empathy helped me understand what Sarah is going through and what her needs are for this problem space. A quick brainstorming session helped me ideate some solutions to the problems.
- An app that tracks her expenses
- Encompassing a wide range of categories of expenses and an easy way to add them into the app
- Analysis of her expense activity so she can peek through the visualizations to understand her expense habits and take actions against them
- Goal-based savings with defined key performance indicators for her to understand the trends and how she can save efficiently
- Breakdown of her expenditure and insights that can help her compare to her previous months and possibly predict future trends using AI
- Show her options for easy investments from our partners depending on the saving goals she has
The Interaction
I designed an expense management app called Budget Pro to track down her spending. To have a visualization of what has been the trends of their spending, a dashboard screen is necessary to display all the analytics. This prototype shows an interaction for the aforementioned dashboard/overview screen along with micro-interactions for each chart.
While prototyping, a few important design decisions have been taken:
- All interactions and animations will be timed at 0.4 seconds according to Doherty Threshold Law of UX. However, just for testing the visual animations, the video has been slowed down a little.
- My romance with Aesthetic-Usability Effect continues in this week’s project as well. I tried to make the app look as beautiful as I could instead of a boring old style guide with limited visual elements so the users could be delighted by using the app itself.
- Since the app is designed in dark mode, it is really important to check the WCAG standards of text accessibility. For ease, Google Material Design’s guidelines for dark mode is used which has an AA standard of at least 4.5:1
Expense management apps are really tricky to understand, learn and use. Budget pro does not only offer expense management but also offers advanced savings and investment solutions. So whenever any transactions or money is involved, we need to be careful about the user’s data and its security.
Another thing added into the mix is the use of gamification. Gamification is a method to insert gameplay elements in non-gaming settings so that the engagement of the user and product increases. In our setting, we couple it with the goals of users so that they can reach micro-milestones. For starters, badges are giving to the users who reach some goals and the whole process can be incentivized as well.
Testing the design
The prototype was tested for general usability issues by dry-running the dashboard use case. The micro-interactions for each chart were tested with the users to see if the design fulfilled the identified needs. I tested it on real device as well several times to see if the visual design is in place.
Note: The video is slowed down a little while testing to identify any animation flaws
52 weeks of interaction design is a personal project by Saleh who is a product designer. The intention of this project is to create humanizing, unconventional designs since the design must always keep evolving, and creating unique designs is essential to give products a unique identity.
Saleh is a product designer working on digital products, crafting their concepts, interactions, and experiences. Find more about him on Behance, Dribbble, LinkedIn, and Twitter
