PlutoPay
Description
PlutoPay simplifies financial activities like shopping and payments, offering easy bill splitting, enhanced money transfers, and distinct expense tracking all digitally without banks or cards.
In this Project i focused on three key features:
- Easy expense splitting,
- Detailed expense tracking,
- AI-enhanced predictions for optimal exchange rates in money transfers.
Team members
Used Tools
Discover
Problem Understanding
Before progressing to the next design stage for PlutoPay, it’s crucial to validate the identified financial management problems, a step often overlooked. While I can’t be certain of the extent of problem validation completed, efforts were made to identify and catalog the significant challenges faced by potential users—particularly the pain points of those needing efficient financial management when dealing with diverse transactions and savings.
Competitive analysis
Conducting a SWOT analysis to evaluate the competitive landscape was instrumental in recognizing the strengths and weaknesses of similar financial apps. This strategic approach, which included examining apps akin to PlutoPay, was key to carving out a distinct niche for our service in the market.
Business Requirements Document
Following a thorough analysis of our competitors’ strategies, I crafted a Business Requirement Document for PlutoPay. This was to ensure that our users’ financial management needs are perfectly aligned with our business objectives, confirming that PlutoPay’s overarching strategy is both practical and well-defined, setting clear parameters for our creative development.
User Stories
USER 1 : As a user, I want the home screen to display a summary of my account balance and recent transactions, so that I can have a quick overview of my financial status.
USER 2 : As a potential user, I want to create a new account with my email and set a strong password, so that my personal and financial information remains secure while using PlutoPay.
USER 3 : As a sender, I want to view a list of my saved recipients and their details, so that I can quickly select and initiate transactions without having to re-enter recipient information
Insights
User Survey
- Understand users’ current methods of managing their finances and making transactions.
- Identify pain points and challenges users face in making group payments or transactions.
- Explore users’ preferences and attitudes towards personalized financial insights and transaction suggestions
Research Insights
Financial Complexity
Participants found managing group finances challenging and indicated a need for simpler solutions to facilitate these transactions.
Convenience and Ease of Use
There’s a demand for easy-to-use platforms to simplify transaction management.
Real-time Exchange
Users want solutions providing live exchange rates and efficient transactions.
IDEATION
Information Architecture
Entering the ideation phase for PlutoPay, I’m focusing on three key components: developing User Flows to map out the user’s journey within the app, conducting Card Sorting to understand user expectations for navigation and categorization, and structuring the Information Architecture to ensure the app is intuitive and user-friendly. This phase is crucial for transforming insights into actionable design concepts.
Cart Sorting / Sitemap
Upon reviewing user journeys and personas, I crafted a sitemap to illustrate the app’s Information Architecture, emanating from a central homepage. To gather user insights, an Open Card Sort, facilitated by Optimal Workshop, involved five participants. Their categorization insights are instrumental in aligning the app’s design with user expectations, aiming to enhance the overall user experience
Prototype
Wireframes
For the PlutoPay prototype, I started with sketches, evolving these into low-fidelity wireframes in Adobe XD. Progressing to Figma, I refined these into mid-fidelity wireframes, guided by Material Design principles to ensure a coherent and intuitive user experience. The creation of a design documentation and language system bestowed PlutoPay with a distinct identity. The culmination was in high-fidelity wireframes, meticulously aligned with the established design principles, showcasing the deliberate choices behind PlutoPay’s user interface, blending innovation, functionality, and user-centric design.
Usabilty testing
Usability testing before high-fidelity prototyping is key to identifying user issues early, guiding design adjustments based on actual feedback, and ensuring the final product is user-centered and intuitive, saving time and resources.
Therefor, i detailed evaluating PlutoPay’s prototype, emphasizing functionality, navigation, and task success for users. I performed in-person mobile tests with 6 individuals, aged 25-40, incorporating an intro, task execution, and a debrief. Usability was assessed via Jakob Nielsen’s scale, with post-task satisfaction scores collected.
Samir 30-35
Germany
Web-Dev
Mari 30-40
Germany
Cashier
Thomas 40-45
Germany
Physiotherapist
Ahmad 25-30
Morocco
Graphic Ds
Nadia 30-40
Morocco
House keeper
Murad 35-40
Morocco
Retails
Samir 30-35
Germany
Web-Dev
Mari 30-40
Germany
Cashier
Thomas 40-45
Germany
Physiotherapist
Ahmad 25-30
Morocco
Graphic Ds
Nadia 30-40
Morocco
House keeper
Murad 35-40
Morocco
Retails
Usabilty testing
Issue : Inviting Roommates
Severity : High
Suggested Change :
Clarify and simplify roommate invitation for expense splitting through redesigned interfaces and clearer instructions.
Evidence :
Three participants faced confusion during the expense splitting task.
Preference Test
I performed a Preference Test on the Onboarding screen, altering the position of the skip button and adjusting the size of the next button for the test. Additionally, I redesigned the screen for this evaluation.
Fifteen participants were enlisted, and 60% favored the initial design. It is evident that participants lean towards having call-to-action buttons positioned closely to each other, creating a sleek and clear appearance
Design Language
Leveraging Gestalt and visual design principles, I crafted a Design Guide and Language System for PlutoPay’s UI, aiming for a cohesive and soothing visual theme to enhance user experience and engagement.
Branding
The PlutoPay logo is a study in balance and precision, utilizing the golden ratio to achieve an aesthetically pleasing design that conveys the app’s core values of security, trust, and professionalism.
The concentric circles and soft curves suggest inclusivity and continuous movement, mirroring the fluid nature of financial transactions. The calming blue tones represent stability and reliability, while the bold typeface asserts a strong presence, ensuring PlutoPay stands out as a trustworthy financial ally.
Design Language
Incorporating a comprehensive style guide into my design approach has emerged as an essential asset in attaining visual uniformity, establishing brand harmony, and optimizing workflow efficiency.
Designing for Accessibility
I emphasized the necessity of iterating PlutoPay’s design for accessibility to ensure it serves all users, including those with disabilities, enhancing the app’s inclusivity and reach.
Example
Issue 1
The placeholder text within the search button lacks a contrast ratio of at least 4.5:1.
Implementation
To achieve AA level compliance, a distinct shade of gray was employed for the supporting text. Additionally, a microphone icon was incorporated to improve accessibility.
Issue 2
The check and cancel icons are currently small and exhibit color contrast issues, making them challenging to discern.
Implementation
To address this, the size of the icons has been increased from 15 to 20. Additionally, a stroke has been added around the icons to enhance visibility. It’s worth noting that the click action will now be on the profile, not directly on the icons. This adjustment ensures improved visibility and interaction clarity.
Issue 3
The buttons currently have a height below the recommended 40px for an optimal tap target.
Implementation
To address this, the button height has been increased to 45px, accompanied by a font size adjustment from 16px to 18px. This modification ensures a more suitable and user-friendly tap target.
Polishing the Design
Through iterative collaboration with test users and adherence to established design principles, I refined PlutoPay’s interface, resulting in a suite of high-fidelity wireframes and mock-ups that effectively embody the app’s intended functionality and aesthetic.
Conclusion
Reflecting on the PlutoPay project’s journey from research and design to iteration, I found the experience enriching. Despite challenges in defining layouts and functionalities, the defining stage underscored the value of user research and feedback in crafting a user-focused product. The iterative process was crucial in adapting PlutoPay to the changing needs of its users, ensuring relevance and user satisfaction.
