Case study ↓
Enhancing Payment as a service API monitoring experience
Webapp / Design system
Reap is a technology company provides financial kit to solve real-life problems.
The API dashboard is for payment-as-a-service clients, providing them a tool for monitoring their transactions and managing funds
Roles
Lead UX/UI design
Product research
Tools
Figma
Tools
Figma
Define ↓
The big idea
Our "Payment-as-a-Service" API dashboard empowers clients with comprehensive monitoring and autonomous fund management, providing seamless and efficient control over all payment processes.
User background & user stoires
What we need to know about existing dashboard?
// Very passive approach. Need our sales to send them domain to create account
// Target user: an operations person that’s with non-technical BG. Potential: Tech will sign-in for sand box & API key
// Potentially payments details can be a sharable link, so users can share that to their recipients too
Understanding what MVP version missing
// There are a MVP version drafted quickly together with product owners, which is missing a lot if things.
Research ↓
Next step : competitor resereach
Competitor research is crucial for understanding the market, benchmarking, identifying gaps, gaining customer insights, differentiating your service, and ensuring compliance. In this case, my main research divided to 2 groups :
Support fiat payouts
Support crypto payouts
What are the key takeaways through the competitor research?
Comprehensive Overview
Dashboard summary
Real-time data
Transaction Management
Transaction list
Transaction details
Recipient Management
Customer profiles
Customer segmentation
Report and Analytics
Financial reports
Custom reports
Integration Capabilities
API access
Third-party Integrations
Empathize ↓
Personas
Creating a persona helps to humanize and better understand your target audience, ensuring that products, services, or content are tailored to meet their specific needs and preferences.
View storyboarding
Prototype ↓
From low-fi , mid-fi to Ideation
So after consider the user's needs and the available resources we have for this project, I decided to mainly focus on landing page of the dashboard.
Ideation
Test ↓
User testings for Hi-fi design
Hi-fi designs are detailed, realistic prototypes that closely resemble the final product in terms of aesthetics, functionality, and interaction. Testing these designs with real users provides valuable insights that can significantly impact the success of the final product.
Scale
Qualitative research
Individual interview of 4
Test includes (20m)
5 seconds test
Prototype navigation task (Interviewees choose a personas from previous slide )
View prototype
Output ↓
Finalise UIs … 🚀
After the user testings, I came to a conclosion that we can adjust serval things to make the whole UI more fit for the user role use.
Focus on landing page
🌟 Impacts of the experience
65%
Admin account repayment time saved
100%
Users happy with prototype experience
13+
Clients signed up this feature after 1st month
Although the full experience has yet to be fully implemented, the prototype version has received high satisfaction ratings from existing users. Most admin roles have expressed their approval of the clear and intuitive UI/UX. According to the majority of interviewees, the new interface has significantly streamlined their workflows, saving considerable time on bookkeeping tasks.
⚡️ Learnings from this project
User-Centric Design
Understanding user personas (e.g., Camilo and Chris) helps in tailoring the design to meet diverse needs, such as handling different currencies and transaction types.
Competitor Analysis
Conducting competitor research provided insights into industry standards and gaps, helping to refine the product’s features.
Feedback Integration
User interviews highlighted the need for clearer transaction summaries, simplified navigation, and enhanced security features, leading to design improvements.
Iterative Process
The transition from sketches to high-fidelity designs, incorporating user feedback, underscores the importance of an iterative design approach.
See other case studies ↓
