What's Peoples Trust?

Peoples Trust, as part of Peoples Group, focuses on delivering a range of financial services through various partners and channels. Peoples Group's Payment Solutions & Card Services division is particularly noteworthy for offering top-tier services for merchants and custom financial solutions tailored to fintechs. Their expertise includes facilitating secure transactions and developing innovative payment systems that support business growth and digital financial innovation.

What was the challenge?

The challenge is to create an iOS and Android app for the Prepaid Mastercard that enables users to seamlessly manage their prepaid cards. The app should allow users to:

- Load and reload funds onto their Prepaid Mastercard.
- View transaction history and track spending in real-time.
- Set spending limits and alerts for better financial management.
- Lock and unlock their card for security purposes.
- Access customer support for issues related to their card.
- Receive notifications about balances, reloads, and important updates.
- Integrate with digital wallets (like Apple Pay and Google Pay) for contactless payments.

The app needs to provide an intuitive, user-friendly experience, ensuring secure, easy-to-navigate financial control on the go.

Traditional Banks vs. Digital Banks: A Comparison of Services and Innovation

Creating a mobile app for a Prepaid Mastercard requires a comprehensive understanding of both traditional and digital financial landscapes to deliver a competitive edge. The top five Canadian banks—TD, RBC, Tangerine, Scotiabank, and National Bank—provide robust mobile experiences, offering services like bill payments, transfers, and personal financial management, albeit often with higher fees and a slower pace of innovation. In contrast, leading digital banks such as Monzo, N26, Nubank, WeBank, and PC Financial focus on delivering highly accessible, low-cost banking experiences with user-centric features like real-time spending insights, zero-fee structures, and simplified, intuitive interfaces designed for mobile-first users. These digital banks excel at meeting the needs of tech-savvy, mobile-focused customers who demand seamless, secure, and flexible financial management. On the other hand, top credit card and payment platforms, including PayPal, Stripe, PicPay, and Koho, emphasize fast, secure transactions, user-friendly mobile apps, and innovative features like cashback rewards and no-fee prepaid accounts. These platforms leverage fintech solutions to make financial management more efficient and accessible, particularly for those who may not have access to traditional banking services. To stand out in this competitive landscape, the Prepaid Mastercard app must integrate the best of both worlds—offering the comprehensive financial services of traditional banks, paired with the innovation, accessibility, and ease of use characteristic of digital banks and fintechs. Features like real-time transaction tracking, easy reloading, spending insights, and budget management tools, coupled with secure digital wallet integration, will position the app as a modern, user-friendly solution that appeals to a wide range of customers, from those seeking alternative banking options to tech-savvy users looking for a flexible, all-in-one financial management platform.

Mapping User Flows for Enhanced Navigation and Experience

I created user flows to outline the steps users take to complete specific tasks within our product. This process involves mapping out each interaction, decision point, and pathway, providing a clear visual representation of the user journey. By designing these flows, I can identify potential pain points and streamline the user experience, ensuring that navigation is intuitive and efficient.

‍

Wireframe (IA): Structuring Digital Experiences for Optimal Navigation

The process of organizing and structuring content in a way that enhances user experience and facilitates easy navigation. It involves creating a clear hierarchy and logical flow of information, ensuring that users can intuitively find what they need. Key components of IA include:

1. Dashboard: The central hub where users can view an overview of their financial activities, including credit cards, account balances, recent transactions, offers, and alerts. It should provide quick access to essential functions like loading funds.

2. Credit Card Management: A dedicated section for users to manage their Prepaid Mastercard, allowing them to view card details, check available balance, Upgrade, Reload, E-transfer, Direct, Auto load, Bill pay, and lock. This area may also include options for setting spending limits and notifications.

3. User Profile: A personalized area where users can manage their account settings, update personal information, and customize preferences. It may also include security settings, such as enabling two-factor authentication.

4. More: A section that provides additional resources and features, such as FAQs, customer support, and find a Store. This area can enhance user engagement by offering value-added services.

By effectively incorporating these elements into the IA, you can create a cohesive structure that guides users through the app, ensuring they can easily access information and complete tasks. Effective IA reduces cognitive load, simplifies the user journey, and improves overall usability by presenting information in an accessible and coherent manner. By prioritizing user needs and behaviors, IA plays a critical role in delivering seamless, user-centered digital experiences.

‍

Creating User-Centered Concepts in Design Exploration

In my design explorations, I create concepts that serve as the foundation for developing user-centered interfaces and experiences. By integrating insights from user research, I conceptualize innovative solutions that address specific needs and pain points. These concepts often include detailed concepts and prototypes, which illustrate how users will interact with elements such as dashboards, navigation menus, and profile management features. Through iterative testing and feedback loops, I refine these concepts, ensuring they align with user expectations and enhance overall usability. This process not only fosters creativity but also allows me to deliver tailored solutions that improve user satisfaction and engagement.

‍

‍

Designing an Effective Account Creation Form for Enhanced User Experience and Security

