Accounting - Bank Sync Feature
HEMLANE
Hemlane is a property management software which offers many useful features, such as expense tracking and rent collection, for its users. However, the accounting feature has been very basic and lacking. Many customers expressed needs of an bank synchronization feature to streamline their financial management and bookkeeping of their properties. My responsibility was to redesign the financial dashboard and design new features to manage imported transaction records.
Impact
The accounting suite which the Bank Sync is apart of has reduce $51K of churn and realized a 32% adoption rate within the first 30 days of launch
Marketing graphic I created
Overview
Timeline
Jan - Apr 2024
Role
Lead UI/UX designer
Platform
Desktop, mobile
Tool
Figma
BACKGROUND
Customers were churning because the accounting feature has been lacking :(
The team has noticed from feedback and reviews on various platforms that users faced difficulties managing their financial records on the Hemlane platform. Users often end up using another software to handle the financial aspects of their properties, which is one of the main reasons people are switching to our competitors.
"We have outgrown Hemlane. The accounting and maintenance services are not sufficient for our operations."
The accounting body of Hemlane is not suitable for the amount of doors for my portfolio... [The] product just doesn't fit my needs anymore."
BIG CHANGE
The previous lead designer departed in the middle of the project, so I took on the job.
THE GOALS
What we want
-
Iterate and design a more intuitive version of the dashboard to display both newly imported records from bank sync & the existing payment records from the Hemlane platform.
-
Implement new features to edit, exclude (hide from view), connect, and split transactions for bookkeeping.
MY IMPACT
What I did
-
Updated the financial dashboard to fully display different statuses of transactions.
-
Created high-fidelity mockups ready for development.
-
Designed individual modals for different actions including splitting and editing the transactions.
-
Exercised interdepartmental collaboration and held multiple work sessions.
RESEARCH
Conducted UX audit, analyzed competitors, and gathered existing best practices.
Examined 3 major competitors' financial management features
ANALYZING & BRAINSTORMING
Created user personas and user flows
User flows focused on the journey owners take to manage transactions in different ways
HURDLES
We faced some challenges
Scope increase
-
In the beginning, the team discovered misunderstandings and confusion surrounding certain processes, and it became evident that most designs of the previous designer were not feasible. As a result, the initially planned dashboard and feature designs required significant reworking which also expanded the scope of the project.
-
The team conducted group sessions to exchange new information, reach alignment, and collaborate on user flows.
-
We kept the stakeholders informed about the challenges and effectively modified the timelines.
Confusing wording
-
The modals' wording became confusing due to overly explanationing, making them less user-friendly.
-
Since we lacked a UX writer and were pressed for time, I recommended involving the support team, who were familiar with user vocabulary and thinking processes. We invited support to the meetings, and together, we finalized the UI copy.
Problems & Solutions
How to display the direction of the money flow?
We have been displaying money flow between two accounts solely through text. It is hard and more cumbersome to read especially on a data table dashboard.
How can we show the direction of money flow with sender/receiver clearly marked?
Solution
Redesign the fields. Show the two parties of the transaction and then use arrow icons to indicate the direction of money flow.
Old
New
DESIGN
Wireframes
A shot of wireframes for the merge transaction process
Hi-fidelity mockups
Updated dashboard
Split transaction modal
Edit transaction modal
Transaction details modal
PROTOTYPE
Try how it works
The prototype includes the dashboard and actionable interfaces for editing, splitting, and connecting transactions.
LAUNCH AND FEEDBACK
Beta-launched and positively received :)
"I'm thrilled about the new connect to bank feature. I'm going in [and] categorizing all of the connected transactions now. It came just in time because I was trying to manually add a few of my YTD transactions in prep for my taxes next year."
Iterations
We received many feedbacks, which some users expressed they only wanted the year-to-date transactions. I had a follow-up with the engineer and created a modal with the ability to pick the specific time range which they wanted the transaction records to be imported from.
In-app screenshot
CONCLUSION
Importance of collaboration
This project serves as a strong reminder of the importance of actively seeking help, learning, and ensuring alignment across different parties. Through close collaboration with project managers, engineers, and other departments, we successfully overcame challenges and launched the product according to the adjusted date. User feedback was gathered at both the beginning and end of the project, laying a robust foundation for future enhancements.