I'm sharing a portion of the experience that's in line with the NDA
I am sharing only a fraction of the experience I've accumulated over the years. Despite the mistakes made along the way, starting a project from scratch has been a successful shot. After the launch, the product received positive partner feedback, achieved good business results, and secured investor funding.
Business objectives
Develop an iFrame Payment Module for online wallets, instant exchanges, DeFi projects, and other services that accept cryptocurrency payments from their customers. This module aims to:
Make it easier for their users to make payments
Onboard non-crypto savvy users
Increase its transaction volume
Increase the number of revenue streams and the amount of revenue itself
Retain users
Develop a Partner Account that allows partners to track their earnings, set up integration, and make withdrawals
Explore the possibilities to globally improve the purchase flow on the crypto market and think about creating an ecosystem
Design team
I integrated a small design team into a devs workflow that primarily used 2-week sprints:
Design Sprints Ahead: Ideally, the design should be ahead (two sprints) of development. This way, arrangements are finalised by the time development starts, and any questions or issues have been addressed
Backlog Refinement Sessions: Before a sprint starts, I hold sessions with designers, product owners, and devs to review upcoming tasks to ensure they're well-defined
Design Reviews: Handled regular design reviews within the sprint
Integrated Support-Driven UX: Drawing from my UX practices at Texet (view case), I integrated our UX designers into support management periodically, establishing rapid feedback loops for valuable insights into user issues, frustrations, and expectations
Dedicated Kanban Board: This helped in visualizing the design workflow separately from development, yet still in the context of the overall project
Stand-ups: included design team in daily standups with devs
Design objectives
One of the main objectives of the design team is to enable the business to visualize the product's potential and address challenges early on. This is crucial for developing robust products.
I crafted design concepts as part of our research. These concepts showcased significant research findings and the most promising product versions. In doing so, we gained an early insight into the complexities of design and development. They also provided an indication of how stakeholders might respond and raised crucial questions. Essentially, I presented my vision before diving into detailed prototyping and finalizing visual concepts.
As a result:
Concepts showed we should focus on creating a white label product that can be customised by partners
We decided not to compete with our partners by selling crypto, url always contains partner ID
We must be prepared to address conflicts in user profile, because it displays transactions from various partners
We found our weak spot in KYC integration because service was connected via iframe with many constraints
These points highlight only a few insights from my approach. Further details can be found in the research section.
Adjusting roadmap for team
Understand the crypto market context
Competitive audit
Audit potential partners (Online wallets, instant exchanges, DeFi projects, etc)
Research iFrame constraints
Work on User Flows
Setting up a design process and streamlining data sharing with the team and heads
Create design concepts to illustrate potential features of the product and to address its most challenging aspects
Prepare the team for interviews: find respondents among partners, and seek out crypto users for preliminary tests
Prototyping & syncs
Conduct Remote Usability Tests, Think-aloud tests, and gather internal feedback
Set up space for design documentation
Work on visual concepts & syncs
Outline a primary development approach with devs team and set priorities
Market context
During our market research in 2020, the following market characteristics were confirmed, and they remain relevant even today. The trend to focus on churn, retention, bounce, and overall user experience only shifted after the crypto market dropped last year.
Low Conversion: Crypto projects lose users during onboarding as newcomers buy crypto on gateways like Binance or Coinbase and don't return
High Barriers: Targeting only existing crypto owners limits potential users
Projects miss out on revenue from commissions users pay at these gateways
We, along with a UX designer, examined major competitors such as MoonPay, Simplex, Wyre, and also looked into top fiat payment providers like Stripe. This gave us an extensive collection of design patterns, UI previews, and purchase flow videos that remained beneficial over time. We kept research updated with market changes over years.
Key findings:
Most competitors redirected users to their widget page
They also all offered direct services to users, competing with their own partners
No one promised a dashboards or easy analytics access for partners, hiding analytics from partners
Most lacked transparency by hiding fees from users
Their purchase flows were unclear, with unexpected steps and KYC
Overall bad UX/UI
Partner research
I conducted interviews with five potential partners. Information was extremely valuable. My objective statement was: "We're researching how {project type} handle Web 2.0 user onboarding...".
These interviews are designed not to gather opinions about your product, but to understand how market players are addressing relevant tasks. You don't share your ideas; you only inquire about their past and present experiences.
Key findings:
Many crypto startups prioritize feature deployment over improving user experience. Despite high bounce rates, most projects were highly profitable
In certain crypto projects, the absence of even fundamental frontend teams raised questions about what to anticipate in terms of design
Many NFT marketplaces focused on marketing through FOMO strategies. Some of these projects try to hide fees and commissions while aiming to expand their reach
It's likely that most partners won't customize or update the Payment Module, whether before or after integration
Competition will lead to shift to UX later, but then it was a hot market at peaks
User research
I started tests with a small, diverse group of users. The majority had no experience with crypto. Due to limited resources, I conducted a variations of usability tests, where users were invited to purchase a crypto on a well-known marketplace with the integrated Payment Module. While we recognized the need for more respondents for a more evident conclusion, it still provided valuable insights:
"Add Crypto Wallet" on marketplaces remains a significant challenge for users
Placing a "Buy with Card" button alongside "Buy with Crypto" greatly improved the success rate
Experienced crypto users often stick to their familiar patterns and might overlook new features
The data obtained aided in constructing improved user flows
Many users were familiar with KYC but felt frustrated. The lower the item price, the higher the frustration and the greater the chances they'll abandon the flow
Identifying challenges
Examining competitors and partners revealed the complexities hidden within even the most straightforward-seeming tools. Every challenge was, in essence, a unique case study.
User Engagement: Ensuring users remain on the partner's platform without disruptions
Seamless Navigation: Guiding users back to their intended purchase step, especially if they exit the payment module and left partner or await verification
KYC Communication: Identifying the right touchpoints and methodologies to inform users about KYC, and see if informing possible on partners side before purchase
Fee Transparency: Assessing the importance of fees clarity for users, especially on FOMO market
Optimized User Journey: Refining the user journey to strike the right balance in the number of steps for a purchase
Purchase Flow Adaptability: Allowing partners to react to order statuses within the purchase flow to adjust it
Finding UX approach
Before starting the prototyping, I defined design specifications for the team based on agreed business requirements
One Task Per Step Approach. Crypto requires more attentiveness due to high error cost. So the approach should:
Reduce Cognitive Load: Focusing on a single task per screen. Reduce information a user has to process
Enhance Error Handling: Easing a mistake identification and fix
Simplify Mobile Development
Offer a Greater Flexibility in Design: Better for testing and adjusting the flow
Clear and Pronounced Inputs. Consider our module could be integrated into narrow modal windows or various spots on a page, every control or action should be immediately noticeable and accessible. This leads to the next point
Utilize the Space. Use side panels, bottom sheets, small cards, menus, tooltips and tabs to show all required information and avoid scrolling in module by any cost
Design for Worst-Case Scenarios. Imagine worst possible integration scenarios
KYC Process Enhancement. Embedding the KYC imposes certain user experience constraints. To offer the best UX, check integration guidelines and test real scenarios
Features Discoverability. Avoid hiding buttons, icons, or any valuable actions. Show hints for temporarily disabled actions on specific steps due to their assignment instead of hiding them
Retention strategies
With the frontend team, we made a detailed block diagram covering all UX details, including post-KYC email redirects and module reload behaviors. Afterward, we worked with a UX/UI designer to create high-fidelity prototypes.
It's crucial to collaborate closely with devs. Comparing and synchronizing product schemes can be intense, but it's a proactive way to avert potential issues. For example, we used different payment processing platforms for various crypto assets, and each had its execution algorithms, error messages, and methods of alerting users and us about payment issues. Ensuring the app responds appropriately to such events is crucial for retaining customers and boosting revenues.
Good UX involves anticipating and addressing nearly all corner cases to ensure customers can complete their journey, even under less-than-ideal circumstances. I recommend scanning any integration documentation or directing correct questions to the dev team to uncover possible scenarios. Ultimately, we created a comprehensive product scheme and expanded the backlog.
Navigated users from supported countries but unsupported states, where some crypto assets still available
Handled various bank card issues
Navigated different limits for different crypto assets based on regulatory requirements
Fixed simultaneous module usage on different partners by one user
Boosting revenue
I had a few assumptions to check right before the product launch.
Assumption: A community valuing privacy would react negatively to the requirement of disclosing their phone number just to log in. That can lead to high abandonment rate.
Risks: Higher number of fraud attacks, lower conversion
User Test Results: Most users initially concerned about the phone number ultimately abandoned the service during the KYC. They chose to pay with available crypto assets. While that was a small percentage of users. Subsequent findings revealed that using a phone number as a login method significantly reduced fraud attacks.
Assumption: Moving card details ahead of KYC can increase user commitment by leveraging the sunk cost effect, where users have already invested time and effort in entering their card details.
Risks: Potential negative impact on conversion rates due to a new friction point in the user journey. Users may feel uncomfortable or suspicious about providing card details before fully understanding the service or product.
User Test Results: User tests and in-depth interviews revealed that 80% of users are comfortable with the purchase flow, primarily due to transparent communication.
A/B tests Results: Immediately after the Payment Module launch, we conducted tests with one of our initial partners. We implemented two different purchase flows for two NFT drops, one with the bank card preceding onboarding and KYC, and the other with the opposite sequence. The results were remarkable, resulting in a significant conversion rate increase of over 30%.
Boosting sales
I recognized an excellent opportunity to strengthen the sales position in meetings with key partners. I suggested making simple prototypes in Figma, where we show a neatly integrated Payment Module
The fundamental principles I formulated are:
We integrate with great respect for the partner, no matter the UX and visual preferences they have, acknowledging the effort they've invested in their product
We provide detailed explanations for each of our design solutions
We always offer at least two solutions. Faster integration or best possible with customization
It is critical to convey the approach to your sales team so they can convey it to the partner.
The effect of these presentations with our demonstrated approach was so strong that the idea immediately became a part of our workflow.
Optimising flow
I use straightforward methods such as SUS, SEQ, ASQ and QUIS when conducting rapid tests. For some of them I structure test groups to mitigate cognitive biases, each starting with a different flow. Those approaches are cost-effective to address simple disputable issues. Require a minimum of 10-15 participants.
The business wanted to combine two steps into one to make the purchase flow shorter (these steps involved entering bank details and personal information like date of birth and email). I created two prototypes and surveys with a slightly modified System Usability Scale (SUS) test, then compared the results.
In such tests, it's crucial to detect a significant preference for one solution, as the test may not provide the most detailed insights. Not surprisingly, both groups preferred the flow with more steps because it provided better clarity. You can preview test results.
Visuals
I prioritized information as the primary design component in the payment module, emphasizing practicality and the use of attractive, larger components. Any compromise, even slight size reductions, would undermine our concept. I saw that such design should align visually with innovative projects in on any market.
The typography and its application constitute the pivotal component of such design. Thats why after some research we agreed on Aeonik. Proportions that are wider than a typical Grotesk, but thinner than a typical Geometric Sans. Structurally, this creates a fantastic balance for both display and text use.
Transparency
One of our core principles was transparency. To achieve this, I made Purchase Details accessible throughout the flow, except for the KYC step. User interviews showed that this element helped build trust during the first interaction.
However, concerns arose about the impact of these purchase details on users rushing to buy NFTs. We interviewed eight NFT collectors, revealing that card-using buyers prioritize owning the product over dealing with fees and rate checks.
Key findings:
It's better to keep the NFT item visible to the customer throughout the flow, aligning with e-commerce principles, which increases conversion rates
Making purchase details less prominent can improve conversions during the NFT purchase flow
Enabling wallet creation in our service for users without one could enhance the overall UX
Reducing KYC requirements (team up with compliance) for NFT buyers could lead to increased revenues
Contributions
In startups, sometimes you have to take on responsibilities beyond your designated role. However, when you're passionate about your project, it's an opportunity to contribute and learn more.
We encountered an urgent need to prepare for Metaverse Summit Paris 2022 in France, but our project lacked clear branding. I took the initiative to design a striking and attention-grabbing booth, distinct from the prevailing gloomy cyberbank-style theme adopted by others.
Here's how I approached it: I considered the booth's size, location, the angles from which people would approach, the lighting in the building, and the style of the participants.
Design system & documentation
I've crafted useful documentation for our designers. This includes design principles, decision frameworks, and detailed product schematics. These resources aim to streamline the design process, providing our team with clarity and guidance while fostering creativity.
I'm not a big fan of leading, maintaining designs libraries and spending a lot of time on them, so I created the structure and let the designers on the team handle the rest.
Partner account
A partner account was a huge layer of work, the creation of which was preceded by additional interviews and partner questionnaires. It was created by me and the front leader. The purpose of the partner account is to simplify partner onboarding, make it easier to configure the module and show them analytics.
This part of the work won't be reflected in detail due to NDA.
