Bridging the gap between business, product, and engineering
ppro.com
.png)
The case
PPRO's UX/UI Challenge: From Fragmentation to Unity
PPRO offers a comprehensive suite of payment solutions accessible globally through a single gateway. However, rapid organizational growth over the years led to increasingly complex internal operations and a proliferation of inconsistent, and heterodox interfaces. This fragmented experience, misaligned with a unified brand identity, negatively impacted the efficiency, usability, and perceived quality of their internal and external platform interfaces. Below, the screenshots showcase a portion of the PPRO suite, illustrating its heterodox and highly inconsistent UX/UI paradigm.
My role in product design
1 - Led the modernization and unification of PPRO's digital interfaces suite and paper-based processes as part of a high-impact, five-member team:
- Cristian Hernandez (Senior Software Engineer)
- Joharvi Garcia (Senior Product Designer)
- Saul Hernandez (Software Architect)
- Stuart Wilson (Senior Product Manager)
- Oleksandra Solodska (Senior Frontend Developer).
2- Establish a new framework for measuring the success and performance of internal and external products based on user interface interactions to take data-driven decisions at strategic plannings and crucial moments.
This case study is intentionally limited due to NDA. For further details on my specific contributions and achievements at PPRO, contact me
Initial Research
To thoroughly understand how much heterodox and unconsistent was the frontend quality and backend informational arquitecture on my initial research, I ran several workshops with engineering, product management, and business teams. The goal was to gather diverse perspectives and identify the common areas where user pain points and business opportunities intersect.
The challenges
- → Slow development cycles.
-
- → Inconsistent user experiences.
-
- → Lack of data-driven decision-making.
The solution
To address these issues, I translated my initial research insights into a series of designs, prototypes, and internal tests for numerous components, pages, and layouts, iterating from low to high fidelity. This iterative process aligned business needs, customer requirements, and team capabilities into a unified and feasible solution.
The image below shows an example of design-to-development process: the left side displays the vector blueprint of the table component wireframe in Figma, while the right side shows its implementation running locally on port 3000, built with React.js, Typescript, Tailwind, and ShadcnUI.
The final table and data table, as well as more than 100 components, were defined and incorporated into the global design system catalog and inventory, distributed through the global component library, and subsequently adopted and used across the global platform services (Dashboard and Back office).
Below is an example of the new components implemented consistently across multiple interfaces and new products within the Dashboard and Back Office.
Objetive key results:
- Consolidate all legacy systems onto the new unified platform, encompassing the Dashboard, Back Office, and Dev Hub services across all four environments (Dev, QA, Live, Sandbox).
-
- Establish a comprehensive design system and research and design operation, integrating design tokens, a coded component library, GUI design and development documentation, and Datadog integrations.
Relevant projects and
lateral productions
PPRO Global Design System:
- Led the development and documentation of the React component library, Storybook, and Figma components.
-
- Researched and documented GUI libraries (Material UI, MUI X, etc.) to guide optimal component, and graphic interfaces implementation.
PPRO Dashboard & Back Office interface suite:
- Redesigned the PPRO platform UX/UI based in AWS cloud to increase customer satisfaction, product accesibility, and perceived quality.
-
- Implemented Hotjar surveys to gather valuable user feedback and identify areas for improvement.
Developer Hub & Readme:
- Developed and maintained comprehensive documentation to ensure consistent and accessible information for customer developers and technical staff.
Datadog JS SDK Implementation:
- Led the implementation and utilization of Datadog RUM to gather user behavior data (MAU, DAU, WAU, frustration signals, task completion times, etc.). This data was leveraged to inform strategic planning, feature prioritization, and product analysis, driving data-driven decisions and uncovering new opportunities.
Business Impact
Enhanced Customer Satisfaction:
- 1,000 monthly active B2B users on the Global Platform within the first month after launch.
-
- Customer satisfaction among legacy users improved by 66.7% (from 2.7 to 4.5) following the redesign of the dashboard and back office.
-
- Rapid and easy management for merchants and PSP customers to globally search all their payment transactions (over 500K daily on average), the management of over 2,000 partners, and enablement to PPRO's 150+ payment methods in the PPRO Dashboard. This lowered the time to complete core and recurrent tasks by 150%.
Accelerated Development:
- The design system facilitated a 2x increase in development speed, achieved through the streamlining of design and implementation definitions and the mitigation of risks and graphic unconsistencies associated with corner cases.
Data-Driven Decision Making:
- Datadog's implementation enabled data-driven decision-making by providing valuable insights into user behavior and preferences. The time to identify frustration signals, issues, and bugs and root causes on PPRO platform was significantly reduced, from over 24 hours to approximately 5 minutes.
-
- Delivered detailed dashboards tracking user satisfaction and UX/UI performance to 100% of stakeholders and shareholders, providing previously unavailable insights into this critical aspect of the business.
Improved Collaboration:
- The PPRO design system fostered strong collaboration and communication across eight multidisciplinary teams in the Americas and EMEA, resulting in faster product definition, development, and iteration, reduced risk of failure for new features and product launches through upfront consistent design research and feasibility definitions.
Reflections
- This project reinforced the importance of integrating a user-centered design approach within multidisciplinary team collaboration, and the power of data-driven decision-making in achieving successful product outcomes.
- Designing, building, and implementing the design system provided valuable insights into the challenges and rewards of creating a scalable and maintainable graphic interface system from scratch, serving both external customers and internal operational teams.
- Working with major clients like Stripe, Worldpay, Adobe, and Norton required continuous learning and adaptation across software engineering, product design, and management. This experience highlighted the importance of staying current with industry trends and incorporating user feedback through interviews and non-intrusive observation methods. Effectively improving and scaling the product experience demanded a holistic approach, considering the company's business context, the technical challenges faced by the teams, and the ongoing human factors influencing the product.
