Research on the design of a mobile bookkeeping app by Tencent designers

Not satisfied? Tencent's Yixin students are not satisfied with the accounting software on the market, they simply designed a section. This article shared his entire design exploration process, want to know how professional designers from scratch a design of the app, on the details of how to deal with, see this is the right!

Modern smartphones provide us with a very rich and useful function, for example, I usually rather care about money to the whereabouts of me, is a mobile phone book app users, have tried a variety of bookkeeping app, but seems to have so little dissatisfaction, so I think if I design such an app, how will I design it? ? This document is a mobile bookkeeping App design exploration process.

　　First, the thinking before design

Simplicity, efficiency, and security are the three key words that come to mind at the beginning of the design.

In the course of the day, I am likely to have multiple billing requirements, which means that I will frequently open the product, simple and efficient to enable me to complete the task faster. Accounting because it involves the issue of money, so it also needs a certain degree of security. If you want to give this App a location, I think it's a lightweight mobile bookkeeping app that meets the basic public billing requirements.

Based on the above thinking, the following manuscript was soon produced:

Visual presentation, I made it very simple and clean, after entering the password to unlock the direct rendering of a list, the lower left corner is a resident floating green Add button, to add an expenditure or income.

There are, of course, more elegant options than buttons:

A new expenditure or income is developed by means of gesture pulling, because the advantage of gestures is that there is no fixed point of order to operate the position, can have higher efficiency.

Although the seemingly plausible initial scenario appears, if you think about it carefully, you'll find that it doesn't actually solve the behavior you want to be more efficient in bookkeeping. For security reasons, you always need to enter a four-digit password when you open the App, and then you can enter the billing behavior, which allows you to press a few more times each time you keep your account.

To solve this pain point, I started from the most basic use of the scene, thinking about the following questions:

What is the purpose of my opening the book App?

Why do you charge?

When is the bookkeeping?

For the first question, the answer is clear: The purpose is to account for or view income and expense reports. The second problem is that the purpose of bookkeeping is to understand the financial position/income distribution. And for the third question: Typically, after a single consumption is completed, or perhaps at night, to recall the whole day's consumption record.

After finishing these thoughts, I finally decided to redesign a new design plan.

　　Second, after thinking of the heavy design

Non-primary function should not be a barrier on the main path.

In many of the bookkeeping apps I've tried to do, they all provide password-protected functionality, but also because of this password-protection feature, there are a lot more steps to bookkeeping. At this point, Kingdee's "easy to Remember" do a good job in the password protection interface provides a shortcut entry. However, from my point of view, I don't really like the way a few shortcuts are in the password-protected interface, at least I want to make the interface a little more concise without impacting the actual experience. I've come to the conclusion that password protection needs to protect the privacy of the bill, not the "bookkeeping" behavior.

Can do a bold setting, open the App, if directly into the billing interface, you can save me a lot of operation steps, or even subtract the password protection interface Click a quick entry behavior.

So the redesign of the interface was released.

When I opened the APP, presented in front of me is the billing interface, I can directly enter the number after the click on the check to complete a bookkeeping operation. In the upper right corner, there is a function entrance to view the report, when I click on this icon, will pop-up password box, enter the password can enter the report interface.

　　A little bit of intelligence can improve the user experience

Back to the second question I thought about, the purpose of my bookkeeping was to "understand my financial situation". Therefore, the budget function and its associated reminder function become particularly necessary. I envision a feature called "Budget", when I set my monthly budget and the monthly expenses exceed my budget, then the titlebar will turn red on the front page to warn you that you should save some money.

As for when I will book the issue, because in many cases, I will be the time to complete a consumption of the bookkeeping, so my idea is based on the time to open the sentence, such as the opening of lunch time, the category icon is the default selection Food option. On the weekend afternoon tea time, the category icon will automatically select the choice of leisure class, if the program development in the Intelligent learning module, it can even according to the user's personal habits, for each accounting time for classification of the choice. Reduce unnecessary steps by using a predefined scenario to minimize the actions that I might click on.

　　Service for efficiency, optimization in interactive detail

When viewing the report interface, you will encounter some need to switch year, month or week for the time, because the phone screen in the constantly changing circumstances, if the Tab is placed at the top, one hand operation when switching will become difficult. So for the switch time this dimension of operation, I also reconsider, use the drop-down gesture to solve.

　　Third, visual design

I gave this product name save+, that is to give a more economical implication, although the product is an accounting for the purpose of the APP, but I want to convey to the user is not how much money I spend each month, but how much money to save the feeling. So the design of the icon uses a piggy bank as a metaphor.

Brisk, Affinity

Simple, efficient is the design of the APP's original intention, visual presentation needs to be passed to the user "light" feeling, concise and clear icon and keyboard as the main interface elements to meet the intuitive feelings, so that people can be opened after the direct operation. A color-checked state is done for each category icon, and a mild color makes the interface less monotonous and more approachable.

　　The graphic mystery in the icon

Many categories of icon, visual design to maintain a unified language can make the overall feeling stronger. There are three types of classification icon types: circular, square and oblique, on the basis of which to maintain the overall unity and fullness of the icon.

　　Conclusion

When the design given a proposition, I believe that from the different use of scenarios and requirements of the perspective of interpretation will often give different design solutions, from the actual use of the scene, aiming at a even small pain point to think, often can find a new breakthrough, And this breakthrough is more likely to be directly to determine the product differentiation trend of the key factors. When the idea is not open, may wish to temporarily put down the design task, first find out this breakthrough, as the basis for design and guide to design products.