Developer Console
Tweed helps web3 businesses simplify the onboarding of new users and accept one-click payments for NFT and In-platform tokens. Tweed’s SDK includes an embedded Wallet-as-a-Service and a payment solution for NFTs and tokens, enabling businesses to accept fiat payments. Developer Console helps customers to integrate Tweed's SDK, add Items they want to sell, configure webhooks, payouts and more.
As Tweed grew and worked with larger clients, we discovered a key issue: integrating Tweed's SDK into customer platforms was too complex. It took a lot of time, required both frontend and backend setup, and lacked tools for teams to collaborate easily. On top of that, companies had to manually sign contracts, which made the onboarding process slower than with competitors. This led to a redesign of the Developer Console to make integration simpler, improve the user experience, and speed up the onboarding process.
Tweed helps web3 businesses simplify the onboarding of new users and accept one-click payments for NFT and In-platform tokens. Tweed’s SDK includes an embedded Wallet-as-a-Service and a payment solution for NFTs and tokens, enabling businesses to accept fiat payments. Developer Console helps customers to integrate Tweed's SDK, add Items they want to sell, configure webhooks, payouts and more.
As Tweed grew and worked with larger clients, we discovered a key issue: integrating Tweed's SDK into customer platforms was too complex. It took a lot of time, required both frontend and backend setup, and lacked tools for teams to collaborate easily. On top of that, companies had to manually sign contracts, which made the onboarding process slower than with competitors. This led to a redesign of the Developer Console to make integration simpler, improve the user experience, and speed up the onboarding process.
Tweed helps web3 businesses simplify the onboarding of new users and accept one-click payments for NFT and In-platform tokens. Tweed’s SDK includes an embedded Wallet-as-a-Service and a payment solution for NFTs and tokens, enabling businesses to accept fiat payments. Developer Console helps customers to integrate Tweed's SDK, add Items they want to sell, configure webhooks, payouts and more.
As Tweed grew and worked with larger clients, we discovered a key issue: integrating Tweed's SDK into customer platforms was too complex. It took a lot of time, required both frontend and backend setup, and lacked tools for teams to collaborate easily. On top of that, companies had to manually sign contracts, which made the onboarding process slower than with competitors. This led to a redesign of the Developer Console to make integration simpler, improve the user experience, and speed up the onboarding process.
Before
After
01
Problem
Through customer feedback, we pinpointed the following challenges with the existing Developer Console:
Complex integration: Customers found the integration of Tweed’s SDK—both frontend and backend—too complicated and time-consuming.
Lack of guidance: There were no clear, step-by-step instructions for developers, leading to frequent errors in code.
Collaboration issues: Developers lacked a "Teams" feature, forcing them to share one Developer Console during integration.
Manual onboarding: The requirement to go through the sales team and sign contracts manually prolonged the onboarding process, adding friction compared to competitors.
02
Objectives
My goal was to address these pain points by redesigning the Developer Console with the following key objectives:
Build a new console structure from scratch that’s easy to understand and simple to use
Move backend integration settings into the Developer Console UI and make sure users can complete the integration by themselves, reducing the need for support and time to market
Add MAW/user authentication analytics and usage alerts to keep users informed about their current subscription status
Add a Team feature so multiple developers can work together
Introduce subscription plans and tier options to offer flexibility for different users
Introduce new visual design language, create a clear, simple and self-explanatory interface
My goal was to address these pain points by redesigning the Developer Console with the following key objectives:
Build a new console structure from scratch that’s easy to understand and simple to use
Move backend integration settings into the Developer Console UI and make sure users can complete the integration by themselves, reducing the need for support and time to market
Add MAW/user authentication analytics and usage alerts to keep users informed about their current subscription status
Add a Team feature so multiple developers can work together
Introduce subscription plans and tier options to offer flexibility for different users
Introduce new visual design language, create a clear, simple and self-explanatory interface
My goal was to address these pain points by redesigning the Developer Console with the following key objectives:
Build a new console structure from scratch that’s easy to understand and simple to use
Move backend integration settings into the Developer Console UI and make sure users can complete the integration by themselves, reducing the need for support and time to market
Add MAW/user authentication analytics and usage alerts to keep users informed about their current subscription status
Add a Team feature so multiple developers can work together
Introduce subscription plans and tier options to offer flexibility for different users
Introduce new visual design language, create a clear, simple and self-explanatory interface
03
Roadmap
From there, I took charge of designing the structure, user flows, and journeys for the Developer Console, ensuring that the solution met both business needs and user expectations.
Initially, we aimed to create a new Console that integrated both Wallet-as-a-Service (WaaS) and NFT/Token Checkout. However, due to the complexity of the product, we strategically divided the project into two phases:
Phase 1:
- Migrating WaaS backend SDK functionality entirely to the Developer Console, simplifying integration for developers.
- Introducing a "Teams" feature to facilitate collaboration, allowing multiple developers to work on integrations within the same workspace.
- Designing a subscription model for WaaS with usage tracking accessible through the Console. Additionally, creating automatic emails that will be sent to users from the Console, such as: Welcome email, Team member invitation, Subscription confirmation, MAW usage alerts, etc.
- Developed "Global" settings for overarching platform configuration, while introducing "Applications" for project-specific customizations of WaaS and NFT/Token Checkout, ensuring flexibility without impacting global configurations.
Phase 2:
- Migrating Token Checkout backend SDK functionality entirely to the Developer Console, simplifying integration for developers.
- Implemented a modular approach for NFT/Token Checkout, enabling platforms to create and save reusable modules, such as smart contracts, reducing the need to start from scratch for each new project.
- Added reusable payout options, allowing companies to replicate settlement configurations across multiple projects efficiently.
This approach focused on simplifying complex workflows, empowering users to seamlessly integrate our solutions while maintaining scalability and flexibility.
From there, I took charge of designing the structure, user flows, and journeys for the Developer Console, ensuring that the solution met both business needs and user expectations.
Initially, we aimed to create a new Console that integrated both Wallet-as-a-Service (WaaS) and NFT/Token Checkout. However, due to the complexity of the product, we strategically divided the project into two phases:
Phase 1:
- Migrating WaaS backend SDK functionality entirely to the Developer Console, simplifying integration for developers.
- Introducing a "Teams" feature to facilitate collaboration, allowing multiple developers to work on integrations within the same workspace.
- Designing a subscription model for WaaS with usage tracking accessible through the Console. Additionally, creating automatic emails that will be sent to users from the Console, such as: Welcome email, Team member invitation, Subscription confirmation, MAW usage alerts, etc.
- Developed "Global" settings for overarching platform configuration, while introducing "Applications" for project-specific customizations of WaaS and NFT/Token Checkout, ensuring flexibility without impacting global configurations.
Phase 2:
- Migrating Token Checkout backend SDK functionality entirely to the Developer Console, simplifying integration for developers.
- Implemented a modular approach for NFT/Token Checkout, enabling platforms to create and save reusable modules, such as smart contracts, reducing the need to start from scratch for each new project.
- Added reusable payout options, allowing companies to replicate settlement configurations across multiple projects efficiently.
This approach focused on simplifying complex workflows, empowering users to seamlessly integrate our solutions while maintaining scalability and flexibility.
From there, I took charge of designing the structure, user flows, and journeys for the Developer Console, ensuring that the solution met both business needs and user expectations.
Initially, we aimed to create a new Console that integrated both Wallet-as-a-Service (WaaS) and NFT/Token Checkout. However, due to the complexity of the product, we strategically divided the project into two phases:
Phase 1:
- Migrating WaaS backend SDK functionality entirely to the Developer Console, simplifying integration for developers.
- Introducing a "Teams" feature to facilitate collaboration, allowing multiple developers to work on integrations within the same workspace.
- Designing a subscription model for WaaS with usage tracking accessible through the Console. Additionally, creating automatic emails that will be sent to users from the Console, such as: Welcome email, Team member invitation, Subscription confirmation, MAW usage alerts, etc.
- Developed "Global" settings for overarching platform configuration, while introducing "Applications" for project-specific customizations of WaaS and NFT/Token Checkout, ensuring flexibility without impacting global configurations.
Phase 2:
- Migrating Token Checkout backend SDK functionality entirely to the Developer Console, simplifying integration for developers.
- Implemented a modular approach for NFT/Token Checkout, enabling platforms to create and save reusable modules, such as smart contracts, reducing the need to start from scratch for each new project.
- Added reusable payout options, allowing companies to replicate settlement configurations across multiple projects efficiently.
This approach focused on simplifying complex workflows, empowering users to seamlessly integrate our solutions while maintaining scalability and flexibility.
03
Design Process
1. Defining the structure: user flows and console architecture
To kick off the redesign, I first developed comprehensive user flows and outlined the architecture for the new Developer Console. This involved mapping out all essential features and how they would be structured within the Console, ensuring scalability for future updates..
1. Defining the structure: user flows and console architecture
To kick off the redesign, I first developed comprehensive user flows and outlined the architecture for the new Developer Console. This involved mapping out all essential features and how they would be structured within the Console, ensuring scalability for future updates..
1. Defining the structure: user flows and console architecture
To kick off the redesign, I first developed comprehensive user flows and outlined the architecture for the new Developer Console. This involved mapping out all essential features and how they would be structured within the Console, ensuring scalability for future updates..
Brainstorming and defining architecture
(blurred due to company-related information)
Analyzing competitors and market, defining features
(blurred due to company-related information)
03
Design Process
2. Iterative wireframing and testing
Once the structure was established, I moved on to wireframing. These wireframes underwent several rounds of usability testing, guerrilla testing, and team brainstorming sessions. During these tests, we gathered critical feedback on convenience and usability, refining the flows to reduce friction at every stage of the integration process.
3. Prototyping low-fidelity UI and gathering feedback
I started by designing low-fidelity UI prototypes for each flow, task, and action. Throughout this process, I continuously gathered feedback from both internal and external stakeholders. This feedback loop allowed us to refine the user experience early on and ensure alignment with user expectations.
4. Creating a flexible design system
With the foundational wireframes and feedback in place, I built a Design System tailored for the Developer Console and future Tweed products. Each component was crafted to be as flexible and reusable as possible, allowing for rapid scaling and customization.
2. Iterative wireframing and testing
Once the structure was established, I moved on to wireframing. These wireframes underwent several rounds of usability testing, guerrilla testing, and team brainstorming sessions. During these tests, we gathered critical feedback on convenience and usability, refining the flows to reduce friction at every stage of the integration process.
3. Prototyping low-fidelity UI and gathering feedback
I started by designing low-fidelity UI prototypes for each flow, task, and action. Throughout this process, I continuously gathered feedback from both internal and external stakeholders. This feedback loop allowed us to refine the user experience early on and ensure alignment with user expectations.
4. Creating a flexible design system
With the foundational wireframes and feedback in place, I built a Design System tailored for the Developer Console and future Tweed products. Each component was crafted to be as flexible and reusable as possible, allowing for rapid scaling and customization.
2. Iterative wireframing and testing
Once the structure was established, I moved on to wireframing. These wireframes underwent several rounds of usability testing, guerrilla testing, and team brainstorming sessions. During these tests, we gathered critical feedback on convenience and usability, refining the flows to reduce friction at every stage of the integration process.
3. Prototyping low-fidelity UI and gathering feedback
I started by designing low-fidelity UI prototypes for each flow, task, and action. Throughout this process, I continuously gathered feedback from both internal and external stakeholders. This feedback loop allowed us to refine the user experience early on and ensure alignment with user expectations.
4. Creating a flexible design system
With the foundational wireframes and feedback in place, I built a Design System tailored for the Developer Console and future Tweed products. Each component was crafted to be as flexible and reusable as possible, allowing for rapid scaling and customization.
03
Design Process
5. High-fidelity UI design and implementation
Leveraging the Design System, I developed high-fidelity UI designs, utilizing components, variants, and variables to maintain consistency and scalability. The designs were then handed off to developers, accompanied by thorough design documentation to ensure seamless implementation.
5. High-fidelity UI design and implementation
Leveraging the Design System, I developed high-fidelity UI designs, utilizing components, variants, and variables to maintain consistency and scalability. The designs were then handed off to developers, accompanied by thorough design documentation to ensure seamless implementation.
5. High-fidelity UI design and implementation
Leveraging the Design System, I developed high-fidelity UI designs, utilizing components, variants, and variables to maintain consistency and scalability. The designs were then handed off to developers, accompanied by thorough design documentation to ensure seamless implementation.
03
Design Process
6. Continuous collaboration and documentation
Throughout the process, I worked closely with developers, guiding them through the implementation phase to ensure the design vision was realized. I also produced comprehensive design documentation that detailed every aspect of the UI, flows, and Console architecture.
6. Continuous collaboration and documentation
Throughout the process, I worked closely with developers, guiding them through the implementation phase to ensure the design vision was realized. I also produced comprehensive design documentation that detailed every aspect of the UI, flows, and Console architecture.
6. Continuous collaboration and documentation
Throughout the process, I worked closely with developers, guiding them through the implementation phase to ensure the design vision was realized. I also produced comprehensive design documentation that detailed every aspect of the UI, flows, and Console architecture.
05
Results
The redesigned Developer Console significantly improved the overall user experience. The integration process became faster and simpler, with clear instructions and collaborative features that enabled development teams to work more efficiently. By eliminating backend integration and automating onboarding, we drastically reduced the time it took for companies to get started with Tweed’s SDK. The new Console also provided the flexibility to scale with Tweed’s expanding product offerings and client base:
Reduction in integration time by 40%, thanks to the elimination of backend dependencies and the introduction of step-by-step guidance
Increased developer collaboration due to the Teams feature, improving efficiency in multi-developer projects
Improved onboarding experience and integration, reducing time to market for new clients
Scalability ensured through the modular design approach, making it easier to integrate new features like NFT/Token Checkout in the future
The redesigned Developer Console significantly improved the overall user experience. The integration process became faster and simpler, with clear instructions and collaborative features that enabled development teams to work more efficiently. By eliminating backend integration and automating onboarding, we drastically reduced the time it took for companies to get started with Tweed’s SDK. The new Console also provided the flexibility to scale with Tweed’s expanding product offerings and client base:
Reduction in integration time by 40%, thanks to the elimination of backend dependencies and the introduction of step-by-step guidance
Increased developer collaboration due to the Teams feature, improving efficiency in multi-developer projects
Improved onboarding experience and integration, reducing time to market for new clients
Scalability ensured through the modular design approach, making it easier to integrate new features like NFT/Token Checkout in the future
The redesigned Developer Console significantly improved the overall user experience. The integration process became faster and simpler, with clear instructions and collaborative features that enabled development teams to work more efficiently. By eliminating backend integration and automating onboarding, we drastically reduced the time it took for companies to get started with Tweed’s SDK. The new Console also provided the flexibility to scale with Tweed’s expanding product offerings and client base:
Reduction in integration time by 40%, thanks to the elimination of backend dependencies and the introduction of step-by-step guidance
Increased developer collaboration due to the Teams feature, improving efficiency in multi-developer projects
Improved onboarding experience and integration, reducing time to market for new clients
Scalability ensured through the modular design approach, making it easier to integrate new features like NFT/Token Checkout in the future