Litespace Payment Dashboard
Seamless subscription management with Stripe
Project Type
Professional
Timeline
2 weeks (March 2023)
Team
Design Lead, Tech Lead, 2 Engineers
Responsibilities
Research, Prototype, Testing
OVERVIEW
Scalable payment dashboard for subscriptions
As a Product Designer at Litespace, a startup focused on simplifying hybrid work and fostering collaboration, I led key projects and collaborated with cross-functional teams. To address scalability issues with our sales-driven subscription model, I led the design of a payment dashboard in a two-week sprint. Working closely with design and tech leads, I developed a solution to display plans, enable subscriptions and payments, and manage billing cancellations.
PROBLEM
Users struggled with plans, billing, and subscription changes
Following discussions with our Design and Tech Leads, and based on the feedback collected from enterprise customers during earlier demo sessions, we have decided to concentrate our efforts on resolving issues across three primary aspects.
Unable to compare different plans
Within the application, users are required to evaluate various plans and their advantages in order to choose the appropriate one for their enterprise.
Unable to review billing information
After subscribing, users should view their billing details to monitor invoice and order numbers.
Unable to manage the subscription
Users desire a smooth process for canceling and upgrading their plans.
CONSTRAINTS
Adapting to dynamic subscription plans
The company's fast-paced development meant that subscription plans were still evolving when I was given this project. As the designer, I conducted research to help the team validate plan details, including feature and price adjustments. Since the monthly plan was not yet available, I initially focused on designing the yearly subscription version. Additionally, due to limited development resources, we explored different payment methods to determine the most suitable option.
RESEARCH
Learning from industry standards to improve the payment experience
Given that payment flows are a common feature in SaaS products, I used competitive analysis as the primary research method. I collected several screenshots of SaaS payment flows, focusing on subscription, order history, cancellation, and plan switching.
Users desire a straightforward process to upgrade and cancel plans. Modern SaaS products prioritize easily locatable cancellation buttons.
Users cannot remember all features, so listing key elements that differentiate various plans is crucial for informed decision-making.
Users appreciate having access to their billing history to keep track of records. Transparency fosters trust between the product and its users.
Companies that employ third-party payment methods often offer superior experiences. This observation led to the decision to use Stripe to manage different flows comprehensively.
RESEARCH
Identifying common pain points in SaaS subscriptions
Furthermore, I conducted research by scouring various online resources to gain a deeper understanding of the prevalent issues users may encounter during the SaaS subscription process.
Complex Pricing
SaaS platforms typically use complex multi-tier pricing models based on factors like user count, features, and usage. This complexity can often confuse users about what they're actually paying for.
Billing Errors
Users might encounter problems with incorrect charges, double-billing, or being charged for a service they didn't use or cancelled.
Lack of Transparency
Users often complain about hidden fees, unexpected price increases, or lack of clarity about what they're being billed for.
Difficulties in Managing Subscriptions
Users might find it hard to upgrade, downgrade, or cancel their subscription, or switch between different plans.
Poor Customer Support
If users encounter a problem or have a question, they may struggle to get timely and effective help from customer support.
Security Concerns
Users might worry about the security of their payment information, particularly if the dashboard doesn't provide clear information about security measures.
IDEATION
Condensing into three design focuses for the MVP
For the MVP, I prioritized three core design focuses to shape the subscription experience: clarity in plan selection, transparency in billing, and flexibility in subscription management.
Clarity
How might we simplify the plan selection process by effectively highlighting key differences between offerings?
Transparency
How might we ensure users can easily access and understand their billing details, thus improving transparency and trust?
Flexibility
How can we simplify the processes of cancelling, upgrading, and switching plans to improve user flexibility and satisfaction?
CHALLENGE 1
Determining Stripe integration level
The team chose Stripe, a secure and scalable payment platform known for its fast integration, to avoid building a complex custom system. A key challenge was determining the integration level. As a designer, I researched and collaborated with the team to adopt full Stripe integration, balancing benefits and risks to streamline development and ensure a seamless payment experience.
Partial use of Stripe targets its strengths and minimizes dependency, but can complicate integration, create payment inconsistencies, and increase costs with additional services.
Full Stripe integration provides a one-stop payment solution with consistency and extensive tools, but it could be vulnerable to Stripe's downtime and may miss niche features.
CHALLENGE 2
Streamlining user flows with Stripe
Another key design challenge was integrating Stripe into our Payment Dashboard to handle varied financial interactions seamlessly. I tackled the challenge of seamlessly incorporating Stripe by analyzing similar tools and mapping user journeys for plan changes. This led to creating refined mock-ups for our development team.
FINAL DELIVERABLES
Simplifying plan selection and updates
I designed a price card highlighting each plan’s benefits to simplify multi-tier pricing, balancing clarity and transparency. Showing only the current plan avoids confusion but limits comparisons, while displaying all plans can overwhelm users. Directing those needing detailed information to the marketing site ensures simplicity without sacrificing choice.
Users can effortlessly transition to their desired plan using a simplified Stripe flow, with price card button states updating accordingly. For the enterprise plan, a button connects them to sales through Calendly for personalized plan discussions.
Billing and subscription management
The billing information section allows users to review past bills and download invoices with one click, promoting transparency and trust, and addressing concerns about incorrect charges or hidden fees.
To solve the issue of users struggling to alter or cancel their subscription, Stripe provides a dedicated page for managing subscription information. Here, users can easily edit payment details and update or cancel their plans.
Regardless of whether a user chooses to cancel or downgrade their plan, understanding their reasoning is beneficial. Therefore, I propose incorporating a survey into the downgrade and cancellation process.
Trial banner for upgrade reminders
I devised a notification banner to remind users of trial period expiration and the need to upgrade. The decision to include a trial plan came post-initial design due to shifting business requirements, prompting me to revise the original mock-ups to integrate this new feature.
REFLECTION
I contributed to designing a payment dashboard for our SaaS application, integrated with Stripe, which the company launched in March 2023. The dashboard enabled seamless plan management and marked a significant user experience improvement. This project deepened my understanding of user-centric design and the importance of addressing diverse scenarios.
Thanks for reading! 😊
© 2025 Chang Mou. Crafted with 💪 and ❤️
As a product designer, I create solutions that simplify complexity, enhance efficiency, and bring delight to everyday experiences.
For the best experience, please view my portfolio on a desktop.