My last project was a mobile app for iOS, so my main goal with this project was to put my UX and UI design skills into practice and experiment with a new format. Over the course of a few weeks I managed to go from an idea to the finished user interface of Budgety, an easy to use expense tracker for the web.
Defining the problem
Keeping track of your money is hard work, so that's why most people don't do it. We have plenty of tools to keep track of our money, but many of them are packed with features most users don't need. This can make users lose interest or feel overwhelmed over time, so they stop tracking their expenses. When I was looking for a new design project, I decided it would be fun to work on a really simple expense tracker. The goal was to design a tool so easy to use that you won't need to spend time learning to use the app main features.
Now that I had a problem to solve, I was ready to start working on both the UX and UI. Of course, I needed to come up with the app main features first, and after a while I decided Budgety should have the following features:
- Ability to add transactions
- The option to create categories
- Searcher to find previous transactions
- Graphs with spending trends
Building a great user experience
One of the most important things in product design is achieving a clear visual hierarchy. We have plenty of tools we can use in order to improve the interface hierarchy, such as white space (or negative space), color and contrast. On this project, I've tried to use enough white space to clearly separate different element groups. Contrast is also key to draw attention to the main components and help the user navigate the interface.
One of the most helpful techniques to check your interface hierarchy is the Squint test, a technique you can use to find out which app elements stand out more. I tested it out by applying a blur layer on top of my design and you can clearly see that the app main action (adding a transaction) stands out really well. Also, it's easy to guess how the app layout works even if you haven't seen the app before.
Learnings
Budgety was a project I really enjoyed working on. I started my product design journey focusing on mobile design, so trying something different was fun. I stumbled with many different problems along the way, but I believe I was able to solve most of them with good results. Overall, the most difficult thing I worked on was the main table, where you can see the latest expenses you previously added to the app.