MFT Banking Transaction Module

Developed and Designed a New Section for CoEnterprise Web Application

Company Overview

Client: CoEnterprise
Software: Syncrofy
Industry: The AI-Enabled Supply Chain Platform. Step into the future of data with Syncrofy for faster, more detailed visibility to accelerate decision-making, predict delays, and grow your profits.
Role: Lead UX/UI Designer
Project Team:

  • Product Manager
  • Developer
  • Stakeholder

Objective: Design and develop a new Managed File Transfer (MFT) Banking Transaction Module for Syncrofy, enhancing the platform’s capabilities to securely and efficiently handle high volumes of banking transactions. Ensure seamless integration with the existing platform while addressing the unique needs of various clients under tight deadlines.

Introduction

The goal was to provide clients with a robust tool to handle high volumes of banking transactions securely and efficiently within the existing Syncrofy platform. My task was to design this new module, ensuring seamless integration with the platform and addressing the unique needs of various clients.

The Challenge

  • Limited Knowledge & Guidance: Starting with minimal understanding of MFT banking and little initial direction from stakeholders.
  • High Transaction Volumes: Clients processing up to 10,000 transactions per hour required a design capable of handling vast amounts of data efficiently.
  • Security Concerns: Needed to display essential transaction information without exposing sensitive data vulnerable to hackers.
  • Consistency & Scalability: The design had to integrate with Syncrofy’s existing UI and be adaptable for future use in other platform areas.
  • Tight Deadlines: A quick turnaround was essential without compromising quality or user experience.

Key Responsibilities

  • Research and Analysis: Conducted extensive research on MFT banking transactions and industry best practices.
  • UX/UI Design: Created the MFT Banking Transaction Module and Notifications section using Figma.
  • User-Centered Approach: Developed personas and information architecture to prioritize user needs.
  • Accessibility and Security: Ensured designs were AA-compliant and adhered to security protocols.
  • Collaboration: Worked closely with the developer and product manager to align on technical feasibility and business goals.

Team Collaboration

  • Developer Coordination: Regular consultations to ensure technical feasibility and refine designs based on practical constraints.
  • Banking Manager Interview: Conducted an in-depth interview with a banking manager from a major bank to gain valuable insights into user needs, pain points, and security considerations.
  • Stakeholder Engagement: Presented design iterations to the product manager and stakeholders, incorporating their feedback to meet business objectives.

Design Process

Research & Discovery

  • Self-Education: Leveraged resources like Perplexity to understand MFT banking transactions, common data elements, and industry standards.
  • Platform Analysis: Reviewed Syncrofy’s existing design to identify reusable elements and areas for improvement, such as navigation issues and horizontal scrolling challenges.

Design Strategy

  • Figma Implementation: Recreated existing Syncrofy UI elements in Figma for easy modifications and consistency.
  • Persona Development: Crafted user personas focusing on banking professionals managing high-volume transactions.
  • Information Architecture: Organized data hierarchy to highlight essential information like transaction status, errors, and processing times.

UI/UX Design

  • Navigation Simplification: Redesigned the layout to improve access and flow, minimizing horizontal scrolling.
  • Accessibility Focus: Applied AA-compliant standards with appropriate font sizes, color contrasts, and clear headings.
  • Visual Enhancements: Used subtle color coding to differentiate transaction statuses (e.g., errors, delays) for quick recognition.

Notifications & Alerts

  • Redesigned Notification System: Modified notifications to persist until manually dismissed, preventing important alerts from disappearing.
  • Alerts and Events Pages: Created dedicated sections for users to filter and manage notifications by date, severity, or transaction type.

Results and Impact

  • Stakeholder Satisfaction: The module was well-received, appreciated for its seamless integration and potential application across other platform areas.
  • Improved Usability: Users found the new module intuitive and effective in managing high transaction volumes.
  • Security Compliance: Successfully balanced detailed transaction information with stringent security protocols.
  • Accessibility Enhancement: Meeting AA compliance standards made the module more user-friendly for a diverse user base.

Conclusion

This project demonstrated my ability to:

  • Adapt Quickly: Learned and applied new industry knowledge under tight deadlines.
  • Lead Independently: Took initiative in driving the project forward with minimal supervision.
  • Design User-Centric Solutions: Focused on real user needs to create an intuitive interface.
  • Collaborate Effectively: Maintained open communication with team members to ensure alignment and feasibility.
  • Enhance Platform Consistency: Improved navigation and design elements for better user experience across the platform.

Reflection on UX/UI Design

  • Proactive Learning is Crucial: Diving into unfamiliar territory broadened my skill set and contributed significantly to the project’s success.
  • Communication Bridges Gaps: Regular dialogues with the developer, product manager, and banking manager were essential for aligning goals and expectations.
  • User Needs Drive Design: Prioritizing the end-users’ challenges led to a more effective and appreciated solution.
  • Design for Scalability: Creating adaptable design systems ensures longevity and broader applicability across products.
  • Embrace Challenges: Tackling complex problems under pressure enhances problem-solving skills and confidence.