When designing an account creation form, it is essential to prioritize user-friendliness, security, and efficiency to ensure a seamless onboarding experience. The form should begin with personal information fields, including first name, last name, email address, and optionally, a phone number for verification. Following this, users should input a unique username and create a strong password, confirming it for accuracy. To enhance security through identity verification, the form can integrate Onfido's features, prompting users to upload an ID document and a selfie for verification. Additionally, options for enabling two-factor authentication and selecting security questions for password recovery can further bolster account security. It is crucial to include checkboxes for users to agree to the terms and conditions and acknowledge the privacy policy. Clear labels, inline validation for real-time feedback, and mobile responsiveness are vital design considerations that enhance usability and accessibility. By creating a well-structured account creation form, businesses can streamline the registration process, instill user confidence, and foster a secure environment from the outset.

‍

‍

Creating Engaging Animations

I have created various animated elements, including loading, link, success, fail animations, Touch ID and a face ID animation, using After Effects and exported them to Lottie for seamless integration into web and mobile applications. These animations enhance user engagement by providing visual feedback during loading processes, making the experience more dynamic and enjoyable. The Face ID animation is designed to simulate the authentication process, offering users a familiar and secure interaction method.

‍

Designing an Intuitive Dashboard for the Prepaid Mastercard Application

The dashboard serves as the central hub for users of the Prepaid Mastercard, providing a comprehensive overview of their financial activities at a glance. Designed with user experience in mind, the dashboard displays key information such as the current balance, recent transactions, and spending categories, allowing users to easily monitor their financial status. I Additionally, quick access buttons for essential functionalities, such as reloading funds, check available balance, Upgrade, Reload, E-transfer, Direct, Auto load, Bill pay, and lock, enhance usability and efficiency. By consolidating vital information and features into one intuitive interface, the dashboard fosters a seamless user experience, enabling users to engage with their finances confidently and efficiently.

In addition, the details transaction page may feature interactive elements such as button for action like sharing.

‍
‍

Streamlined Navigation Design

I create easy and quick navigation featuring options such as Dashboard, Profile, and more. This streamlined layout allows users to quickly access key areas of the platform, enhancing their overall experience. The intuitive design ensures that users can effortlessly find the information or functions they need, promoting efficient interaction with the application.

‍

Developing Key Functionalities for the Prepaid Mastercard

I created a comprehensive suite of functionalities for the Prepaid Mastercard, enhancing its usability and convenience for users. This includes features that allow users to view card details and check their available balance easily, ensuring they can manage their finances effectively. I also implemented options for seamless upgrades, allowing users to access enhanced features as needed. Additionally, the card supports various reloading methods, including e-transfer, direct deposits, and auto-load options, ensuring users maintain an adequate balance. The bill pay feature simplifies the management of monthly expenses directly from the card, while the ability to lock and unlock the card provides users with added security. These functionalities come together to deliver a flexible and user-friendly financial tool that addresses the diverse needs of modern consumers.

‍

Establishing Foundations and UI Kits for a Robust Design System

In the development of a design system, the foundation and UI kits are essential components that establish a solid base for creating cohesive user interfaces. The foundation includes core design principles, typography, color palettes, spacing guidelines, and accessibility standards, ensuring that all design elements align with the brand’s identity and usability requirements. Complementing the foundation, UI kits consist of a collection of pre-designed components, such as buttons, forms, cards, and icons, that can be easily implemented across various applications. These UI kits enable designers and developers to maintain consistency while accelerating the design and development process. By providing a structured approach to visual and functional design, the foundation and UI kits empower teams to create intuitive and engaging user experiences that resonate with users and meet project goals effectively.

‍

‍

Prototype

I created prototypes that act as interactive representations of our design concepts, allowing for an early exploration of user experiences. By developing both low-fidelity wireframes and high-fidelity interactive models, I gathered valuable user feedback and identified usability issues before full-scale development. This iterative process not only enhanced collaboration with stakeholders but also ensured that the final product closely aligns with user needs and expectations.

‍

Delivery

During the delivery process, I collaborate closely with Business Analysts (BA), business stakeholders, Product Owners (PO), and developers to ensure successful project outcomes. This cross-functional collaboration allows for the alignment of business goals and user needs, facilitating effective communication throughout the development lifecycle. I create mockups and prototypes to visually represent design concepts and interactions, helping stakeholders understand the user interface and experience more clearly. By working together, we can address potential challenges, refine requirements, and ensure that the final product meets both technical specifications and user expectations, resulting in a streamlined delivery process and a high-quality end result.

Final Thoughts: Ensuring a Successful Outcome

In conclusion, the design and delivery process is a multifaceted journey that requires collaboration, iterative feedback, and a strong focus on user experience. By engaging with stakeholders—such as Business Analysts, Product Owners, and developers—and creating mockups and prototypes, we can ensure that the final product not only aligns with business objectives but also meets the needs of users. It is essential to remain adaptable and open to feedback throughout this process, as it leads to valuable insights and improvements. Ultimately, the goal is to deliver a high-quality product that enhances user satisfaction and achieves business success, underscoring the importance of a user-centered design approach in every stage of development.
‍

‍
The Paypower app is available for:

iOS, Android‍ & Website