Looking For Fashion?




UX/UI Case Study: Balance App


How to keep track of your expenses if you haven’t won in Vegas.

If you have, that’s fine, it still works.

You know what’s the first thing that happens to you when you switch to freelance work mode after also spending a month vacation? You start to keep track of your expenses and savings. And turned out, I couldn’t find a proper app corresponding to my needs so I decided to create one. At least, as a concept.

The Problem

I used the banking apps and while some of them have decent usability and showcase all the states divided into categories per month, that’s still specific information of the one bank account only, not all of them together.

Other issues were:

  • Complex and overloaded interfaces.
  • The synchronization of the new expenses doesn’t happen instantly.
  • The user’s experience doesn’t motivate to keep the financial balance in order to be able to reach the goal in the future.

The last one is an important thing, I believe. I was thinking about a special feature that lets you save the money for specific goals and you’ll be able to see the progress.

The Solution

  1. The clear division of the categories — Expenses, Income, Goal.
  2. The reflection of the financial updates right at the moment.
  3. All the expenses are divided into categories presented with the icons.
  4. The ability to add both daily and category limits.
  5. Motivate users to reach the goal with the help of UX.

The Color Scheme

The main idea was to use the advantage of the dark background, which makes it possible to highlight two opposite states—normal level of expenses vs. above the norm, too high expenses. I chose turquoise and red for that.

Turquoise is the main accent color, it helps to keep reliability and trust feelings to the app.

I couldn’t resist using gradients (my forever love) as it both looks appealing on a dark background and it adds the depth to UI elements.

Iconography

That tiny little thing, the icon is an important element of any interface. For navigation icons, I selected 2 pixels thickness, while for the category icons you see on the picture, I chose 1 pixel.

This difference is based on the role and size. Navigation is a key element, thus it should be prominent. Categories icons are important too but they are bigger and have corresponding titles next to them.

The App

The Clear Structure

As seen on the first screen, the menu takes the whole screen. Each chapter is a card with a distinctive color code. Apart from the title, there’s a large icon. In order not to catch too much attention to these icons, they slightly hide into the background thanks to the gradients.

Still, when the menu is opened user can see the balance (as you should always stay on top of your finances, even literally).

Sections

All the screens are divided into sections which help to bring the info in the right proportion and instantly determine what you want to check now.

The Rule of a Check Mark

A rule of using a check mark (don’t google, I just invented it) as seen on the third screen, instantly brings the message of achieved goals—simple yet motivating element to cheer up the user to continue acting consciously.

Set the Goal

The goal to save a certain amount of money was a special feature I’d like to add. When it takes time to achieve it, it’s important to present the progress in a way that keeps you motivated.

Thus, there’s the high goal, the info on how much you should save each month, and a progress bar. There are bright, turquoise points of the achieved months, which with the help of color meaning and its’ different visual style bring a positive feeling and support to keep going forward.

The Branding

Balance (noun)—a state where things are of equal weight or force (Cambridge Dictionary).

For the icon, I chose the first letter B as it has a balance it itself already—the two shapes it consists of, are equal. The choice of colors was also based on a color palette of the app.

The game of gradients brings the connections of the contrast colors—a brighter green with a purple, a darker turquoise-blue with an intense red shade.

The logo is prominent both on big and small scales thanks to simple shapes and contrast colors.

The Conclusion

Balance app was a concept, at the same time, my goal was to “imitate” the creation of a well-thought, real app. Certainly, I didn’t have testings, interviews, and workshops. I was the only one who worked on this idea but I didn’t want it to be another-nice-picture-without-a-real-idea-behind-it.

That’s why I tried to cover multiple components such as UX/UI for iPhone and iPad apps, branding, website. In this work, I implemented color psychology and user mind behavior.

I was also interested in bringing these ideas because as a user, I didn’t find a proper app to solve my tasks.

I believe, such motivation and approach is a good practice for a designer to train skills in multiple tasks and then, share results with the community.

You can also check the full presentation of the project on Behance.

Thank you for reading!

If you want to see my designs and stay connected, follow me on Dribbble, Instagram, Twitter

You might also like:


UX/UI Case Study: Balance App was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.