Senior UX/UI Designer | Transfer Process ING Direct
Ismael E.R.
Optimization of Mobile Bank Transfer Process
PROJECT DETAILS
Redesign of the mobile experience for bank transfers, simplifying workflows, updating the interface with a modern and optimized design, and incorporating key improvements to ensure efficiency and security.
Project Context:
The client requested an improvement to their mobile app’s bank transfer process, which, while functional, had usability issues. These challenges made navigation difficult, particularly in system status visibility and error correction within the workflow.
To address this, I conducted a comprehensive analysis of the current flow and led the design of a high-fidelity prototype that modernized the interface, optimized the user experience, and resolved key issues identified.
My Role:
As a Senior UX/UI Designer, I was responsible for leading all project phases, from the initial analysis to the delivery of the prototype:
Analyzed the current flow: Evaluated the existing transfer process to identify pain points.
Heuristic research: Applied Nielsen’s principles to identify usability issues.
Advanced prototyping: Created high-fidelity interactive prototypes incorporating necessary improvements.
Design System development: Designed reusable visual components to ensure consistency and scalability.
Design Process:
Initial Research and Flow Analysis:
Existing flow analysis: Reviewed each step of the transfer process in the mobile app to identify critical points and friction.
Heuristic evaluation: Assessed the design against Nielsen’s principles, uncovering issues such as:
Lack of progress indicators.
Difficulty correcting errors without restarting the flow.
Excessive text in certain stages.
User interviews: Conducted interviews to understand user needs, frustrations, and suggestions.
Competitive analysis: Studied competitor banking apps to identify industry standards and best practices.
Key Insights and Objectives:
Clear process status: Users should always know their current stage in the flow.
Modern and clean design: Reduced text overload and updated the interface to meet user expectations.
Error correction capabilities: Enabled users to modify information at the end of the flow without restarting.
Contextual help: Added assistance points and information in key areas.
Visual Design and Advanced Prototyping:
Initial wireframes: Designed low-fidelity representations to validate structure and information flow.
High-fidelity prototypes: Created an interactive prototype in Figma incorporating improvements such as:
Progress bar: Visual indicators to show the user’s position in the flow.
Floating menu: A modern, clean design facilitating navigation.
Correction options: Ability to modify details in the final summary before confirming the transfer.
Informative text: Clear messages about conditions and estimated times to reduce uncertainty.
Internal testing: Validated the prototype with team members to ensure functionality and clarity.
Design System Implementation:
Adapted ING’s existing design system to meet the specific needs of the bank transfer process:
Optimized existing components: Refined buttons, forms, and other visual elements to ensure a more intuitive and modern experience.
Extended the system: Added custom components like the progress bar and new help icons while maintaining consistency with the app’s overall design.
Updated documentation: Provided detailed specifications of the improved components, offering the development team a clear guide for technical implementation.
Project Results:
The redesign transformed the user experience for bank transfers, resolving key issues and significantly improving usability:
Clear process status: Visual indicators and informative text allowed users to precisely track their progress within the flow.
Modern, clean interface: The design update reduced cognitive load, making the workflow more user-friendly and appealing.
End-of-flow corrections: Users could now make modifications without restarting the process, greatly enhancing the experience.
Contextual help: Added assistance points and additional information fostered trust and confidence in decision-making.
The delivered prototype not only addressed the identified needs but also laid a solid foundation for future enhancements to ING’s mobile app.
Like this project
Posted May 7, 2024
Optimization of Mobile Bank Transfer Process. Link: https://ismaelportfolioen.framer.website/projects/optimization-of-mobile-bank-transfer-process
Likes
0
Views
10
