Company
Vyond
Year
2025
Keyword
AI system, Growth
Designing an unified AI credit system for Vyond, a video creation app.
Role
Senior UX Designer
Duration
4 months (Jan - Apr 2025)
Responsibilities
End-to-end design execution
Overview
As Vyond expanded its suite of AI-powered tools, the existing per-feature quota system led to siloed usage and user frustration due to inflexibility.
Internally, it also made API cost management complex and inefficient.
To solve this, I designed a unified AI credit system — a single, reusable currency across different AI features. This approach empowered users to allocate credits based on their own needs while enabling the business to monitor API spending under a consistent measurement.
The AI credit system also became a foundation of the plan restructure initiative, improving differentiation between subscription tiers.
Impact
Overall, the initiative drove a $50K increase in MRR and generated over $1M in qualified sales within two months.
The AI credit system was launched alongside restructured plans in May 2025. The new Enterprise plan, featuring unlimited credits, saw a 10% increase in adoption. Across all users, AI features engagement rose, with most consuming less than 50% of their monthly credits, showing both increased use and sustainable limits.
Highlights
I designed an AI credit system with a scalable, reusable component for multiple AI features, a credit usage page, and a new pricing table highlighting credits as a key plan differentiator.
Users can share the same credits across AI features via a consistent UI pattern
I designed a credit component placed next to each AI feature’s call-to-action button, using a coin icon to visually represent the credit system and maintain consistency across AI tools.
The design was lightweight and scalable, making it easy to reuse for future AI features.
Users can make sense of credits through contextual component states
The credit component integrates with the backend to sync data in real time across the platform.
I designed multiple states to handle various features and API scenarios, including:
Syncing and displaying current credit balance
Calculating and showing dynamic credit costs
Triggering error messages when issues occur
Prompting upsell messages when credits are low
Users can track their monthly credit usage through a centralised page
I designed a ledger-style page that records every credit transaction in chronological order, providing transparency and building trust in the system.
This visibility helps reduce user anxiety around spending and empowers users to plan future usage.
Users can clearly see plan differences through credits in the new pricing table
I redesigned the pricing table to spotlight credit allowances, using a side-by-side layout to highlight value differences across plans.
The Enterprise plan featured unlimited credits, creating a compelling upsell narrative and making plan differentiation more transparent to users.
Continue reading if you wish to see process and more context :D
Background
Vyond has evolved into an all-in-one AI video creation platform.
In the past few years, Vyond has evolved from an animation-only platform into an all-in-one AI video creation platform due the rapid development of Artificial Intelligence.
While Vyond invested heavily in developing AI capabilities for the video creation workflow – including features like text-to-video, text-to-speech, text-to-image, video translation, and AI avatars, each feature was launched with its own quota system, causing problems in the long-term.
This project aimed to solve these problems.
Vyond’s all-in-one video creation solution
Business problems
Inefficient tracking of AI feature usage and costs.
As more and more quota-based AI features were added, maintaining the separate quota system across three to four plan tiers became increasingly difficult and inefficient. The fixed quota system also made it harder for us to understand the actual usage patterns.
Additionally, fragmented usage data complicated analysis and financial planning for third-party API costs.
Finally, the legacy pricing model lacked usage-based differentiation, limiting upsell opportunities for the Sales team.
User problems
Inflexible quotas and unclear plan differentiation.
Given the quota system, some AI feature usage were low, when compared to others. Users couldn’t transfer unused quota from one feature to another, causing inflexibility.
It was also not easy for users to keep track of the individual quota on each AI feature, causing inefficiency.
Moreover, we’ve also found out that prospective customers struggled to compare and evaluate plans when quotas were inconsistent.
In short, users need a way to use AI feature quotas flexibly and efficiently as well as a simpler way to know which plan best fit their needs.
The legacy plans – lacking usage-based distinctions
Design challenges
One UI pattern that works across AI features
When designing the AI credit system, I faced the challenge of supporting five distinct AI features, each with its own API and interface.
My goal was to create a single, scalable UI pattern that could adapt to future features as well.
Through stakeholder workshops and technical reviews, we aligned on placing the credit component next to each feature’s call-to-action button — an intuitive and flexible location. A coin icon was used to visually signal credit usage.
I then defined comprehensive component states and display logic to ensure seamless implementation. These included syncing balances, calculating dynamic costs, handling errors, and prompting upsell messages — all designed for consistency and future reuse across the platform.
The credit component’s display logic