Senior UX/UI Designer | Payment Deferral Gateway

Ismael E.R.

UX Designer

UI Designer

Figma

Payment Deferral Gateway – POS Format

Design of an intuitive and visually appealing payment gateway for deferral management, optimized to provide a seamless and professional experience that the client could share directly with their end users.

Link: https://ismaelespana.framer.website/projects/payment-deferral-gateway-pos-format

PROJECT DETAILS

Key Information:

Client: Sistema de Tarjetas y Medios de Pago, S.A.

Tags: UX Design, UI Design, Interactive Prototypes

Tools: Figma

Team: Project Manager

Project Context:

The project aimed to design a payment deferral gateway to simplify purchase management for end users. Starting with low-fidelity wireframes provided by the client, my role, alongside the design team, was to develop the complete visual experience and deliver an advanced interactive prototype.

The prototype needed to be functional while reflecting the brand's professional image and ensuring a coherent user experience. The client intended to use the prototype as a direct presentation tool for their end users via interactive links.

My Role:

As a Senior UX/UI Designer, I led the entire visual process, from interpreting the initial wireframes to delivering high-fidelity prototypes:

Wireframe Analysis: Refined existing user flows to align with visual and functional objectives.

Visual Design: Created a professional and modern interface focused on usability, ensuring consistency with the brand identity.

Advanced Prototyping: Developed an interactive prototype in Figma for real-time exploration of the payment gateway.

Internal Navigation Testing: Validated interaction clarity to guarantee an intuitive user experience.

Design Process:

Wireframe Analysis and Refinement:

Evaluation of existing flows: Analyzed wireframes to identify potential navigation and visual hierarchy improvements.

Stakeholder Collaboration: Conducted meetings with the business team to understand specific expectations regarding aesthetics and functionality.

Documentation: Used FigJam to map feedback and prioritize visual design tasks.

Visual Design:

UI Kit Development: Designed buttons, forms, and navigation elements to ensure interface coherence and clarity.

Color Palette and Typography: Selected a color palette to convey trust and professionalism, paired with clean, modern typography for enhanced readability.

Interactive Design: Added micro-interactions, such as hover effects and smooth transitions, to elevate user experience.

State Representations: Designed clear visuals for different states, ensuring intuitive user interaction.

Multi-Device Adaptability: The design ensured a consistent and optimized experience across three key formats:

Desktop: A full, professional interface for administrative use.

Mobile Devices: A mobile-first approach for on-the-go payment management.

Point-of-Sale Terminals (POS): Tailored for the specific dimensions and functionalities of these devices, ensuring intuitive use in physical environments.

Advanced Prototyping:

Prototype Creation: Built a fully interactive prototype in Figma simulating real-world use of the payment gateway.

Interaction Testing: Ensured smooth user flows for tasks like selecting deferral plans or confirming payments.

Interactive Links: Prepared shareable prototype links for the client to allow end users to explore the platform intuitively.

Internal Validation and Final Adjustments:

Feedback Iteration: Collected feedback from the business team and developers to refine navigation and visual details.

Real-Scenario Simulation: Tested the prototype across devices of different sizes to confirm adaptability and consistency.

Documentation: Delivered a design guide with key components, color specifications, typography, and user flows to support the development phase.

Project Impact:

The final design of the payment deferral gateway exceeded the client’s expectations, significantly enhancing the brand’s perception of professionalism and modernity:

Optimized Experience: End users could intuitively navigate the gateway, select deferral options, and confirm transactions with confidence.

Ease of Implementation: The interactive prototype enabled the client to quickly validate the solution with their end users, accelerating the development process.

Scalability: The modular design allowed the client to add new functionalities in the future while maintaining visual consistency.

Like this project

Posted Dec 19, 2024

Intuitive payment gateway for deferral management, delivering a seamless, professional experience for clients and end users.

Likes

Views