A preview of the elements of the design system

🎯 Goal

Design an efficient payout management tool by reducing manual, error-prone work.

‼️ Problem / opportunity

Since PayMongo’s launch in 2019, many account-related tasks are handled manually from processing KYC, refunds, disputes, and payouts through (expensive) third-party tools such as Airtable.

These tools allowed PayMongo to focus on developing the priority features,processing payments for businesses without having to develop operations management tools.

However, with a growing merchant base, steady volume transaction growth, increased stakeholders, and evolving internal processes, PayMongo eventually had to invest and develop its own tool to serve flexibility beyond what third-party tools can offer.

🀹 My roles in this project

  • UX researcher: Research, writing jobs-to-be-done, shadowing and interviewing stakeholders, documenting insights and analysis.
  • Product designer: Understanding business goals, strategizing for MVP and future design iterations, creating UX / journey maps, collaborating with stakeholders to design a tailor-fit solution/s.
  • UI designer: Creating wireframes, mock-ups and prototypes as needed. Working closely with engineers for design implementation.

πŸ“‘ Project summary

πŸ“Œ Due to NDA, shared information are limited.

πŸ”¬ Discovery / Research

I interviewed and shadowed stakeholders from compliance, fraud and risk, finance, sales, and customer support. My goal was to understand their current workflow and pain points when processing payouts.

Through this, I understood that our current tool was dragging the performance and reputation of the company.

Session after session, I wrote jobs-to-be-done with the stakeholders, containing their clear responsibilities, tasks and goals that will ensure smooth processing and timely payouts.

Jobs to be done written for every stakeholder

Jobs-to-be-done cards for every stakeholder/user

One of the shocking discoveries that I found out while talking to stakeholders from Finance team is that our CTO or one of the senior engineers, has to pull all-nighters to manually disburse payouts one-by-one.

πŸ”Ž Key findings
  • Identified key strengths of third-party tools that can be adapted to the new tool
  • Every stakeholder can be a blocker for another stakeholder, which can delay the processing of payouts.
  • Manual work, checking and assessments are prone to human error, causing confusion, unnecessary delays to the team ultimately and for the customers to get their money.
  • Identifying fraud transactions can block the payout if not handled properly and can cost damage to PayMongo and the businesses of the customers.
  • The payout process linear, more like a conveyor belt, that every step is crucial or it will cause more problems.
😡 Pain points to solve
  • Users from all departments has to manually check, double-check information, sometimes even had to verify through comms if the information is correct and/or updated.
  • Tool started to load very slowly as volume of transactions and data increases day-by-day.
  • Users had to manually create filters/views to hide unnecessary information that is added and needed by other departments.
  • Users had to notify and/or follow-up other departments even when a task is already done (lack of proper notification or separation of statuses).

πŸ’‘ Strategy & Ideation

After synthesizing the gathered information, I started ideating, collaborating with the stakeholders, our CTO and engineers on how we should design and develop the tool. I led the ideation of the solutions involving the stakeholders, our product manager, CTO and engineers. I worked on low-fidelity wireframes as we discuss ideas on how we should design and build it.

πŸ‘€ Expectations
  • The design should be able scalable to accommodate new features, new roles/stakeholders, new workflows and more automations.
  • The UX should be a streamlined workflow that is familiar to stakeholders so adaption will be immediate and learning curve is low.
  • Ensure that every jobs-to-be-done are satisfied and achievable.

πŸš€ Execution

After continuous collaboration and pitching ideas with the stakeholders, I started working on the high-fidelity mock-ups including prototypes using Figma.

See project gallery for the visual output of this project.

πŸ§‘β€πŸ’» Approach
  • Use & extend our design system for scalability and consistency as the project continuous to progress
  • Make sure to create and present prototypes to software engineers who will implement the code, ensuring accuracy of UX and related, expected behaviours
  • Test the implemented version of the tool to ensure accuracy of expected visual UI and interaction/UI behaviours. In cases of inaccuracies, notify the software engineers or raise it as tech debt.
πŸ”‘ Key solutions
  • Tabbed and automated statuses: This is one of the most crucial design decisions and feature that needs to be implemented as it will help users identify their tasks without being overwhelmed. It should also reduce human errors as meeting certain conditions will automatically update the status of the payouts. Every tab will be a clear separation of responsibility for users.
    Tabs for every user

    Tabs with item counter. Assigned to different departments.

  • Blazing-fast search: This is essential for account managers to communicate the status of the payout to customers as quick and as accurate as possible.
  • Batch processing:Updating, adding notes, and processing payouts in one go that users can't do when using the third-party tool.

🧠 Learnings and takeaways

It was definitely a challenging project as the goal serves to streamline work for multiple departments with different requirements.

  • The lack of tool, regardless of documentation will create unnecessary tension and chaos between collaborating teams as people becomes bottlenecks.
  • Tool adaption is more important than developing/having a tool.
  • Developing tools can cost a lot without proper planning.

πŸ“ˆ Business outcomes

After investing solid 3-4 months in developing the foundation of Project Greenhouse. Our efforts started to pay off. And it opened new doors of opportunities not only for the sales team, but for the entire organization.

  • Launching Greenhouse boosted customer satisfaction because of the timely payouts while saving thousands of hours (reduced up to 60% of time spent processing payouts), energy and millions of pesos. It streamlined processing tasks and issues on a daily basis while reducing painful, error-prone, manual, repetitive work in different departments primarily Finance, Sales, Customer Support, Fraud and Risk, Compliance.
  • It reduced the manual, repetitive work in the respective departments of Finance, Sales/Customer Support, Fraud and Risk, Compliance and operations in general
  • Plus! Our CTO and/or some of the senior engineers don’t have to pull weekly all-nighters anymore!

πŸ’Ό Got full-time or consultant remote opportunities? Let's talk! I'm on LinkedIn.

← 🏑 Back to homepage