Take Control of Your Finances
Effortlessly manage your expenses anytime, anywhere.
Discover Klip
ABOUT THE PROJECT
Klip is a Financial Healthcare application
Klip holds a special place in my heart as it was my first project as a UX/UI Designer. Through this project, I took my initial steps in Figma, app design, design systems (material design), atomic design, and, most importantly, UX fundamentals.
With thorough research, an innovative design approach, and user testing evaluation, I developed this prototype app concept to help people better understand and manage their finances.
ROLE
UX UI Designer Apprentice
ASSOCIETED WITH
CoderHouse
DATE
March 2022 - July 2022
Insights
Project Brief
A large portion of the young and adult population from Latin America lacks of a proper financial education despite having free access to a it. According to El Economista and Forbes, 4 out of 10 adults experience daily concerns for their financial situation.
This situation leads them to live at the limit of their profits and expenses, which of both, lose control and trajectory easily. The main obstacle is maintaining a record of the expenses made during the day or the week.
The current available apps don't help the users to achieve this goal. Multiple steps to register an expense, confusing Ui with poor aesthetics, and overall engaging experience make the user prefer evade making a simple task.
Proto-personas and User-Personas Analysis
Right assumptions
Users frequently make expenses without registering.
Users wish for a better control of their finances.
Users most probably will have heavy expenses in the near future.
Wrong assumptions (corrected)
Users do not have a current concern for future expenses.
Users have a basic kind of financial organization.
Users did know about finances, at least a bit of it.
POV - What does the user needs?
Israel (stakeholder) is a QA Tester since 2 years ago. He partially contributes to the house expenses. Frequently, he visit his friends to play boardgames paying Ubers and food.
He needs to start managing his expenses effortlessly because when he do his finances at the end of the month he finds out he doesn’t remember his spendings.
Because he has the objective of making himself discipline to maintain healthy finances.
"For frequent transactions, an effortlessly accessible on-the-go expense manager app is ideal for developing and maintaining healthy finances."
Ideation
Minimum Viable Product (MVP)
Based on the user´s POV, the essential app functions for the user to perform in order to satisfy his necessities were defined.
Release Version
1st Stage
Record expense
Goal: record expenses.
2nd Stage
Show financial report
Goal: manage the expenses.
Information Architecture
Taskflows
User´s happy paths from the MVP´s 1st and 2nd stages.
User who desires to register a new expense.
User who desires to see/check the monthly financial report
Prototype
Low and Mid Fidelity Wireframes
Report Screen
Register Screen
Home Screen
Profile Screen
Planing Screen
Confirmation Screen
Evaluation and Iteration
Iteration
Executative Summary
What worked
“Fast Register” was very attractive for the user.
Expense Summary shown on both “Summary” and “Profile”.
Summary with information displayed.
Navigation bar.
What didn´t worked
Floating button for registering an expense. It was unused on the test but for accessibility it will be kept.
Categories won’t work as should for visualisation.
Recomendations
Make categories icons bigger and interchangable.
Information needs to be consistent between pages.
Add color.
Check if “Hide quantities” bottun is really needed.
Add icons to accounts.
Have a default activated account at from the beggining.
Make more atractive expenses summary tab.
Graphics must be simplier.
Delete date token, it is missinterpreted for an input.
Change enter icon to avoid missinterpretation.
Change text “Add pay method” for an icon.
In Accounts change plus button for another sign to avoid confuse on adding another movement.
Simplify information of home.
Delete reports on profile page.
Change avarage expenses for total expenses.
Changes indicator based on recommendations:
Changed for las version
Pendent for revision
UI Design Kit
Material Design for Android
Moodboard
Finances, Trust, Comfort
Heuristics Evaluation (Nielsen)
Visibility of system status
Feedback.
Snack-bar feedback.
Text-field highlighted when selected.
Match between system and the real world
Use of same concepts through the app´s pages.
User control and freedom
Switches on accounts and categories.
Snack-bar for error recovery.
User control and freedom
Switches on accounts and categories
Snack-bar for error recovery.
Help users recognize, diagnose, and recover from error
Enter button can only be activated after completing the minimum input fields.
Consistency and standards
Use of categories and accounts with visible balances.
Last expense history.
Recognition rather than recall
Two buttons for registering expense.
Register from any screen with F.A.B.
Flexibility and efficiency of use
Card for fast register is simplified if not used.
All-in-one account overview.
Short copy texts.
Aesthetic and minimalist design
The core functions of the app cannot be completed if there is an incorrect or empty input.
Help and Documentation
Tutorial and Help in hamburger menu.
Onboarding of the MVP´s functions.
Try it yourself
Prototype only in Spanish.
Explore more
Project orginally made in Spanish
