How can vendors and real estate agents complete their real estate photography orders quicker? How can the business save money by building their own payment processor rather than paying transaction fees to a third-party processor?
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 my assumptions regarding the cognitive load of the redirects, multiple modal and clicks were misguided. Most 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 as well 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.
