top of page

Payment Modal

Providing users the ability to complete a purchase in the platform.

UX Design • UI Design • Prototype

Role

UX/UI Designer

Toolbox:

Miro, Figma

Project Details
Goals:

  • Give users to the ability to handle payment related tasks in the platform i.e pay for semiconductor reports, and/or extending a subscription.


  • Increase efficiency for the sales team when handling transactions

Design Outcome:

I designed payment modals to seamlessly integrate with the platform UI. I followed the design system to ensure this new pattern was consistent with the TechInsights design pattern.

Figma Prototype

View the payment modals here 

Discovery and Understanding
Payment in the New Platform:

To develop a comprehensive flow that included trigger points, I mapped out the sales team's process and customer life cycle for scenarios requiring payment; two scenarios are outlined here.

Scenario A: An existing user who would like to pay for content they are not yet entitled to which they come across as locked content within the platform.

Payment Flow Diagram-Scenario A.png

Scenario B: Existing users who have an upcoming subscription renewal

Payment Flow Diagram-Scenario B.png
Wireframes

Sketch - Modal checkout with progress steps

User Flow Draft

User Flow Diagram

User scenario:
As a TechInsights sale representative, I need the ability to provide a credit card purchase link to a Platform user who is ready to make a subscription or related payment.

 

As a platform user, I require the ability to make a subscription or related payment smoothly so that I and/or my colleagues can continue using the platform.

Payment Modal-Process Flow V2.png
Project Outcome

  • The Project halted due to underestimation of effort. Initially classified as 'small' but required 'medium' resources

  • Changes based on how the Finance team wanted the requirement to show up

  • Lack of clarity in requirements resulted in iterative changes and last-minute adjustments

  • Manual use of Stripe Payment links emerged as a practical alternative

Learning Outcome

This lesson has equipped me with insights for approaching future projects and emphasized the importance of:

  • Robust project validation from a technical/software perspective

  • The why and how: Articulating project purpose across teams for a clear understanding of the intent.

  • Ensuring alignment with user needs and organizational capabilities early on

Questions?

If you're interested in learning more about this project, please feel free to get in touch with me.

bottom of page