Transforming TerraPay
A case study on how we unified TerraPay's brand experience and built a scalable design system to empower its B2B customers, leading to enhanced user trust and a positive impact on their overall service offerings.
Client
TerraPay
Year
2024
Type
Design System / Web & App Design
Transforming TerraPay
A case study on how we unified TerraPay's brand experience and built a scalable design system to empower its B2B customers, leading to enhanced user trust and a positive impact on their overall service offerings.
Client
TerraPay
Year
2024
Type
Design Systems / Web & App Design
The Challenge
TerraPay, a leading global provider of secure and efficient payment solutions, partners with a diverse range of businesses, including banks, travel companies, media outlets, money transfer operators (MTOs), and digital wallets. The challenge was to create a new design system that would unify the brand experience across multiple platforms, improve user comprehension, and makeglobal payments seamless, ultimately leading to increased trust and customer satisfaction for both B2B and B2C users.
User Personas
We developed personas to represent these audiences, highlighting their motivations, concerns, and expectations for a global technology company. We also recognized that the improved B2B experience would ultimately impact TerraPay's B2C users, as they are often the end beneficiaries of the transactions facilitated by TerraPay's business partners.
The Challenge
TerraPay, a leading global provider of secure and efficient payment solutions, partners with a diverse range of businesses, including banks, travel companies, media outlets, money transfer operators (MTOs), and digital wallets. The challenge was to create a new design system that would unify the brand experience across multiple platforms, improve user comprehension, and makeglobal payments seamless, ultimately leading to increased trust and customer satisfaction for both B2B and B2C users.
User Personas
We developed personas to represent these audiences, highlighting their motivations, concerns, and expectations for a global technology company. We also recognized that the improved B2B experience would ultimately impact TerraPay's B2C users, as they are often the end beneficiaries of the transactions facilitated by TerraPay's business partners.
Aisha Mohammed
Age
38
Location
Lagos, Nigeria
Occupation
Founder and CEO of a
small import/export business
Family
Married, 2 children
Financial
Situation
Stable, seeking efficient solutions for international payments.
Says
"I need a platform that makes managing global payments simpler and more affordable."
Thinks
"I want a platform that is reliable and secure, with clear communication and easy to understand instructions."
Feels
Compares different payment platforms to find the most cost effective options.
Does
Compares different payment platforms to find the most cost-effective options.
Goals
Wants a reliable and affordable way to make international payments to suppliers and business partners.
Seeks a platform with clear communication about fees, exchange rates, and transaction times.
Desires a secure and convenient way to manage global payments, especially with mobile accessibility.
Pain Points
Frustrated with high fees and inconsistent exchange rates offered by traditional remittance providers.
Concerned about potential delays and difficulties in tracking international payments.
Wants a platform that is easy to use and understand, even for users who aren't tech-savvy.
Does
Compares different payment platforms to find the most cost-effective options.
Feels
Compares different payment platforms to find the most cost effective options.
Thinks
"I want a platform that is reliable and secure, with clear communication and easy to understand instructions."
Goals
Wants a reliable and affordable way to make international payments to suppliers and business partners.
Seeks a platform with clear communication about fees, exchange rates, and transaction times.
Desires a secure and convenient way to manage global payments, especially with mobile accessibility.
Pain Points
Frustrated with high fees and inconsistent exchange rates offered by traditional remittance providers.
Concerned about potential delays and difficulties in tracking international payments.
Wants a platform that is easy to use and understand, even for users who aren't tech-savvy.
Says
"I need a platform that makes managing global payments simpler and more affordable."
Aisha Mohammed
Age
38
Location
Lagos, Nigeria
Occupation
Founder and CEO of a
small import/export business
Family
Married, 2 children
Financial
Situation
Stable, seeking efficient solutions for international payments.
Does
Researches and evaluates different payment solutions based on features, security, and ease of integration.
Feels
Motivated, driven to find the best solution, cautious about security risks, frustrated by limited options.
Thinks
"I want a platform that is innovative and can help us expand our business globally."
Goals
Wants to integrate a secure and reliable global payment platform into his company's services.
Seeks a platform with advanced features, such as API integration, multi-currency support, and real-time transaction tracking.
Values a transparent fee structure and excellent customer support.
Pain Points
Frustrated by the limitations of existing payment solutions, especially for cross-border transactions.
Concerned about security and the potential for fraud.
Wants a platform that can easily integrate with their existing systems and scale with their growing business.
Says
"I need a platform that is reliable, secure, and can handle our growing volume of international transactions."
Khaled Al-Amin
Age
32
Location
Dubai, UAE
Occupation
Co-founder of a fintech startup
Family
Married, no children
Financial
Situation
Financially independent, seeking innovative and scalable payment solutions.
Does
Manages global payments for the company, monitors financial performance, and ensures compliance.
Feels
Overwhelmed by complex international payments, cautious about security, and seeking a streamlined solution
Thinks
"I want a platform that simplifies our payment processes and provides reliable data analysis."
Goals
Wants a platform that streamlines and simplifies the management of international payments.
Seeks a platform with robust reporting features to track transactions and reconcile accounts.
Desires a secure and reliable platform with strong fraud prevention measures.
Pain Points
Frustrated with inconsistent payment processing times and challenges in managing multiple currencies.
Concerned about potential errors and delays in payments, impacting business operations.
Wants a platform that offers transparent pricing and clear documentation.
Says
"I need a platform that provides accurate and timely reporting for all our international transactions."
Jinsoo Kim
Age
39
Location
Dubai, Seoul, South Korea
Occupation
Finance Manager, Large Multinational Corporation
Family
Married, two children
Financial
Situation
Stable, responsible for managing the company's global payments.
Understanding the Diverse User Needs
Understanding the Diverse User Needs
We conducted extensive user research to understand the needs and priorities of TerraPay's primary B2B customers, who represent a diverse range of businesses operating in various countries and industries. We identified key areas where the existing user experience could be improved:
Streamlining payment processes
Simplifying currency management
Enhancing security and
Providing clear and reliable information.
We conducted extensive user research to understand the needs and priorities of TerraPay's primary B2B customers, who represent a diverse range of businesses operating in various countries and industries. We identified key areas where the existing user experience could be improved:
Streamlining payment processes
Simplifying currency management
Enhancing security and
Providing clear and reliable information.
Competitor Analysis
Understanding the current market with a comprehensive competitive analysis helped us gain insights into market positioning and strategies. It gave us insights on the emerging competitors that shape the landscape and helped us in informed decision-making.
Feature/
Aspect
Streamlined experience for businesses; user-friendly interface.
Familiar experience but overwhelming due to diverse services.
Competitive fees with clear breakdowns; can be complex.
Competitive fees with clear breakdowns.
Extensive support options including live chat, phone, and email.
24/7 customer support via chat, phone, and email.
User Interface
(UI)
Emphasizes security,
lacks extensive reputation
Modern, clean, and professional; emphasizes technology.
Simple and straightforward process; prioritizes user ease.
Can be complex for some users; lacks user-friendliness.
Not explicitly mentioned; may vary by platform.
Not explicitly mentioned; may vary by platform.
Mobile App Performance
Customer Support
Customization Options
Transaction Tracking
International Reach
Accessibility
Limited accessibility features; not fully WCAG compliant.
Advanced security protocols with multi-layered protection.
Security
Features
Basic security measures; lacks advanced fraud detection.
Strong security features including fraud protection and two-factor authentication.
Comprehensive security features with fraud detection and strong encryption.
Strong security features with fraud protection and two-factor authentication.
Emphasizes transparent pricing and robust security measures.
Strong accessibility support including screen reader compatibility.
Not explicitly mentioned; may vary by platform.
Good accessibility features; generally follows best practices.
High accessibility standards with clear contrast and keyboard navigation.
Not explicitly mentioned; may vary by platform.
Limited to certain countries with restricted payment options.
Extensive global network; supports numerous currencies.
Operates in over 100 countries; supports a wide array of currencies.
Global reach with broad support for various currencies and regions.
International reach with support for multiple currencies.
Broad partner network connecting businesses to global payment networks seamlessly.
Minimal customization for users; limited personalization features.
Good customization options including personalized settings.
Not explicitly mentioned; may vary by platform.
Moderate customization options for notifications and preferences.
High level of customization for user preferences and notifications.
Not explicitly mentioned; may vary by platform.
Basic tracking with limited detail; lacks real-time updates.
Real-time tracking with detailed updates and historical records.
Not explicitly mentioned; may vary by platform.
Comprehensive tracking with real-time updates and detailed records.
Detailed tracking with real-time updates and status notifications.
Not explicitly mentioned; may vary by platform.
Transaction Fees
Higher fees and unclear fee structure.
Can be complex and difficult to understand; potentially higher costs.
Fees vary; generally transparent but can be higher.
Transparent pricing; potentially higher for some transactions.
Limited support options; slow response times.
May not provide the same level of personalized assistance as some competitors.
Not explicitly mentioned; may vary by platform.
Excellent support with responsive help channels.
Onboarding Process
Lengthy and cumbersome onboarding with multiple steps.
Not explicitly mentioned; may vary by platform.
Efficient onboarding with clear instructions.
Simple onboarding with a guided setup process.
Quick and easy setup with instant account verification.
Not explicitly mentioned; may vary by platform.
User Experience (UX)
Inconsistent design system; complex and confusing user flows.
Slower app performance; occasional lag and crashes.
Not explicitly mentioned; may vary by platform.
Highly responsive; fast and efficient.
Generally fast, with some reports of occasional issues.
Can be challenging for less tech-savvy users; complex B2B transactions.
Sleek and minimalistic; focuses on speed and innovation.
Familiar and consistent;
well-established brand.
Modern and user-friendly; prioritizes ease of use.
Clean, professional aesthetic; highlights global reach.
Jobs to be done
Jobs to be done
Understanding the current market with a comprehensive competitive analysis helped us gain insights into market positioning and strategies. It gave us insights on the emerging competitors that shape the landscape and helped us in informed decision-making.
Understanding the current market with a comprehensive competitive analysis helped us gain insights into market positioning and strategies. It gave us insights on the emerging competitors that shape the landscape and helped us in informed decision-making.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
When making payments to international suppliers, I want to use a platform with clear fee structures and exchange rates, so I can ensure cost-effectiveness and transparency.
When integrating payment solutions into our fintech services, I want to use a platform with advanced features like API integration and real-time tracking, so I can provide seamless and innovative payment solutions to our clients.
When managing the company's global payments, I want a platform with robust reporting features and reliable processing times, so I can streamline financial operations and ensure accuracy.
When booking international travel for clients, I want a payment platform with transparent fees and secure transactions, so I can provide a smooth and trustworthy experience for my customers.
When overseeing payment operations, I want a platform that integrates seamlessly with our existing systems and offers clear documentation, so I can simplify processes and maintain regulatory compliance.
Design Principles & Features
Design Principles & Features
We established core design principles based on our user research, focusing on clarity, trust, accessibility, and a user-friendly experience. The website design prioritized key information and features, with a clear navigation structure and a consistent visual language. We incorporated clear and concise content, highlighting TerraPay's commitment to innovation, thought leadership, and a positive work culture. The website and its internal and external communication materials were designed to be accessible to all users, including those with disabilities.
We established core design principles based on our user research, focusing on clarity, trust, accessibility, and a user-friendly experience. The website design prioritized key information and features, with a clear navigation structure and a consistent visual language. We incorporated clear and concise content, highlighting TerraPay's commitment to innovation, thought leadership, and a positive work culture. The website and its internal and external communication materials were designed to be accessible to all users, including those with disabilities.
Customer Journey Map
Leveraging our user research, we developed detailed user journey maps. This involved charting key touchpoints and user experiences to understand motivations, needs, and potential pain points across the user lifecycle. These maps provided invaluable insights that directly informed our design decisions, ensuring we built an experience truly centered around the user and aligned with our core principles.
Customer Journey Map
Leveraging our user research, we developed detailed user journey maps. This involved charting key touchpoints and user experiences to understand motivations, needs, and potential pain points across the user lifecycle. These maps provided invaluable insights that directly informed our design decisions, ensuring we built an experience truly centered around the user and aligned with our core principles.
Stage
User Action
Touchpoints
Thoughts & Feelings
Pain Points
Terrapay website, competitor websites, industry reviews
Awareness
Maria hears about Terrapay from a colleague or sees an advertisement online.
"Is Terrapay secure? How does their pricing compare?"
"Terrapay seems like a promising solution. I'm willing to try it."
Decision
Exploration
User makes Maria explores Terrapay's features and navigates the platform to understand how to make a payment.a transaction and monitors payment status.
Website, online documentation, FAQs, customer support
"How do I manage multiple currencies? How do I track payment status?"
Onboarding
Maria creates an account and sets up her company profile on Terrapay's platform.
Terrapay website, onboarding process, registration form
"I need to make sure the registration process is straightforward and secure."
Transaction
Maria initiates a payment to her supplier, choosing the appropriate currency and payment method.
Website, payment form, transaction details
"I need to make sure the payment is processed quickly and securely."
Confirmation
Maria receives confirmation of the payment and tracks its status.
Email notifications, transaction history, platform updates
"I need to ensure the payment arrives on time and without errors."
Engagement
Maria continues to use Terrapay for future payments, and she recommends the platform to other businesses.
"Terrapay is a reliable and efficient solution for my global payments."
Consideration
Maria decides to try Terrapay based on its features, security, and pricing.
Maria visits Terrapay's website to learn more about the platform.
Industry event, online marketing, social media, recommendations from other businesses
"I'm looking for a reliable and efficient way to handle international payments."
"I need a platform that is easy to understand and manage."
"I hope it lives up to my expectations."
"I want to make sure I understand the fees and exchange rates."
"I hope the setup process is easy to understand."
"I hope the transaction process is straightforward and transparent."
"I want to be able to monitor the payment progress and receive updates."
"I'm happy with the overall experience and the platform's value."
"I'm concerned about high fees and potential delays."
Goals
Goals
Improve Usability
Improve Terrapay’s website and app for effortless navigation and task completion. Conduct heuristic evaluations and usability testing to resolve usability issues.
Enhance Accessibility
Streamline navigation and minimize steps for key tasks with intuitive design. Ensure adherence to WCAG standards throughout design and development.
Increase Trust and Security Perception
Enhance users’ perception of trust and security through design and messaging on Terappay’s platforms.
Improve
Usability
Improve Terrapay’s website and app for effortless navigation and task completion. Conduct heuristic evaluations and usability testing to resolve usability issues.
Enhance Accessibility
Streamline navigation and minimize steps for key tasks with intuitive design. Ensure adherence to WCAG standards throughout design and development.
Increase Trust and Security Perception
Enhance users’ perception of trust and security through design and messaging on Terappay’s platforms.
Streamline Onboarding Process
Streamline Terrapay's onboarding to help new users quickly grasp and use the platform with an intuitive, engaging setup flow.
Streamline Terrapay's onboarding to help new users quickly grasp and use the platform with an intuitive, engaging setup flow.
Consistent Branding and Messaging
Ensure consistent branding and messaging across all touchpoints to strengthen brand identity and recognition.
Foster User Engagement and Loyalty
Enhance user engagement and build lasting loyalty by creating a compelling and enjoyable user experience that keeps users coming back.
Consistent Branding and Messaging
Ensure consistent branding and messaging across all touchpoints to strengthen brand identity and recognition.
Foster User Engagement and Loyalty
Enhance user engagement and build lasting loyalty by creating a compelling and enjoyable user experience that keeps users coming back.
Visual Identity
Based on the brand’s values and market positioning, TerraPay's existing colour palette was enhancing tones with vibrant accents to reflect TerraPay’s modern and innovative spirit. Clean, sans-serif typography was chosen for readability and trust. Streamlined design elements and strategic iconography ensure consistency and clarity, simplifying complex financial concepts. The process focused on building a cohesive, recognizable brand presence that enhances user experience and instills trust, positioning TerraPay prominently in the fintech industry.
Based on the brand’s values and market positioning, TerraPay's existing colour palette was enhancing tones with vibrant accents to reflect TerraPay’s modern and innovative spirit. Clean, sans-serif typography was chosen for readability and trust. Streamlined design elements and strategic iconography ensure consistency and clarity, simplifying complex financial concepts. The process focused on building a cohesive, recognizable brand presence that enhances user experience and instills trust, positioning TerraPay prominently in the fintech industry.
Logo
TerraPay’s logo is a striking embodiment of its brand essence, designed with clean lines and bold typography, it exudes modernity and professionalism. The interlocking triangular cut at the “T” form a cohesive symbol, representing unity and connectivity, which aligns perfectly with TerraPay’s mission of facilitating seamless financial transactions globally.
TerraPay’s logo is a striking embodiment of its brand essence, designed with clean lines and bold typography, it exudes modernity and professionalism. The interlocking triangular cut at the “T” form a cohesive symbol, representing unity and connectivity, which aligns perfectly with TerraPay’s mission of facilitating seamless financial transactions globally.
Colour Palette & Typography
Terrapay's visual identity is anchored by the typefaces TT Firs Neue and Poppins, blending modern sophistication with clear, versatile communication. The color palette is meticulously curated to reflect brand values, evoke emotions, and ensure consistency across all platforms. Adhering to these guidelines fosters a cohesive, professional visual identity that resonates with the audience, maintaining brand integrity and promoting a unified representation.
Terrapay's visual identity is anchored by the typefaces TT Firs Neue and Poppins, blending modern sophistication with clear, versatile communication. The color palette is meticulously curated to reflect brand values, evoke emotions, and ensure consistency across all platforms. Adhering to these guidelines fosters a cohesive, professional visual identity that resonates with the audience, maintaining brand integrity and promoting a unified representation.
Iconography
The primary set of icons serves as a crucial visual language in TerraPay’s brand identity. They provide intuitive and universally understandable representations of essential functions and features across our platforms. These icons enhance user experience by offering quick and clear guidance, especially in situations where language barriers may exist. Consistency in style and meaning within the primary set ensures familiarity and ease of use for our audience, regardless of their location or language.
The primary set of icons serves as a crucial visual language in TerraPay’s brand identity. They provide intuitive and universally understandable representations of essential functions and features across our platforms. These icons enhance user experience by offering quick and clear guidance, especially in situations where language barriers may exist. Consistency in style and meaning within the primary set ensures familiarity and ease of use for our audience, regardless of their location or language.
Brand Elements
Brand elements are meticulously crafted to convey our core values and mission. Consistency in the application of these elements across all touchpoints ensures instant recognition and strengthens our brand identity.
Brand elements are meticulously crafted to convey our core values and mission. Consistency in the application of these elements across all touchpoints ensures instant recognition and strengthens our brand identity.
Visual Style
The essence of our visual identity comes to life. Our curated collection of images and distinct photography style serves as a powerful extension of our brand narrative.
The essence of our visual identity comes to life. Our curated collection of images and distinct photography style serves as a powerful extension of our brand narrative.
Image Treatment
TerraPay’s image treatment emphasizes clarity, consistency, and alignment with our brand identity. High-quality visuals resonate globally, enhancing brand recognition and trust. Primary images reflect our core values, while secondary images, consistent in quality, allow for creative exploration. Together, they create a cohesive visual language that enriches our marketing materials, website, and communications, enhancing the overall user experience and strengthening TerraPay.
TerraPay’s image treatment emphasizes clarity, consistency, and alignment with our brand identity. High-quality visuals resonate globally, enhancing brand recognition and trust. Primary images reflect our core values, while secondary images, consistent in quality, allow for creative exploration. Together, they create a cohesive visual language that enriches our marketing materials, website, and communications, enhancing the overall user experience and strengthening TerraPay.
Core Components
TerraPay’s UI kit is a comprehensive design tool that ensures consistency, efficiency, and brand alignment across all digital platforms. It includes reusable components, style guides, and templates that reflect TerraPay’s brand identity, making it easy for designers and developers to maintain a cohesive look and feel. The kit streamlines the design process, promotes a unified user experience, and supports rapid development, ensuring that every interface element is aligned with TerraPay’s visual and functional standards.
TerraPay’s UI kit is a comprehensive design tool that ensures consistency, efficiency, and brand alignment across all digital platforms. It includes reusable components, style guides, and templates that reflect TerraPay’s brand identity, making it easy for designers and developers to maintain a cohesive look and feel. The kit streamlines the design process, promotes a unified user experience, and supports rapid development, ensuring that every interface element is aligned with TerraPay’s visual and functional standards.
Grid System
A flexible grid ensures alignment, consistency, and responsiveness across devices, balancing content and design seamlessly.
A flexible grid ensures alignment, consistency, and responsiveness across devices, balancing content and design seamlessly.
Desktop
Mobile
Spacing
Consistent spacing enhances clarity, improves readability, and creates a cohesive visual flow throughout the interface.
Consistent spacing enhances clarity, improves readability, and creates a cohesive visual flow throughout the interface.
Patterns
Abstract and minimal patterns add depth and interest, reinforcing brand identity without overwhelming the design.
Abstract and minimal patterns add depth and interest, reinforcing brand identity without overwhelming the design.
Buttons
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
Inputs
Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns. You can find the default text input and the text input with a button.
Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns. You can find the default text input and the text input with a button.
Checkbox
Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns. You can find the default text input and the text input with a button.
Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns. You can find the default text input and the text input with a button.
Tabs
Tabs are an interactive field that allows users to switch between various content in the same section.
Tabs are an interactive field that allows users to switch between various content in the same section.
Desktop
Default
Selected
Default
Selected
Desktop
Default
Selected
Placeholder - 01
Placeholder - 02
Default
Selected
Navigation
Navigation is the act of moving between screens of an app to complete tasks. It's enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances.
Navigation is the act of moving between screens of an app to complete tasks. It's enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances.
Other Components
Desktop
Mobile
Default
Active
#0F1941
TT Firs Neue
Medium
Sizes: 16px
Grid System
A flexible grid ensures alignment, consistency, and responsiveness across devices, balancing content and design seamlessly.
Desktop
Spacing
Consistent spacing enhances clarity, improves readability, and creates a cohesive visual flow throughout the interface.
Patterns
Buttons
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
Default
Hover
States
Laptop
Mobile
106px
46px
32
#eb5e57
#ffffff
TT Firs Neue
Medium
Sizes: 16px
Mobile
Primary Button
Secondary Button
Laptop
Button 05
Button 05
Abstract and minimal patterns add depth and interest, reinforcing brand identity without overwhelming the design.
Mobile
Default
Hover
States
#0F1941
TT Firs Neue
Medium
Sizes: 18px
Laptop
Default
Text placeholder*
Focused
Text placeholder*
Error
Text placeholder*
Error info text
Active
Text placeholder*
Inputs
Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns. You can find the default text input and the text input with a button.
Input Field 01
Default
I agree to receive other communications from TerraPay.
Selected
I agree to receive other communications from TerraPay.
Laptop
Mobile
Default
Text placeholder*
Focused
Text placeholder*
Error
Text placeholder*
Error info text
Active
Text placeholder*
Check box
Mobile
Default
Selected
I agree to receive other communications
from TerraPay.
I agree to receive other communications
from TerraPay.
Default
Default
Default
Selected
Default
Placeholder - 01
Placeholder - 02
Selected
Default
Selected
Tabs
Tabs are an interactive field that allows users to switch between various content in the same section.
Laptop
div-Img-Logo
149px
29px
Default
Open
Default
Close
Network
Partners
Banks
Travel
Media
MTO
Digital wallets
Insights
Resources
Company
Open
Navigation is the act of moving between screens of an app to complete tasks. It's enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances.
Navigation
Shp-Arrow
10px
15px
#eb5e57
Menu Items
TT Firs Neue
Regular
Sizes: 20px
#010a22
Connect
163px
66px
#eb5e57
#ffffff
TT Firs Neue
Medium
Sizes: 18px
Mobile
div-Img-Logo
115px
22px
div-burgerMenuOpen
30px
14px
#ffffff
Path 3143
30px
2px
#dd7974
Default
Default
Mobile
Default
Hover
Default
Desktop
Default
Other Components
Tickers
Cards
Hover
Default
Desktop
Mobile
Active
Default
Impact & Outcomes
The rebranding and design system were successful in establishing Terrapay as a leading global payment solutions provider, attracting new customers and generating positive media attention. The new brand identity and design system helped create a consistent and unified brand experience across various platforms, effectively communicating Terrapay's commitment to innovation, security, and a user-friendly experience.
This resulted in a significant increase in user engagement and customer satisfaction, solidifying Terrapay's position as a trusted and reliable global payment solution. These improvements in the B2B user experience directly translated into benefits for their B2C users, who experienced faster, more reliable, and more secure payment services.
The rebranding and design system were successful in establishing Terrapay as a leading global payment solutions provider, attracting new customers and generating positive media attention. The new brand identity and design system helped create a consistent and unified brand experience across various platforms, effectively communicating Terrapay's commitment to innovation, security, and a user-friendly experience.
This resulted in a significant increase in user engagement and customer satisfaction, solidifying Terrapay's position as a trusted and reliable global payment solution. These improvements in the B2B user experience directly translated into benefits for their B2C users, who experienced faster, more reliable, and more secure payment services.
Key Learnings
This project underscores the importance of user-centered design when developing a brand identity and design system for a global organization. We learned that understanding the unique needs and preferences of users across different cultures and industries is critical for building trust and achieving product success. We're committed to continuously iterating on the design system based on user feedback and market insights, ensuring that it remains relevant and effective for Terrapay's growing customer base.
This project underscores the importance of user-centered design when developing a brand identity and design system for a global organization. We learned that understanding the unique needs and preferences of users across different cultures and industries is critical for building trust and achieving product success. We're committed to continuously iterating on the design system based on user feedback and market insights, ensuring that it remains relevant and effective for Terrapay's growing customer base.
Credits: Chetan V, Suraj C, Khushi Pal, Manu Prasad, Vinesh, Ajith Babu
Credits: Chetan V, Suraj C, Khushi Pal, Manu Prasad, Vinesh, Ajith Babu