Circle | Proof-of-Concept
Promoting USDC Meter-Based Billing for AI Inference
Timeline
January - April 2025
Role
Contract UX/UI Designer
Team Size
2 PMs, 3 Designers, 6 Developers
Circle | Proof-of-Concept
Promoting USDC Meter-Based Billing for AI Inference
Timeline
January - April 2025
Role
Contract UX/UI Designer
Team Size
2 PMs, 3 Designers, 6 Developers
Our Client
Our Client
Circle is a global fintech company moving money safer and quicker with USD Coin and aims to show developers that USDC can be the preferred way to bill customers for AI inference based on usage. We collaborated with their Developer Relations team.
Circle is a global fintech company moving money safer and quicker with USD Coin and aims to show developers that USDC can be the preferred way to bill customers for AI inference based on usage. We collaborated with their Developer Relations team.
The Problem
The Problem
Consumer adoption for crypto for metered billing is low due to lack of knowledge and concerns regarding trust, security, and transparency. Circle seeks an application that demonstrates how users can pay, using Circle’s APIs and USDC, for AI inference using their wallet balance to promote the use of USDC.
Consumer adoption for crypto for metered billing is low due to lack of knowledge and concerns regarding trust, security, and transparency. Circle seeks an application that demonstrates how users can pay, using Circle’s APIs and USDC, for AI inference using their wallet balance to promote the use of USDC.
The Product
The Product
We designed a proof-of-concept and comprehensive platform with 4 AI generation capabilities where usage is tracked and billed through Circle’s USDC infrastructure. Complete with wallet management and developer analytics, users get an intuitive visualization of the feasibility and practicality of using USDC for payments.
This project represents and contributes to a significant step forward in making both AI generation and cryptocurrency payments more accessible to everyday users. It was internally presented to Circle’s VP of Product Management and Developer Products team consisting of over 100+ engineers.
We designed a proof-of-concept and comprehensive platform with 4 AI generation capabilities where usage is tracked and billed through Circle’s USDC infrastructure. Complete with wallet management and developer analytics, users get an intuitive visualization of the feasibility and practicality of using USDC for payments.
This project represents and contributes to a significant step forward in making both AI generation and cryptocurrency payments more accessible to everyday users. It was internally presented to Circle’s VP of Product Management and Developer Products team consisting of over 100+ engineers.
Research & Define
Understanding our Audience
Understanding our Audience
With the goal of promoting USDC adoption, we surveyed AI developers who weren’t familiar with crypto and those who were interested in exploring to give us insight on current low adoption factors. However, we also wanted to leverage USDC’s appeal to reimagine metered billing, and additionally conducted 2 interviews with experts at Circle to grow our understanding of the field and its benefits. We found that:
With the goal of promoting USDC adoption, we surveyed AI developers who weren’t familiar with crypto and those who were interested in exploring to give us insight on current low adoption factors. However, we also wanted to leverage USDC’s appeal to reimagine metered billing, and additionally conducted 2 interviews with experts at Circle to grow our understanding of the field and its benefits. We found that:
Developers’ hesitancy to integrate crypto into AI tools is rooted in user unfamiliarity & resistance, complexity of integration, and low trust.
Developers’ hesitancy to integrate crypto into AI tools is rooted in user unfamiliarity & resistance, complexity of integration, and low trust.
USDC's benefits lie in its speed, immediate availability, global reach, 1:1 stability, and programmability.
USDC's benefits lie in its speed, immediate availability, global reach, 1:1 stability, and programmability.
Transparency matters heavily in a rapidly changing world, and people want clarity on what they’re using.
Transparency matters heavily in a rapidly changing world, and people want clarity on what they’re using.
Current Tools are Visually Confusing and Complex
Current Tools are Visually Confusing and Complex
Competitive analysis with current crypto payments and billing dashboards/methods gave us more insights on factors that may be pushing new crypto users from adopting and opportunities for us to tackle with our product.
Competitive analysis with current crypto payments and billing dashboards/methods gave us more insights on factors that may be pushing new crypto users from adopting and opportunities for us to tackle with our product.
After analyzing 6 existing products, we found that current tools such as Metronome, OpenRouter, and Tether have:
After analyzing 6 existing products, we found that current tools such as Metronome, OpenRouter, and Tether have:
Lack of transparency and cues in payment and transaction systems
Lack of transparency and cues in payment and transaction systems
Complex integrations and set-ups with overwhelming learning curves
Complex integrations and set-ups with overwhelming learning curves
Confusing UI for new users with little beginner-friendly resources and lots of jargon
Confusing UI for new users with little beginner-friendly resources and lots of jargon
Lack of transparency and cues in payment and transaction systems
Complex integrations and set-ups with overwhelming learning curves
Confusing UI for new users with little beginner-friendly resources and lots of jargon
Focus & Scope
Focus & Scope
Our initial MVP consisted of 3 main sections — AI Inference, Transaction Management, and Wallet Connection. Our main focus as designers was to strike a balance between USDC's functionality and user-friendly visual aesthetics, keeping the experience digestible for hesitant AI developers or new, beginner users.
Later on in our timeline with further communication with Circle's team, we added a Developer Analytics view to the product to show developers how they could integrate Circle's APIs into their billing methods.
Our initial MVP consisted of 3 main sections — AI Inference, Transaction Management, and Wallet Connection. Our main focus as designers was to strike a balance between USDC's functionality and user-friendly visual aesthetics, keeping the experience digestible for hesitant AI developers or new, beginner users.
Later on in our timeline with further communication with Circle's team, we added a Developer Analytics view to the product to show developers how they could integrate Circle's APIs into their billing methods.
Research & Define
Design Iterations
Design Iterations
Drawing From Familiarity
Drawing From Familiarity
Communication with our stakeholders was incredibly important in defining success as we brainstormed ways to establish trust while balancing simplicity and creativity. To ground our product in familiarity and assist users in getting adjusted, we drew inspiration from common AI interfaces and financial/banking dashboards while maintaining a sense of uniqueness to showcase USDC’s innovation along with Circle’s sleek brand. Building a familiar environment helps combat hesitancy and promote comfort, especially in a space that may feel overwhelming to try for the first time.
Communication with our stakeholders was incredibly important in defining success as we brainstormed ways to establish trust while balancing simplicity and creativity. To ground our product in familiarity and assist users in getting adjusted, we drew inspiration from common AI interfaces and financial/banking dashboards while maintaining a sense of uniqueness to showcase USDC’s innovation along with Circle’s sleek brand. Building a familiar environment helps combat hesitancy and promote comfort, especially in a space that may feel overwhelming to try for the first time.
Centralizing Management with Tabs
Centralizing Management with Tabs
In designing our Transaction Management pages, I prioritized bringing key billing information to the surface, reducing the stress of digging in navigating a new tool. Additionally, I identified an opportunity for product organization and proposed centralizing transaction, billing, usage, and wallet information onto one page with a tabbed configuration. This allowed users to both monitor their wallet balance and track transactions seamlessly in one place, streamlining navigation and improving clarity.
In designing our Transaction Management pages, I prioritized bringing key billing information to the surface, reducing the stress of digging in navigating a new tool. Additionally, I identified an opportunity for product organization and proposed centralizing transaction, billing, usage, and wallet information onto one page with a tabbed configuration. This allowed users to both monitor their wallet balance and track transactions seamlessly in one place, streamlining navigation and improving clarity.
Usability Testing & Filtering Systems
Usability Testing & Filtering Systems
Billing with cryptocurrency can be overwhelming for new users, so I iterated on filtering and sorting systems to help them easily navigate activity and history. Early designs, with 4 AI models and 5+ sortable categories, relied on multiple pop-ups and clicks, creating confusing and sometimes contradictory logic.
After usability testing and further research into Circle’s design patterns, I streamlined the interaction by consolidating sorts within the table and reducing filters to a single model filter, earning client approval for its efficiency.
Billing with cryptocurrency can be overwhelming for new users, so I iterated on filtering and sorting systems to help them easily navigate activity and history. Early designs, with 4 AI models and 5+ sortable categories, relied on multiple pop-ups and clicks, creating confusing and sometimes contradictory logic.
After usability testing and further research into Circle’s design patterns, I streamlined the interaction by consolidating sorts within the table and reducing filters to a single model filter, earning client approval for its efficiency.
Implementing Beginner-Friendly Transparency
Implementing Beginner-Friendly Transparency
In our designs, we also limited the amount of cryptocurrency jargon or terminology that may overwhelm our users. With this, we made sure to prioritize transparency in billing with cost estimates and usage data. Doing so helps users understand what they're paying for, keeping their workflow smooth and showcasing the practicality of USDC while building trust with our user base.
In our designs, we also limited the amount of cryptocurrency jargon or terminology that may overwhelm our users. With this, we made sure to prioritize transparency in billing with cost estimates and usage data. Doing so helps users understand what they're paying for, keeping their workflow smooth and showcasing the practicality of USDC while building trust with our user base.
Final Design
Final Design
Creating with our AI Generation Suite
Creating with our AI Generation Suite
Users get to explore their creativity with our 4 AI Generation models: text to text, text to image, image to video, and image to 3D, as well as easily view past generation history. A clear automated deduction from user wallet is shown after each request, keeping our users informed and updated on their balance. We've prioritized transparency and user-friendly experiences with tooltips and pop-ups, helping new crypto users with information on terminologies and token conversions.
Users get to explore their creativity with our 4 AI Generation models: text to text, text to image, image to video, and image to 3D, as well as easily view past generation history. A clear automated deduction from user wallet is shown after each request, keeping our users informed and updated on their balance. We've prioritized transparency and user-friendly experiences with tooltips and pop-ups, helping new crypto users with information on terminologies and token conversions.
Showcasing USDC’s Simplicity in Payments
Showcasing USDC’s Simplicity in Payments
Users can manage their payments in one hub where transaction, billing, and usage history are updated real-time, allowing users to accurately monitor their wallet balance. Users can easily add funds to their developer-controlled wallet with secure transaction handling for deposits, withdrawals, and scan-to-fund options. Filters and usage visuals allow for intuitive breakdown of AI usage and cost per transaction, helping users understand what they're paying for and track their own activity.
Users can manage their payments in one hub where transaction, billing, and usage history are updated real-time, allowing users to accurately monitor their wallet balance. Users can easily add funds to their developer-controlled wallet with secure transaction handling for deposits, withdrawals, and scan-to-fund options. Filters and usage visuals allow for intuitive breakdown of AI usage and cost per transaction, helping users understand what they're paying for and track their own activity.
Promoting USDC Integration with Developer View
Promoting USDC Integration with Developer View
This view directly shows developers how USDC and Circle APIs are being used for AI-based metered billing. Clear data visualizations highlight USDC’s scalability and benefits while indicating user value to push for increased developer adoption.
This view directly shows developers how USDC and Circle APIs are being used for AI-based metered billing. Clear data visualizations highlight USDC’s scalability and benefits while indicating user value to push for increased developer adoption.
Design System
Design System
We followed Circle’s brand guidelines closely as their brand is rooted in trust and authenticity. We sought to build something that fits right into Circle’s existing lineup while using color and components wisely to create an inviting and exciting feeling for new crypto users. Additionally, we designed our component library of buttons, filters, and pop-ups.
We followed Circle’s brand guidelines closely as their brand is rooted in trust and authenticity. We sought to build something that fits right into Circle’s existing lineup while using color and components wisely to create an inviting and exciting feeling for new crypto users. Additionally, we designed our component library of buttons, filters, and pop-ups.
Thank you Circle & CodeLab!
Thank you Circle & CodeLab!
Takeaways
Takeaways
Thank you to our client contacts at Circle for allowing us to play a part in making both AI generation and cryptocurrency payments more accessible to everyday users! Thank you to CodeLab (a design & software agency at UC Davis) for making this all possible. It was exciting to design and learn about an industry I did not have much prior knowledge about, and I learned so much about managing project complexities, the importance of brand cohesion, and adapting insights for different stakeholders. As a team, we're excited to see how this platform evolves in the future!
Thank you to our client contacts at Circle for allowing us to play a part in making both AI generation and cryptocurrency payments more accessible to everyday users! Thank you to CodeLab (a design & software agency at UC Davis) for making this all possible. It was exciting to design and learn about an industry I did not have much prior knowledge about, and I learned so much about managing project complexities, the importance of brand cohesion, and adapting insights for different stakeholders. As a team, we're excited to see how this platform evolves in the future!
Team Circle!
Work session during a CodeLab general meeting
thanks for reading! back to top?