Before Refinement

====================================================

After reviewing and using the transaction list, I found several areas that need improvement, including visual hierarchy, redudancy, readibility and scalability.

UI Breakdown (7 in total) 🧩

1. Top Bar

The yellow bar appears out of place and disrupts the visual flow of the top bar, make the page look cluttered and unprofessional, leading to a poor first impression for users.

2. Action Bar

The scattered placement contributes to visual clutter and makes the interface appear unorganized and requires users to move their focus back and forth.

3. Highlight Section

• The icons don’t add significant value beyond the label, and make it look redundant.

• The info tooltip is not aligned with the label, making the design appear cluttered.

• Font size of the labels is too small, reducing readability.“Start send money” button is redundant since the New Transaction button on the left sidebar serves the same function but offers a better approach by displaying a full list of transaction types in a popup form.

• Inconsistent percentage status. Some cards have it, some don't. This inconsistency can confuse users, making them wonder if it's an error or missing information.

4. Tab

• Distinction between the active and inactive tabs is not clear enough. It requires a bit more effort to tell them apart.

• The color of the badge should be more indicate of urgency, such as red. This can help users quickly identify and prioritize tasks that require immediate attention.

5. “Pending Transaction” Section

Redundant. The sticky section has similar function with the Pending Settlement. Potentially confuse users as they wonder about the difference between the two, even if they serve the same purpose.

6. Table - Title

• The icons don’t add significant value beyond the category row label, and make it look redundant and cluttered. Increase the cognitive load of user when reading the table.

• The “/” symbol on “From/To” title can be interpreted in multiple ways. It could mean “or” or indicate a range, which might cause confusion.

7. Table - Row Content

• The icons, which don’t provide much value beyond the title label, make the interface look cluttered and redundant. Also users may struggle to distinguish between ‘Send Money’, ‘Bulk Transfer’, and ‘Single Transfer’, as well as between ‘Receive Money’ from refundable and non-refundable sources. It will increases the cognitive load on users when they’re reading the table.

• The absence of a status row to clearly indicate transaction statuses can cause users to feel uncertain and insecure, leading to a poor user experience.

Proposed Design (7 in total) ✨

1. Top Bar & Action

• The yellow bar has been positioned at the top of the page to enhance visual appeal and minimize distractions.

• Grouping related elements into unified sections simplifies navigation and makes the interface more intuitive.

2. Highlight Section

• “Total Money Sent” card has more elements than the others, so it should be moved to the left for visual balance. Also, adding color shading can help maintain a balanced visual weight and hierarchy.

• The title label is now capitalized to enhance readability.

• “From previous period” simplify to “Form last period” to make it more compact and simple.

3. Tab

• Tone down the inactive tab and brighten the active tab to make it stand out. This way, users can quickly identify the tab’s status.

• Use a red badge to notify “urgent” and “priority tasks”, helping users identify tasks that require immediate action.

4. “Pending Transaction” Section

• The new approach presents clear and concise information regarding pending transactions. The "x transactions" have been eliminated since they are already indicated by the badge on the Pending Settlement tab.

• I assume there’s evidence that most users are not aware of the ‘Pending Transactions’ location and function, then having a dedicated section may one of the solution on previous design. But to ensure that this doesn’t lead to unnecessary redundancy or confusion, I propose to consider adding a one-time information that guides new users to the ‘Pending Transactions’ tab. This can help users understand where to find the location and function at a glance.

5. Table - Action

• Group similar elements for a more intuitive interface. Use the left area for browsing data and the right for actions.

• The column customization feature needs more recognition. Advanced users might love it because it allows customization based on each customer's preferences and needs.

• The red dot serves as a visual cue to attract users to click and try out the button.

6. Table - Title

• Changing "Date of Transaction" to "Transaction Date" to adds clarity.

• Changing "From / To" to "From -> To" to make it more representative and adds clarity at a glance.

• Adding sort capability to multiple columns helps users arrange and work with data provided, increasing flexibility.

7. Table - Row Content

• Adding a "Transaction Type" column helps users sort and filter transactions by type and category at a glance, boosting productivity.

• Increase transaction certainty by adding a new "Status" column.

• De-emphasize the "Transaction Date" to help users focus on more crucial columns.

====================================================

Thank you!