💰Payment Dashboard

ROLE

Design Lead

DURATION

Dec 2022 - Present

TEAM

1 Designers • 6 Engineers

Overview

DataChat needs a payment landing page to support first paid version release

  • Plan/Price

  • Payment method

  • Billing History

Problem

The first iteration of the payment page is an MVP aimed at quickly enabling a paid version for the product, which has many limitations:

It's in its raw form without many efforts in design.

It doesn't contain all the important information, such as usage limits.

It is divided into several different tabs, which doesn't offer a smooth user flow.

It is not using white space wisely.

The payment history table is missing important information.

It doesn’t support organization account.

Design Process

Since we have limited resource to support user research for this project, we mainly used secondary research to gain inspiration and draw insights from Dribbble and Bēhance at initial empathy and ideation stage. In addition, we also checked on Stripe design system and other payment pages, such as Amazon and GitHub.

Wireframes

Wireframe

Usability study (TBD)

⚠️ We haven’t received any feedback from users, and this will be coming soon.

Major Design Iterations

✨ key improvements from the 1st version to the 2nd version

Integrate all important information related to payment to one summary page

  • Refine payment method section

    • Add card type for each payment option

    • Make adding a new payment method more noticeabl

    • Apply a visual effect to emphasize the default card

  • Support organization account and display all current users

  • Make the history table more versatile

    • Convert status column to tag which can better indicate different statues

    • Add users column for the payment history

    • Replace link with a button to allow users to download invoices

  • Include usage information to remind users of the available space.

Impact

🏆 Initiated the first payment landing page using an iterative design and agile web development approach, collaborating closely with cross-functional teams, to migrate product from free trial to paid version in 6 weeks.

It’s exciting to see our hard work finally monetized and translated into earnings in a short time.
— CTO
Previous
Previous

ArtHub-Accessible art events

Next
Next

Scale with design library