Case Study
Boosting Transaction Success Rate By Over 60% Through a Streamlined Money-Receiving Experience
My Role
UI/UX Designer
Timeline
3 Weeks
Team
1 UX Designer • 2 Content Writers • 1 PM • 3 Engineer teams • 1 UX Researcher
Overview
Tranzfer is a simple, fast, and reliable banking app for seamless transactions. While praised for its intuitive design, it now faces challenges with its send-and-receive funds feature as users demand improvements.
Challenge
Bryan tries to pay Jamal, a fruit vendor, in a noisy market. Miscommunication over account details turns a 25-second transaction into a 5-minute struggle, leaving both stuck in a frustrating loop of confusion.
Metric
Design Objective
Aim to increase the success rate of transaction by streamlining the money receiving process thereby enabling the user to focus more on conduct their business interaction.
Target Audience
Scope of Project
Users seek a better process of completing their transaction as the traditional way of doing this doesn’t prove efficient in most scenarios. A process that removes the burden of repetition, inaccuracy and prolong task completion.
Research
Understanding our users
Tranzfer app users adopt the app for transaction because of the swift and simple user interface. But users face a new challenge which is to adopt the app to different situation they find themselves.
Customer Reviews
Interviews
I interviewed 10 users via Zoom to uncover how I can meet their needs. Key pain points identified include:
User Painpoints
Based on user research, we identified 3 user pain points related to Language barrier, Data inaccuracy, and Prolong task across the tool
1. Language Barrier:
Unclear dictation of account details frustrates users, forcing repeated attempts to share correct info.
2. Data Inaccuracy:
Incorrect account details can send funds to the wrong person, risking financial loss.
3. Prolong Task:
These cause prolong transactions, causing delays and inefficiencies for all involved.
User Persona
To create ideal users in view, I create 2 user persona representing our target audience with this problem
Competitive Analysis
To develop a viable solution, I conducted a competitive audit to assess how our competitors address these issues. This analysis allowed me to evaluate their strengths and pain points, and identify opportunities for improvement and areas where I can enhance our own offering.
Task Flow
I created a task flow for both the receiver and the sender, this helps me understand users possible pain points and areas of improvement.
An alternative process making transaction swift even in places where noise is at its peak.
Wireframe
Paper Wireframe
Next, I sketched out paper wireframes for each screen of the app, keeping the user pain points in mind. The best and most suitable sketches are presented below.
Digital Wireframe
The paper wireframe concept was digitally translated, incorporating essential details to bring to life each design aspect meant for the Tranzfer app, taking into account comments we received from end users during the research process.
High Fidelity Prototype
Other Solutions with Mockups
Account Analytics
Understanding how users manage their money is crucial. Tranzfer App offers easy-to-read charts for tracking spending and an AI manager to analyze accounts and provide tips for better financial management.
Shortcut buttons
The app simplifies user experience by identifying frequently completed tasks and adding them to a shortcut tab, ensuring quick access based on individual preferences and usage patterns.
Enhanced Saving Automation
Inspired by *The Richest Man in Babylon*, this feature automates saving 10% of earnings with a clear purpose, fostering consistent habits and helping users achieve financial goals within their desired timeframe.
Ecom
This feature, inspired by Ecom Pay, transforms ecommerce payments by allowing users to scan or paste a merchant’s code, generate a receipt, and complete transactions seamlessly within the app.
Language Settings Mockup
Based on usability study insights, we improved the app by introducing a dedicated page for users to easily select and set their preferred language, enhancing accessibility and user experience.
Decluttered Mobile Homepage
User insights led to updates: transaction history on the homepage, clear “Send/Receive” buttons, and streamlined features for a clean design, improving usability and enhancing the user experience.
Design System
Accessibility Consideration
Screen Reader
Our app’s screen reader and voice command features provide spoken feedback, auditory cues, and voice-enabled actions, ensuring an inclusive, seamless experience for users with visual impairments.
Color Contrast
The Tranzfer app’s contrast check ensures optimal text and visual contrast ratios, enhancing accessibility and usability for all users, including those with visual impairments, for a seamless and inclusive experience.
Colour blindness
The Tranzfer app uses colorblind-friendly design, with carefully chosen color schemes and contrasts, ensuring clarity and accessibility for all users, enhancing usability and inclusivity.
Design Handoffs and conclusion
Handoffs
In the Tranzfer app’s development, design handoff ensures seamless translation of concepts into functional features. Clear communication between design and development teams maintains design integrity, reduces errors, and delivers a polished, user-centric experience.
Key deliverables include:
– 355 Screens in Light and Dark modes for a cohesive UI.
– 40+ Icons & 22 Illustrations to enhance visual appeal.
– New Design Systems for consistency and scalability.
– Color Codes for precise implementation.
– Branding Deliverables to ensure brand coherence.
Short meetings clarified issues, ensuring accurate execution and a seamless development process.
Going forward
Impact:
Test users praised the app’s clean, intuitive design, noting its clarity and simplicity, which enhanced engagement and usability. This positive feedback underscores the importance of a user-friendly interface in driving satisfaction.
What I Learned:
User research is crucial for understanding diverse perspectives, identifying problems, and tailoring solutions to various user contexts, ensuring a more effective and inclusive design process.
Next Steps:
– Conduct further usability tests on the website to refine and improve its functionality.
– Identify additional user needs and ideate on new features to enhance the overall experience.
