PAYMENT & MANAGE PAYMENT METHODS MODULE

Tasked with integrating a payment method module into the native Dynamics 365 Commerce checkout screens to support both guest and logged-in users. Designed functionality enabling registered users to add and manage payment methods.

OVERVIEW

I led the design of a payment module integrated into Dynamics 365 Commerce's native checkout, streamlining the experience for both guest and registered users. For registered users, I developed interfaces to add and manage saved payment methods.

PROBLEM

In the Dynamics 365 Commerce's platform, store owners can choose from various UI themes to tailor their storefronts. To ensure a seamless and cohesive shopping experience, our payment modules needed to dynamically adapt to the selected theme.

ACTION

Competitive Analysis & UI Exploration

I conducted a brief competitive analysis of payment and manage payment method forms to identify effective UI patterns and labeling. Theme exploration revealed variations in fonts, colors, and component shapes. To ensure consistency and adaptability, I aligned our payment modules using the simplest theme as a guide.

Payment module for credit card on the checkout screen.

Payment module (credit card)

Payment module for bank account on the checkout screen.

Payment module (bank account)

Adding Card Billing Address: Conflicts of objectives

To minimize redundancy, I initially excluded billing fields from the payment module, assuming AVS/CVV checks could use the native billing data. However, I was advised to include street and ZIP fields to handle cases where the card's billing address differs. A product owner noted that users dislike redundant inputs, so adding fields risked frustrating them.

Example showing the card billing address section being added.

Autofilling Card Billing Address

To streamline the checkout process, I proposed autofilling the card's billing address fields using the information from the native billing section. Users could edit these fields if their card's billing address differed. This approach reduced redundant data entry while maintaining flexibility.

Example showing the card billing information being prefilled based on the native billing information.

Designing the Add & Manage Payment Method Module

Building upon established UI patterns and content, I developed the "Add & Manage Payment Method" module for registered users, ensuring consistency and enhancing user experience.

Design showing add and manage payment methods module for credit card.

Add / manage module (credit card)

Design showing add and manage payment methods module for bank account.

Add / manage module (bank account)

RESULTS

Streamlined Content and Effective Layout

Effective Layout for Users & Business
The payment module autofills the card billing address using native billing data—balancing user ease and business needs.
Additional Features for Registered Users
Logged-in users can save cards and set defaults, simplifying future checkouts.
Instant Error Feedback
Inline validation provides immediate, clear input feedback to reduce user friction.
Clear Surcharge Disclosure
A prominent banner under the “Pay by Card” tab ensures surcharge fees aren’t missed.
Seamless Add Card Flow
Instead of an empty state, add card fields appear immediately when no saved methods exist—removing unnecessary steps.

Design showing the autofill feature and additional functionality for registered users.

Design showing inline error message and prominent surcharge info.

Design showing the add new card fields being exposed when there is no payment method defined.

RETROSPECTIVE

Incorporating diverse feedback can be challenging, but asking targeted questions helps clarify intent, align user needs with business goals, and streamline the design process by minimizing unnecessary revisions.