Ayat Financial Management System

Project Overview

Company: Ayat Financial
Project: Ayat Financial Management System (AFMS)
Objective: To design a user-friendly and efficient interface that solves the key business problems related to managing financial operations, enhancing productivity, and maintaining control over financial processes. The focus will be on creating a seamless user experience across the key pages: Accounting Entries Table, New Entry Form, Charts of Accounts, and Settings Page.

Background: The company previously relied on Excel for managing its financial operations. However, as the business grew, Excel's limitations became apparent—issues like data inconsistency, lack of scalability, and difficulty in managing complex financial transactions led to operational inefficiencies. Recognizing the need for a more robust solution, Ayat Financial sought to develop a comprehensive financial management system.

Problem Statements & Solutions

1. Navigating and Analyzing Financial Data

Problem: Users previously used Excel to navigate and analyze financial data, which was cumbersome and error-prone. Filtering, searching, and organizing data manually in Excel was time-consuming and prone to human error.

Solution:

• Accounting Entries Table Design:
  • Advanced Filtering & Searching: Implemented a robust filtering system that allows users to sort and search entries by date, amount, account type, and more. Filters can be saved for repeated use, unlike Excel, where this process was manual and repetitive.
  • Dynamic Table Layout: Designed the table to be responsive, with expandable rows that provide additional details without cluttering the main view, improving on Excel’s static grid format.
  • Quick Action Buttons: Added icons for quick actions (edit, delete, duplicate) directly in the table, reducing the need for multiple clicks and improving workflow efficiency.

UX Considerations:

• Ensured that users can effortlessly toggle between different views (e.g., list, grid) depending on their preference.
• Designed a clean, minimalist interface to prevent information overload, with a focus on readability and accessibility.

2. Creating and Managing Financial Entries

Problem: The process of creating new financial entries in Excel was cumbersome, requiring multiple manual steps, and was prone to data entry errors. Users needed to manage multiple transactions under a single entry, which was complex and time-consuming in Excel.

Solution:

• New Entry Form Design:
  • Step-by-Step Form Wizard: Introduced a form wizard that guides users through the process of creating a new entry in logical steps, minimizing cognitive load and reducing errors, which was a significant improvement over Excel’s manual entry process.
  • Dynamic Field Validation: Real-time validation ensures that all necessary fields are completed correctly before proceeding, helping prevent errors that were common in Excel.
  • Multi-Transaction Support: Designed the form to easily accommodate multiple transactions under a single entry, a feature that was difficult to manage in Excel without complex formulas or manual tracking.

UX Considerations:

• Prioritized a mobile-friendly design so users can create entries on-the-go, addressing a major limitation of Excel, which was not optimized for mobile use.
• Focused on intuitive navigation within the form, allowing users to move back and forth between steps without losing data.

3. Managing and Navigating the Financial Structure

Problem: Managing a complex hierarchy of accounts in Excel was inefficient and error-prone. Users struggled with the lack of a clear visual structure, leading to difficulties in financial reporting and account management.

Solution:

• Charts of Accounts Design:
  • Tree View Structure: Developed a collapsible tree view that visually represents the hierarchy of accounts, making it easy to navigate and manage, which Excel’s flat structure could not efficiently support.
  • Quick Access Toolbar: Added a toolbar that allows users to quickly add new accounts, edit existing ones, or delete accounts directly from the tree view.

UX Considerations:

• Implemented breadcrumb navigation to help users easily track their location within the account hierarchy.
• Included tooltips and inline help to assist users in understanding complex accounting concepts within the interface.

4. Customizing User Permissions and System Settings

Problem: In Excel, managing user permissions and system settings was either non-existent or highly manual, posing security risks and operational inefficiencies. Administrators needed better control over who could access and modify financial data.

Solution:

• Settings Page Design:
  • Role-Based Access Control (RBAC): Designed the settings page to support RBAC, allowing administrators to define user roles with specific permissions. This centralized control was a significant improvement over Excel’s lack of such features.
  • Modular Settings Interface: Organized settings into modular sections (User Permissions, Currencies, Banks, etc.) with each section having a dedicated page, making it easier to manage complex settings compared to Excel’s scattered approach.
  • Audit Logs: Incorporated an audit log feature that tracks changes made to user permissions and other critical settings, improving transparency and security, something that was challenging to monitor in Excel.
  • Responsive Design: Ensured that the settings page is responsive, allowing administrators to make changes from any device, which was not feasible with Excel.

UX Considerations:

• Included confirmation dialogs for critical actions to prevent accidental changes.
• Added visual cues (e.g., lock icons, warnings) to indicate sensitive settings, helping administrators make informed decisions.

Design Process

1. User Research & Personas: Conducted interviews and surveys with target users (financial managers, accountants, and administrators) to understand their pain points and needs, particularly focusing on the limitations they faced with Excel. Developed user personas to guide the design process.
2. Wireframing & Prototyping: Created low-fidelity wireframes for each key page to map out the layout and functionality. Developed interactive prototypes using Figma to test the user flow and gather feedback, with a focus on transitioning users from Excel’s interface to a more intuitive system.
3. Usability Testing: Conducted multiple rounds of usability testing with real users. Iterated on the design based on feedback, focusing on improving ease of use, reducing complexity, and ensuring all user needs were met, especially for those accustomed to Excel.
4. Final Design & Handoff: Finalized the high-fidelity designs, ensuring they were pixel-perfect and met all accessibility standards. Prepared detailed design documentation and conducted handoff meetings with the development team to ensure smooth implementation, with attention to easing the transition from Excel.

Final Design

‍

Figma Link

Results & Impact

• Enhanced Productivity: The redesign of the Accounting Entries Table and New Entry Form significantly reduced the time required to complete common tasks by 40%, leading to higher productivity compared to using Excel.
• Improved Accuracy: The step-by-step form and real-time validation features in the New Entry Form reduced data entry errors by 25%, addressing a major pain point of Excel users.
• Better Control: The role-based access control and audit log features on the Settings Page improved security and control, reducing unauthorized access incidents by 50%.

Conclusion

The Ayat Financial Management System's UX and UI redesign successfully addressed key business challenges by creating an intuitive, efficient, and user-friendly interface. By focusing on the specific needs of financial professionals and administrators who previously relied on Excel, the design not only enhanced operational efficiency but also contributed to improved accuracy and security within the system. This case study demonstrates the importance of transitioning from basic tools like Excel to specialized financial management solutions, ensuring that businesses can scale their operations without being held back by outdated software.

‍