Payments are a critical workflow in Aryeo. Users want to complete transactions quickly and confidently, without confusion or interruption. The existing flow:
- Redirected users to third-party payment pages
- Introduced visual and contextual disconnects
- Increased drop-off risk during a high-intent moment
At Aryeo’s scale, even small inefficiencies in the payment flow had outsized business impact.
The challenge was to redesign the payment experience to:
- Reduce friction and cognitive load
- Maintain trust and security
- Improve efficiency at scale
I worked as a product designer and UX researcher, partnering closely with product management and engineering.
I was responsible for:
- Analyzing the existing payment flow and drop-off points
- Leading UX research to understand user expectations and pain points
- Designing a simplified, embedded payment experience
- Collaborating with engineering to balance UX improvements with technical constraints
.svg)
Rather than adding features, the strategy was to remove unnecessary steps.
The design focused on:
- Embedding the payment flow within Aryeo
- Maintaining visual continuity to reinforce trust
- Clear hierarchy and feedback during the transaction process
- Error prevention and recovery without disrupting momentum
The goal was to help users complete payments quickly and confidently.
Before working on any designs, I needed to get a better understanding of what our users need from this payment processor. First, I went through Canny posts to get insight into some of the needs that our users were voicing regarding using key words like "payments," "order placement," and "order form." To strengthen my secondary research efforts and get qualitative insights I conducted generative user interviews. I started out preparing a user interview guide that would help me in conducting interviews with users who have placed the highest amount of orders.
After completing 10 user interviews, I analyzed these interviews in Dovetail. With this analysis, I realized that some of my assumptions regarding the cognitive load of the redirects, multiple modal and clicks were misguided. Some users didn't find these cumbersome and, in fact, many of them were wary of using our payment processor and didn't feel like they could trust our processor when compared with more established processors like Stripe or Square. Further, I realized that many of the benefits of Aryeo payments would actually come from adjacent technical ramifications of this processor, such as being able to process refunds internally, having the option to store and validate credit cards, being able to automatically calculate sales tax, and being able to provide invoices.
As more stakeholders started contributing to this project, offering multiple new viewpoints to the table, I had to iterate several times during the course of the project. Many of these iterations consisted of small visual changes, such as defining an alternate layout and better presentation of the key functions of the page.
Multiple types of flows were wireframed to show key workflows such as paying with a promo code, adding a tip to the order, or doing a partial payment. Some of these options are shown on the right.
An obstacle that I encountered in this part of the process was trying to balance stakeholder input with the best experience for users. As such, I had to cycle between wireframing and high-fidelity mockups/prototypes as stakeholder priorities were changing. This project followed a very iterative design process.
After wireframing helped me to define a layout and the best way to format and present information, I moved on to create high fidelity desktop and mobile mockups for the following user flows:
- Flow 1: full payment, saved cards, add tip, add discount, option to pay with Apple Pay, apply credit
- Flow 2: partial payment, no credit, no saved cards
- Flow 3: no payment
-Flows 4 & 5: order edit page slideover for the vendor UX and the customer UX
I was able to craft these higher fidelity designs by taking advantage of the design system already established by the business. Due to this, all the components necessary for this solution were already available.
