Cantaloupe, Pay
With Your
Crypto Money
01. Overview
With a focus on making payments easy, Cantaloupe has partnered with Bakkt under the More Loyalty program to enable consumers to make transactions with cryptocurrency. and use Crypto for Everyday Purchases.
02. Role
Beyond
Design
Limits
At As a designer, it was a fascinating problem to tackle. With the team, I had to think critically about how to create an intuitive, seamless user experience that allowed users to easily convert cryptocurrency into usable funds for real-world transactions. Balancing the complexities of crypto technology with user-friendly design was key.
My Role Beyond UX Design
03. Key Challenges
Buy Bag of Chips with Crypto Money
Challenge
As a team, we realized that there was no existing system to compare with, as the concept was entirely new. Apart from conceptualizing the user experience, I had to ensure the technical feasibility of the design. My challenge was to drive innovation while navigating technical constraints, balancing creative ideas with the practical limitations of integrating cryptocurrency conversion and usage into everyday transactions.
Solution
I collaborated with developers to ensure the design was both intuitive and technically feasible. Through multiple stakeholder meetings and user feedback, I refined the design, ensuring it met both user needs and technical constraints while delivering a seamless experience.
UX Prioritisation Model
A thousand minds,
one heartbeat
Challenge
Getting design approval was a complex process involving
design leads, product owners, legal, tech leads, accessibility,
and security teams. It was time-consuming, and the diverse
feedback often added layers of complication.
Solution
I developed a set of principles to improve sign-off efficiency,
enabling better time management and ensuring stakeholders
receive maximum value with minimal time investment.
Stakeholder Management Principles
Do your homework: Invest time upfront to prepare and align with stakeholders. It speeds up sign-off down the line.
Waste no time: Streamline meetings by trimming unnecessary participants and appointing a coordinator to keep things on track.
Use tools wisely: Choose the most suitable communication method—whether it's email, one-on-one chats, or group meetings.
Done is better than perfect ;
Accept that not everything can be resolved. Prioritise tasks by impact using frameworks like MoSCoW.
Accept that not everything can be resolved. Prioritise tasks by impact using frameworks like MoSCoW.
Show, don't tell
Support design decisions with data and user research. Real-world examples or case studies can make a big difference.
Support design decisions with data and user research. Real-world examples or case studies can make a big difference.
Build relationships
Get to know key decision-makers and don't hesitate to lean on them to help resolve disputes.
Get to know key decision-makers and don't hesitate to lean on them to help resolve disputes.
Fun woork
Designing More Card
More Vallet
Designing More Card and Vallet
To design the More Card, I aimed to create a digital representation that closely mirrored a physical card for intuitive understanding. The process began with conceptualizing how the card would store and transfer funds, ensuring it reflected a real-world card interaction.
We created a visual that demonstrated how the card would hold the money, clearly showcasing the flow of funds from cryptocurrency to usable cash. This visual was integrated into the user’s login experience.
We created a visual that demonstrated how the card would hold the money, clearly showcasing the flow of funds from cryptocurrency to usable cash. This visual was integrated into the user’s login experience.
Iteration 1
The initial design of the More Card featured neutral colors aligned with the app’s color scheme. However, during the review process, we recognized that it lacked the physicality needed for users to easily relate to it as a real card.
Iteration 2
In the second iteration, I tested how the *More Card* would appear in a stack, ensuring it was clearly visible and distinct. We explored various color options to ensure the card's shape and branding stood out, providing a realistic feel while maintaining visibility alongside other cards.
Iteration 3
Finally, the *More Card* was designed with clear, legible numbers and a refined, intuitive layout. The branding was prominent, ensuring a balance between modern aesthetics and a realistic user experience.
04. Research Findings
The Art of
Reduction
Reduction
Discovery
Sprint 1
Sprint 1
In this sprint, we honed in on the essentials. By focusing on the MVP, we ensured core needs were met and brought all stakeholders into alignment.
UX Outcomes
•
Business Case: Covering viability, desirability, and feasibility.
•
Key Insights, Hypotheses, and UX Strategy
•
Full Design and Flow if key interactions
Key Insights
Financial Stress is Widespread
•
60% of people psychologically feel that using and transferring cryptocurrency is complex, which discourages them from investing.
•
20% of showroom owners could not activate sales boost before the event ended
Common Financial Struggles
•
20% lack emergency funds.
•
15% struggle to afford essentials like food and basics.
•
15% feel the strain from unpaid bills.
Financial Strain in Relationships
•
35% of couples say money is their main stress factor.
•
50% have different spending habits.
•
78% need to con33% don't consult their partner before making big purchases.sult a senior to make changes
•
•
These delays impacts event outcomes
Heuristic Evaluation
Mobile-First
Given the increasing reliance on smartphones, users tend to prefer accessing financial services via mobile apps, leading to higher adoption rates in mobile-first platforms.
Given the increasing reliance on smartphones, users tend to prefer accessing financial services via mobile apps, leading to higher adoption rates in mobile-first platforms.
Younger Audiences
Younger generations are more open to using digital finance apps and cryptocurrencies compared to older demographics who remain skeptical or uninformed.
Cross-App
Users are more likely to return to fintech apps that allow smooth, frictionless interactions with third-party services like crypto wallets, reducing barriers to use.
Users are more likely to return to fintech apps that allow smooth, frictionless interactions with third-party services like crypto wallets, reducing barriers to use.
Inadequate Financial Tools
Existing tools might be too complicated or not user-friendly, failing to provide necessary insights into spending habits.
Instant Transactions
Speed is a crucial factor for users when engaging with fintech and crypto apps. Instant transactions lead to higher satisfaction and more frequent use.
Speed is a crucial factor for users when engaging with fintech and crypto apps. Instant transactions lead to higher satisfaction and more frequent use.
UX Strategy
Simplified and Trust-Building Design
Focus on reducing complexity with intuitive onboarding and clear visuals to guide users. Integrate strong security features to build trust, ensuring users feel confident using crypto and fintech functions.
Third-Party Integration
Enable smooth third-party integrations with platforms like Bakkt to facilitate seamless crypto transfers and interactions with other financial services.
06. Design Flow and concepts
Designing the key Features
We brought our vision to life through three key steps: Conceptualization, Execution, and Refinement delivering a seamless user experience. all aimed at achieving our goals and delivering a seamless user experience.
First Time Experince
We incorporated the original team's design but made tweaks to improve discoverability and usability. This concept was about speed—getting a solution to market quickly. While it offered a rapid path to launch, it didn't deliver the optimal user experience on
mobile devices we aimed for.
mobile devices we aimed for.
Connect with Bakkt
Aimed to make financial check-ins a breeze. Your Monthly Wrap-Up allowed customers to review their finances each month in just 3 to 15 minutes. By distilling complex financial
data into bite-sized, actionable
insights, it made staying on top of spending simple and engaging.
data into bite-sized, actionable
insights, it made staying on top of spending simple and engaging.
Managing More Card
We reimagined financial management as a health and fitness journey. By making finance more engaging and
goal-driven, we encouraged users to set financial goals, track their progress, and feel a sense of achievement—much like hitting personal bests in a fitness app.
goal-driven, we encouraged users to set financial goals, track their progress, and feel a sense of achievement—much like hitting personal bests in a fitness app.
O8. Screen and Flow
Connect with Bakkt
Challenges
User Retention Across Apps
The challenge was to keep users engaged as they transitioned from the main app to Bakkt, ensuring the experience felt continuous despite the differing app designs.
Ensuring User Confidence
We needed to make sure users didn’t feel like they were leaving the app, which could cause confusion or concern. It was critical to make the flow feel seamless and integrated.
Key Features
The Flow
The flow ensures a one-time connection to Bakkt, allowing users to seamlessly interact with it within the app. Clear onboarding, guided transitions, and minimal friction ensure a smooth, intuitive experience with no glitches.
How it will work
•
Onboarding: Users are first asked if they’re already connected to Bakkt
•
Education: The app educates users on what to expect in the next step.
•
Transition to Bakkt: Users are taken to the Bakkt app.
•
Return to Main App: After completing the process, users are notified that they are now connected to Bakkt, and the process is complete.
Proposed Solution
Proposed To make the connection to Bakkt a one-time process, allowing users to interact seamlessly within the app. minimal friction to ensure a smooth and intuitive experience with no glitches.
O9. Screen and Flow
First Time Experience
Challenges
Educating Users
As a novice app, onboarding needed to effectively educate users on how the app works, especially since many users are less familiar with financial apps.
Simplifying Financial Concepts
Financial apps can be intimidating, so the challenge was to present complex concepts in a simple, digestible way to ensure users felt comfortable using the app.
Key Features
The Flow
The flow ensures a one-time connection to Bakkt, allowing users to seamlessly interact with it within the app. Clear onboarding, guided transitions, and minimal friction ensure a smooth, intuitive experience with no glitches.
How it will work
•
Onboarding: Users are first asked if they’re already connected to Bakkt
•
Education: The app educates users on what to expect in the next step.
•
Transition to Bakkt: Users are taken to the Bakkt app.
•
Return to Main App: After completing the process, users are notified that they are now connected to Bakkt, and the process is complete.
Solution
Proposed To make the connection to Bakkt a one-time process, allowing users to interact seamlessly within the app. minimal friction to ensure a smooth and intuitive experience with no glitches.
04. PROCESS
Managing More Card
Challenges
Card Distinction
When multiple cards are added, the user should be able to easily distinguish between them and select the right card for each transaction.
Multiple Fund-Adding Methods
Users should have flexible options to add funds—either automatically or manually—mirroring real-world scenarios where users might choose different methods depending on their situation.
Solution
Make the process seamless
The user interface ensures that all cards and balances are clearly visible, with a strong visual hierarchy to help users quickly find the information they need. The steps in the flow are designed to be intuitive and straightforward
Key Features
•
Add New Card: Users are first User can easily add a new card
•
Add Funds: User has two options to add funds to the card.
•
Edit Card Details: The user can easily edit card details such as the card name, linked account, or funding methods.
•
Structured Presentations: Team members present their findings and recommendations in allocated slots, keeping things organised.
•
View Transaction History: The user can access and review their transaction history, providing a transparent and clear overview of card activity.
Add More Card
Use clear visual separation between cards and balance displays to ensure users can easily identify and use each card. Option for users to add funds automatically or manually, making the process adaptable to their needs.
Adding Funds
Allow users to edit card details and view transaction history easily, ensuring they have control and full visibility over their funds.
Shaping the Dream with
Key Screens and Features
Add More Card
When designing a mobile app to convert crypto to use for everyday expenses, you want to ensure the features are intuitive and user-friendly. Here’s an explanation of the key features you mentioned:
Easy to understand features
Multiple Cards: This feature lets users view all their crypto-backed cards in one place. It provides a quick overview of different cards, whether they are linked to different cryptocurrencies or designated for specific expenses. This makes it easy to manage between card without hassle.
Set a Primary Card: Users can set a default card for their everyday purchases. This primary card will be used automatically for most transactions, streamlining the experience while still allowing users to change it when needed, based on preferences or convenience.
UX Psychology Applied
Familiarity and Cognitive Fluency: People tend to feel more comfortable and confident using an interface that feels familiar, which is why it's important to design the crypto app to look and function similarly to traditional banking or payment apps.
Progressive Disclosure: As users become more familiar with the app, they can be gradually introduced to more advanced features, such as viewing crypto-specific details or managing multiple crypto wallets
Manually Reload with Auto
When designing a mobile app to convert crypto to use for everyday expenses, you want to ensure the features are intuitive and user-friendly. Here’s an explanation of the key features you mentioned:
Add money effortlessly
Manual reload: This feature lets users view all their crypto-backed cards in one place. It provides a quick overview of different cards, whether they are linked to different cryptocurrencies or designated for specific expenses. This makes it easy to manage between card without hassle.
Keep Balances in different Cards: Users can set a default card for their everyday purchases. This primary card will be used automatically for most transactions, streamlining the experience while still allowing users to change it when needed, based on preferences or convenience.
Dashboard
Monthly snapshots of savings, spending, and income. We intentionally used only 40% of the screen to highlight key information and keep it distraction-free.
Anti-Patterns Used
Don’t Make Use of Space: By limiting content to a portion of the screen, we help users focus on what's most important, avoiding visual clutter and enhancing clarity..
Reduce Time on App: We’ve trimmed the content to the essentials, allowing users to quickly address their finances, reduce screen time, and get on with their day.
UX Psychology Applied
Framing Effect: We prioritise savings in the hierarchy to encourage saving behaviour. Highlighting achievements like 'Crushing the average by $312' frames users' progress in an encouraging light.
Habit Formation: Features like the "3-MONTH STREAK" reward consistent behaviour, motivating ongoing saving habits and encouraging regular engagement with financial goals.
Rewards Program
This feature allows users to earn reward points for their purchases when they meet a certain spending threshold. For example, spending $250 or more could earn the user a $50 reward, which encourages higher spending while offering a tangible benefit for their loyalty.
UX Psychology Applied
Habit Formation: By The concept of earning reward points taps into the habit formation principle, where users are encouraged to engage in regular purchasing behavior in order to receive rewards. Over time, as users become accustomed to earning points, they may make it a habit to aim for the reward threshold, increasing their spending frequency and fostering brand loyalty. This creates a positive feedback loop where the desire for rewards motivates continued use of the app.
Loss Aversion: Another UX psychology principle at play here is loss aversion, which suggests that people are more motivated to act to avoid losing something than to gain something of equal value. By presenting the reward points system in a way that highlights the value they could be "missing out" on (e.g., "Spend $250 to earn $50 in rewards"), users are more likely to make purchases in order to take advantage of the offer. This taps into their desire to avoid the feeling of missing out on a valuable reward.
Finding Vending Machine
Easily locate the nearest vending machine and select the service you need with just a few taps.
Quick and Easy
Use Map to Show the Location of Vending Machines
This feature uses an interactive map to display the nearest vending machines to the user’s current location. It shows a visual representation of the map, pinpointing the exact locations of various vending machines nearby. This helps users quickly find the closest machine they need, whether they're looking for food, beverages, or other services. By integrating real-time location tracking, the map ensures that users can easily navigate to the nearest machine without wasting time searching.
This feature uses an interactive map to display the nearest vending machines to the user’s current location. It shows a visual representation of the map, pinpointing the exact locations of various vending machines nearby. This helps users quickly find the closest machine they need, whether they're looking for food, beverages, or other services. By integrating real-time location tracking, the map ensures that users can easily navigate to the nearest machine without wasting time searching.
Let Users Select from Different Vending Machine Types
The app allows users to filter vending machines based on their type of service. They can choose from categories like Food Vending, Massage Chairs, Beverage Vending, Mini Carts, and Electric Carts. This feature makes it easy for users to find exactly what they need, whether they’re in the mood for a snack, seeking relaxation, or needing transportation. By offering these clear categories, the app helps users quickly navigate to the right type of vending machine, enhancing the overall experience and efficiency of using the
The app allows users to filter vending machines based on their type of service. They can choose from categories like Food Vending, Massage Chairs, Beverage Vending, Mini Carts, and Electric Carts. This feature makes it easy for users to find exactly what they need, whether they’re in the mood for a snack, seeking relaxation, or needing transportation. By offering these clear categories, the app helps users quickly navigate to the right type of vending machine, enhancing the overall experience and efficiency of using the
New Business Potential Unlocked
We identified three key business opportunities that set this feature apart from the current offerings within the mobile app.
Social Engagement
This light-hearted approach encourages users to start conversations about money with loved ones. Using the share button, they can discuss progress and insights from non-sensitive data in the Spark section, such as coffee spending or budgeting tips, all without revealing personal account information.
Product Cross-Selling
The Spark section and Quick Actions are ideal spots to offer relevant products or services tailored to users' financial situations. For instance, frequent diners might see deals on cashback credit cards or high-interest savings accounts to help them save more effectively.
Boosting Savings
Our app encourages users to save more, which also increases the bank's capital reserves. By offering competitive interest rates, savings challenges, or bonuses for reaching goals, we help customers achieve their financial objectives while strengthening the bank's financial position.
