UX/UI Case study
User: business owner or accountant
Main task: keep all finances up to date and see all main financial metrics such as revenue, expenses, and profit.
Features that have to be included in the prototype:
- Review, update and create transactions with different bank accounts: Cash, Credit card, Bank account -USD, Bank account — UAH.
- View report on main metrics (over a time period) — revenue, expenses, income/profit, top revenue categories, top expenses categories.
Design proccess
I decided to follow IDEO’s Human-Centered Design and Lean UX Design Thinking process.
To find out more about the area of concern through observing, engaging and empathizing with people to understand their experiences and motivations.
Why user will use our web application?
- to keep all finances up to date
- to see incomes and expenses for time period to see growth of business
- to save all information about transactions
Job story
I used the Jobs To Be Done framework to understand users motivation and desired outcome.
I created the following job stories:
User flow
I have completed a user flow structure to see how they will interact with our product. This is one of the most important steps before wireframing part.
Wireframes
Wireframes are a skeleton view of the app or as I like to call it the bones this allows me to focus on key functions, elements, and actions before starting on visual design or putting on some skin.
Visual References
After wireframes i started creating Hi-Fi mockups and create a clickable prototype of my proposed solutions using Figma.
Star with home page
The financial health, flow, and fluidity of your business will ultimately dictate its long-term success, which is why monitoring your money matters carefully, comprehensively, and accurately is absolutely essential. On the Home page I’d like to keep:
- User bank accounts
- Main reporе which includes all money you’ve got,
last activity and ivestmens from 1st day of Month to this day.
Also you can create new transaction.
People mostly read using F-shaped patter. F for fast. In a few seconds, their eyes move at amazing speeds across your websites words in a pattern.
Therefore user will start with greeting saying whats happening with his account today also create new tansaction what is main action for application.
After he can see all his wallets with balance.
In Wallet we get more information about our accounts. There we have balance and update our account. History with statements and statistics, where you can see more details about you money.
Financial graphs and charts visually track liquidity, budgets, expenses, cash flow, and many other financial metrics while helping businesses avoid a monetary crisis by leveraging financial data in real-time, with a comprehensive overview of financial information.
Let’s check and prove some of my decision
Diagrams
According to Material design, the clearer we can communicate our message, the more likely we are to be heard. Pie charts and line graphs can do that ‒ but only in specific circumstances, and only if they’re depicted in a straightforward and clean way. Charts distill a lot of information, but the simpler they appear, the more impactful they become.
According to Usability Heuristics for User Interface Design:
#1: Visibility of system status
The design should always keep users informed about what is going on,
through appropriate feedback within a reasonable amount of time.
#2: Match between system and the real world
The design should speak the users’ language. Words, phrases, and concepts familiar to the user, rather than internal jargon. Followed real-world conventions, making information appear in a natural and logical order.
#3: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
#4: Error prevention
Good error messages are important, but the best designs carefully
prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
#5: Recognition rather than recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
#6: Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
You can also check out my prototype here.
Thanks for Reading
Thank you so much for reading through this case study! Hope you enjoyed reading about my design and thought process, and I’d love to hear your feedback and learn from you!
