Designing an Africa-first crypto widget: How I upscaled the Yellow Card App from retail to B2B

It’s important to note that there aren’t many trading platforms for Africa. In 2023, we decided to build a trading widget to transform the trading landscape in Africa by providing easier access to digital assets.

In the context of digital technology, a widget refers to a small application or tool that provides specific functionality, often embedded within a larger software environment or platform. What this means for the average trader is, that they can trade stablecoins on any partner website that has it integrated without going through the Yellow Card App.

Currently, fiat onramps for web3 ecosystems offer very little when it comes to access within Africa. With those with a presence in Africa, the only way customers can trade is through credit card payments. This means very high fees and the marginalization of customers who do not have access to cards that will work on international platforms (that’s the majority of the African market).

We set out to provide a custom-made experience for customers across Africa to trade stablecoins using their local payment methods easily. External partners could integrate this widget into their websites, hence opening up the African market to the world.

What we knew going into this

From our experience in dominating the African crypto space with our existing app, we gained invaluable insights into the needs and preferences of the average African trader. These insights, gotten from multiple user research sessions and data we track within the app guided us in the design of this widget.

One key insight we knew of was the demand among African traders for greater access to various Stablecoins and the ability to trade using their local payment methods. Trading with local payment options will mean lower fees and more access and flexibility for many other traders.

Additionally, we recognized the importance of a swift KYC (Know Your Customer) service to enhance customer retention, offer seamless user experience, and facilitate quicker onboarding into our product. Understanding and including this was crucial, especially considering that the widget would be integrated into various partner sites.

Furthermore, we recognized that the ecosystem within Africa’s crypto space necessitates such a product to facilitate seamless crypto trading. Our confidence in this has been reaffirmed by the positive reception and interest from multiple partners even before the widget’s full launch, indicating a strong demand and readiness for such a solution.

Wireframes Under Construction 🦺

After receiving the detailed 37-page brief from Sean Van Kerckhoven, our product manager on the project, my next step was to thoroughly dissect the requirements, break them down into manageable sections, and engage in discussions with relevant stakeholders to ensure clarity. This process was crucial for setting a clear direction and aligning everyone involved with the project’s objectives.

I began drafting initial wireframe iterations based on my understanding of requirements and discussions.

The feedback loop was extended to our business partners, including Opera and others, who had the opportunity to go through the wireframe prototypes firsthand. Their insights and perspectives proved invaluable in identifying areas for enhancement and ensuring the product’s alignment with industry standards and user expectations.

By maintaining this flow of communication between design/ops/engineering and going through multiple iterations, I not only ensured that the final product was usable and functional but also fostered a collaborative environment where all stakeholders felt empowered to contribute to the project’s success.

Key Features and Functionalities of this Widget

Central to the widget’s design were two primary functionalities — enabling customers to buy and sell coins effortlessly. Additionally, we integrated a swift Know Your Customer (KYC) process, allowing users to verify their identity within the widget itself. The inclusion of an OTP login system further enhanced security and user verification.

Buying and Selling Stablecoins

These were the main functions that governed the whole widget. With these, customers can easily enter the amount they want to pay for whatever coin they are trying to buy. We automatically convert it into the value of the selected coin. Also, customers can see the current trading rates for their currencies and the coins that they want to trade.

OTP Verification

This key feature allowed us to verify and differentiate the new customers from those who have already transacted with us. With this, customers receive a unique 6-digit PIN that they will use to continue with the transaction.

Based on the customer's KYC status and the email they entered, we take them through one of these routes. If customers are already verified, they proceed to enter their wallet address. If they are not, they are taken to the KYC flow so they can go through the KYC.

Swift KYC verification

We included a swift KYC process for customers to allow them to verify themselves on the spot after they have entered their information. This allows even new users to go through the product quickly and easily.

Stakeholder Engagement

Collaboration with stakeholders, including regular meetings with Sean, and demos with the design team, played a crucial role in shaping the direction and scope of the widget’s design. Their enthusiasm and openness to creative exploration empowered us to push boundaries and explore new design possibilities.

Navigating through stakeholder feedback and input required a delicate balance of empathy and problem-solving. By placing feedback within the context of the overall design and seeking clarification when necessary, we were able to refine and enhance the widget’s functionality and user experience.

Anticipation and Impact

As we near the launch of the widget, excitement is growing. This project has the potential to transform the crypto trading space within the African continent, making it more accessible and user-friendly for all. We eagerly anticipate collecting feedback from users and iterating on the design to enhance its capabilities further.

Soon, we aim to expand partnerships with other businesses that want to expand into the African market.

Conclusion

In conclusion, the design journey of the crypto trading widget has been both exhilarating and rewarding. From the initial spark of inspiration to the anticipation of its release, every step of the process has been guided by a shared vision of innovation and empowerment of the African trader. We look forward to sharing the widget with the world and witnessing the transformative impact it will have on the future of crypto trading in Africa.

Big shoutout to the design team for their continued input, the payments API pod, Sean, Jason, Chris, and all who contributed to the success of the widget.

Derrick Tsorme,

Product Designer, Yellow Card.