Transact Platform

Senior UI-UX Designer | 2019 | Yapstone Transact Platform

The mission was to create a global platform that enables digital marketplaces to transact efficiently and seamlessly while attracting new client segments and business models. By leveraging industry-leading features, robust security, and scalable capabilities, the platform aims to drive YapStone’s growth and establish it as a leader in digital payments.

Overview

My Role

Led UI/UX design initiatives, including user research, wireframing, and prototyping, to craft intuitive and seamless experiences. Developed and maintained a robust design system for consistency across platforms. Provided art direction and brand design to enhance visual identity and user engagement.

Results

Designed a user-friendly and visually compelling online platform with a strong brand identity, resulting in a more intuitive dispute and chargeback management process. This enhancement enabled users to efficiently create and submit rebuttal letters to payment processors, reducing processing time and improving resolution rates.

The Challenge

Internal Pain points

Inefficient Communication: Customer service and chargeback agents spend excessive time repeatedly educating merchants, leading to operational inefficiencies.
Limited Chargeback Visibility: Chargeback specialists lack a comprehensive, high-level view of chargebacks and their related cases, as Zendesk provides only granular details.
Cumbersome Process: The end-to-end chargeback management process is highly manual, requiring navigation across multiple platforms, making it time-consuming and error-prone.
Lack of Scalability: Without an improved chargeback process, agents must continuously guide merchants, reducing efficiency and limiting the overall output of chargeback specialists. Streamlining this process would enhance scalability and operational effectiveness.

Customer Pain points

Lack of Awareness: Many merchants are unfamiliar with chargebacks, how the process works, and why they are occurring.
Inefficient Communication: Communication from YapStone is often sporadic, fragmented, and delayed, leading to frustration. Even after multiple calls and emails, issues may remain unresolved, with discussions limited to one chargeback at a time.
Limited Transparency: Merchants require better visibility into the chargeback process and status to stay informed throughout the resolution.
Unclear Fund Tracking: Customers need clear insights into the location of their funds and an estimated timeline for potential reimbursement.

The Solution

Enhancing Self-Service in Dispute Center

Our goal was to create a seamless, self-service experience that empowers customers with the knowledge and tools they need to manage disputes effectively.

Educate & Inform: Provide clear explanations on what disputes are, how the process works, and the meaning of specific reason codes. Share best practices to help prevent future disputes.

Enable Action: Allow customers to take necessary actions on new disputes, including submitting documentation and responding directly within the system.

Enhance Visibility: Ensure customers can monitor dispute statuses in real-time and receive timely notifications for key updates, keeping them informed throughout the process.

Dispute Center Pilot

Our pilot program aimed to determine whether merchants can independently gather high-quality evidence and create compelling dispute briefs that increase their chances of winning chargeback cases.

Collaborative Research & Design: Partnered with the Risk team to conduct in-depth research and design a user-friendly dispute management solution.

Real-World Testing: Conducted live testing with merchants to validate usability and effectiveness.

System Compatibility: Currently operates independently of Transact APIs while integrating with the legacy system.

Upcoming Launch: Set to go live with real customers in July, marking a major step toward streamlining the chargeback resolution process.

Information Architecture

Structuring the Experience: Sitemap & Information Architecture

After identifying user needs and defining key use cases, we focused on building a clear and intuitive information architecture. We developed a high-level sitemap and detailed user flows, ensuring a seamless navigation experience. Collaborating closely with the client, we walked through the entire journey, strategized site content, and outlined the next steps to create a well-structured and user-friendly platform.

Optimizing the User Flow for Efficiency

Beyond ease of use, simplicity was key in designing the Dispute Center wizard. By analyzing the user funnel, we identified major pain points and optimized the flow to reduce unnecessary steps. This approach ensured a streamlined experience, minimizing friction while maximizing the completion rate for dispute submissions.

UI Design Process: Crafting a Seamless Experience

To ensure a competitive and user-friendly design, our team conducted an in-depth review of industry leaders like Stripe, Braintree, and PayPal. We analyzed their approaches to customer communication and dispute resolution, gaining insights to refine our own experience.

With Yapstone’s updated brand book and style guide as our foundation, we translated its visual identity into a cohesive digital experience. We began with iterative style scapes to define the design direction, allowing early client feedback on key UI elements like navigation, buttons, and layouts before presenting a full-scale design mockup. This approach ensured alignment between brand aesthetics and user experience.

High-Fidelity Prototyping: Bringing the Experience to Life

After securing alignment with both the client and internal teams, we transitioned from concept to execution by developing a comprehensive set of responsive wireframes. Leveraging personas, use cases, goals, and flow diagrams, we built a strong UX foundation tailored to the client’s audience.

The team created over 50 annotated wireframes, each detailing page-specific features, functionalities, and user interactions. These high-fidelity prototypes not only mapped out the site’s structure but also ensured a seamless user journey—empowering customers with the right information to make informed decisions effortlessly.

Site Style Guide

Defining a Design System

The final step in the design process was creating a comprehensive design system for a seamless handoff to develop. This system outlined grids, colors, fonts, buttons, icons, and UI elements, ensuring consistency across the platform. By providing clear guidelines, we enabled the development team to efficiently implement designs and accelerate the site’s launch.

Want the inside scoop?

Curious about the process and challenges behind this project?
I’d be happy to share more, feel free to connect!