Problem Statement
Ongoing Project
Smart Wallet Payments: Cutting Upfront Costs in Warhorse Application
Our client’s warehouse management app has been in development for two years and handles all operations. Due to recent policy changes by shipping aggregators like ShipEngine, FedEx, and YCC, clients must now pay shipping costs upfront for all orders. This disrupts cash flow and requires manual workarounds, as payments typically occur at invoicing. To address this, the initial phase will focus on enterprise customers, who face the greatest impact due to large order volumes. A smart, integrated payment solution is needed to streamline this process and improve efficiency.
Finder
File
Edit
View
Go
Window
Help
Mon Jun 22
9:41 AM
ABOUT
THE PROJECT
The Warhorse Management Application is a comprehensive solution used by AWI to manage their entire warhorse logistics and operations. It streamlines order processing, transportation, and resource management, ensuring smooth workflows for both B2B and B2C customers.
Key Features:
Order & Shipment Management – Efficient tracking and management of warhorse transportation.
Inventory & Resource Management – Maintain detailed records of horses, equipment, and related assets.
Role-Based Access – Supports multiple user roles, including admins, trainers, and logistics teams.
Operational Insights – Provides real-time data and analytics for better decision-making.
This enterprise-ready application enhances efficiency, organization, and user experience, making it a crucial tool for AWI’s business operations.
Goals
Design a seamless payment solution to simplify upfront shipping costs, reduce manual work, and improve the user experience in the warehouse management system. Due to the MVP nature of the project, the solution must be cost-effective and easy to develop using the built-in features and components.
My Role as
SENIOR
UI/UX DESIGNER
My responsibilities
User Research: Conducting user research on Zoom with focus groups to understand user needs, behaviors, and pain points.
Persona Development: Creating user personas based on research to guide design decisions and ensure user-centric solutions.
User Flows and Information Architecture: Defining user flows and the information architecture to ensure intuitive navigation and interaction across the system.
Wireframing and Prototyping: Designing wireframes, low-fidelity and high-fidelity prototypes to visualize design concepts and user flows.
Interaction Design: Using existing components to ensure a seamless and intuitive user experience, while reducing development effort.
Collaboration: Working closely with developers, product managers, and other stakeholders to ensure design feasibility and alignment with business goals.
Agile & User-Centered Design
Ideate, Rapid Prototyping, Research, Mockups, Usability Testing , Iterate, Hand Over & Dev Support
This project follows an Agile UX approach, ensuring rapid iterations and continuous improvements. Given the short timeline, I leveraged Lean UX principles, focusing on hypothesis-driven design and quick wireframing to explore potential solutions. This allowed us to validate ideas efficiently and develop a system that effectively addresses the end-user's challenge of manual payment processing—all within two weeks.
Week 1
Week 1
Week 2
Week 2
Week 3
Ideation & Research
Rapid Prototyping (Wireframe)
Research
Visual Designing with Interactions
Usability Testing
Hand Over & Dev Support
Iterate
Usability, Communication
Usability Testing
User flow, IA
Communication
Wireframing, Mockup & Prototyping
Ideation Phase
During the ideation phase, I explored multiple solutions and narrowed it down to two key approaches: Pay Later and Wallet System
Rapid Prototyping & Research
Rapid prototyping enables fast testing and iteration of the Wallet system and Pay Later (BNPL) solution, ensuring seamless user interactions, payment flows, and transaction management before full development.
We conducted internal brainstorming and user research sessions with key stakeholders and sponsored users to validate our approach.
During internal Brainstorming, we dropped Pay Later due to third-party credit service dependencies affecting the timeline and chose Wallet for seamless integration with the existing payment system.
Fingent Design Team
Images are for representation purposes only
Full Control Over Cash Flow
Users can preload funds, track real-time transactions, and manage spending efficiently. This eliminates delays and uncertainty in payments, ensuring smoother operations.
Effortless Integration & Smart Automation
The wallet system integrates seamlessly, while auto-fill options speed up payments, reduce errors, and eliminate manual data entry for a smoother experience.
User Insights
Call Summary - Key Points: Usability Insights
Onboarding should be seamless and user-friendly.
Since the wallet system is new to all users, activation should be straightforward and intuitive.
Onboarding should be simple to ensure users can quickly get up to speed with the wallet features.
Role Based Permission Required for most B2B clients
With multiple roles like Admin, Order Manager, and Finance Manager, the admin can control wallet management permissions, while other users can only view and use it.
Option to Auto-Fill Wallet below Threshold limit
Option to auto-fill the wallet when it falls below the threshold limit.
Option to export wallet report
Option to export wallet transaction reports for easy tracking and analysis.
Feed backing system
A feedback system should warn users when their wallet balance is about to fall below the threshold limit.
Wallet preview should be visible for all time
The wallet preview should be visible at all times for easy access and monitoring.
User Personas & User flow - Figjam AI
Prioritization
Feature Prioritization (MoSCoW Method) — Structured Delivery Within 2 Weeks
I used the MoSCoW method, collaborating with developers, project managers, stakeholders, and testers to identify and prioritize features, ensuring a focused 2-week delivery.
Must-Have
Secure wallet transactions for seamless payments
Real-time balance tracking for financial visibility
Role-based access control for user permissions
Role-based access control for user permissions
Should-Have
Multi-payment support for diverse payment methods
Auto-fill feature to speed up transactions
Spending Analytics Dashboard
Two-Factor Authentication
Could-Have
Multi-payment support for diverse payment methods
Reward Points or Cashback
Multi-Currency Support
Temporary Wallet Freeze
Dark Mode
User Stories
User Stories: Structuring Wallet Enhancements with Agile Prioritization
To streamline the wallet experience, I defined user stories based on Agile best practices and the MoSCoW method. This approach helped prioritize key functionalities while ensuring flexibility for future iterations.
As a user, I want the wallet onboarding process to be seamless and user-friendly so that I can quickly activate and start using the wallet without confusion
The wallet activation process should be straightforward and intuitive.
Users should receive clear guidance during onboarding.
The system should provide tooltips or walkthroughs for first-time users.
As a user, I want the option to automatically refill my wallet when the balance falls below a specified threshold limit, so that I can ensure uninterrupted service and avoid manual top-ups.
My wallet balance is below the threshold limit I've set.
The system detects this low balance.
The system automatically initiates a refill transaction using my preferred payment method.
I am notified of the successful auto-refill.
My wallet balance is updated to reflect the refilled amount.
Updating Wallet Details: Ensuring Seamless Account Management
As a user, I want to update my wallet details, including payment methods and account settings, so that I can manage my transactions seamlessly and ensure a smooth payment experience.
Access Wallet Settings – Users can navigate to the wallet section to update details.
Update wallet balance > Make change or add more if want
Visual Design With Interactions
The mockup is based on existing Components and their Interactions, ensuring consistency and cost-effectiveness for the development team.
View Prototype
Refining the Experience: Usability Testing & Validation
In the initial stage, we targeted B2B users, ensuring the wallet system meets business needs. We conducted usability testing using Maze prototype testing, sharing it with our internal Slack group, which includes a diverse range of users and stakeholders. This helped us iterate the mockups for better usability and refine the experience.
Heuristic Analysis & Iterative Improvements
I conducted a Heuristic Analysis right after finalizing the mockups, ensuring usability issues were addressed before handing them over to the dev team. This internal review, done with my project team, helped refine the design for a smoother user experience.
Accessibility
Ensuring Accessibility with WCAG 2.2 Compliance
We used the Stack plugin to automate accessibility testing, ensuring our designs meet WCAG 2.2 guidelines for a more inclusive user experience.
Maze - Prototype testing
Validating Usability with Maze Testing
We conducted Maze prototype testing to gather user feedback, ensuring the Wallet feature is intuitive and efficient. Insights from a diverse group, including stakeholders, helped us refine the design for better usability.
Visibility of System Status
The system should always keep users informed about what is happening, providing timely feedback
Consistency and Standards
Used existing components and micro animations for a consistent, seamless UI flow.
User Control and Freedom
Users should have the ability to undo or redo actions, exit unwanted states, and easily recover from errors
Error Prevention
The system should prevent errors by guiding users with clear instructions and confirmations before performing critical actions
Thank you for watching the case study ❤️
If you have any further questions or would like to learn more about our design process, feel free to reach out to the design team.
Impact
Impact After Release after 6 Month
Six months post-release, we analyzed B2B customer engagement and found that the Getting Started section and a quick explainer video significantly streamlined adoption, helping users seamlessly integrate the feature into their workflow.
55%
B2B activation and counting, we are driving strong wallet adoption.
4.3
User rating post-launch, with growing feedback.
~60%
Reduction in upfront shipping costs within 6 months.
What’s Next
Post-launch, we tracked adoption, measured performance, gathered feedback for improvements, optimized scalability, and evaluated business impact. We are also planning to enhance payments across the system to automate invoicing, which is currently done manually outside the system, along with implementing ‘should-have’ and ‘could-have’ features.
