18 / Merchant tools
PayPal.
The problem
Businesses that took payments through PayPal had very little to work with once the money started moving. A merchant needed one place to see transactions, a way to key in a card number for an order taken over the phone, and a sign-up process that did not lose them before the first sale. Those were three separate jobs, and each one was a different kind of user in a different kind of hurry.
The work also had a second front. Large customers such as eBay, Skype and Yahoo wanted PayPal to work inside their own products, on their own terms. Every request came with its own use case and its own brand, and money was involved at every step. A confusing screen cost real payments, and a convincing fake of one could cost a customer their account.
Success meant a merchant could open PayPal Manager and know what needed doing today, and a Yahoo Mail user could trust a payment request without leaving their inbox.
The approach
I worked from the whole workflow outward. I drew how people and handoffs fit together first, then wireframed the merchant tools, then went to the customers' offices to fit PayPal into their products.
- 01
Mapping the handoffs
Before drawing screens I sketched how a piece of work moved between people on a grid page. Who asked for budget, who approved it, who made the copy and visuals, who launched. Most of the steps ran through email and spreadsheets. That map showed me where a tool had to carry a handoff that people were carrying by hand.
Process map of handoffs between roles. - 02
Wireframing the business summary
The first PayPal Manager wireframe put everything a merchant might need on one page: find transactions, create, recent transactions, a message center and a business summary with expandable sections. It was complete, and it was too much. Drawing it that way let the team see exactly what we would have to cut.
First wireframe: the business summary. - 03
Cutting it down to a home screen
I reduced the summary to a welcome page with collapsed sections, then to a home screen built around two lists. Your Action Items tells the merchant what needs attention, and Recent Transactions shows what just happened. Common Tools sits underneath, so the Virtual Terminal is one click from home. I dropped the rest to secondary tabs.
The final PayPal Manager home screen. - 04
Designing the Virtual Terminal
The Virtual Terminal replaced a card machine, so I designed it as a short run of screens. Open the tool from the account home, enter the order, review it, then see a clear result with the next steps. Each screen had one main button. I kept the form close to the order a merchant was reading from paper.
Virtual Terminal, from account home to confirmation. - 05
Working onsite with Yahoo
For several months I worked at customer sites. In Yahoo Mail, a payment request had to feel like part of the inbox and still be trustworthy. I added a message bar that states the sender has been verified by PayPal, and a Pay Now button that completes the payment from the mail view.
A verified payment request in Yahoo Mail. - 06
PayPal inside Yahoo search
In Yahoo search, merchants and shoppers met PayPal in two places. A PayPal Merchants option appeared in the search menu, and a small shopping cart icon sat beside sponsored results from advertisers who accepted PayPal. I kept the icon small so it read as a signal and did not compete with the ad copy.
A cart icon marks PayPal on sponsored results.
The solution
The finished set covered three merchant tools and a run of integrations. PayPal Manager gave a business a home screen with action items, recent transactions and sales totals. The Virtual Terminal let a merchant take a card order on any computer. Sign-up and onboarding flows got new merchants set up. Inside customer products, people could send and request money without leaving the page they were on.
The idea that held it together was putting the next action where the merchant already was. Action items replaced a hunt through tabs, the terminal was one click from home, and a payment request lived in the inbox. Spoof and phishing protection followed the same rule. A verified sender message showed up in the place a person would look to decide whether to trust the email.
What I delivered
- PayPal Manager wireframes and home screen
- Virtual Terminal screen flow
- Merchant sign-up and onboarding flows
- Send and request money screens inside Yahoo Mail
- PayPal entry points in Yahoo search
- Spoof and phishing protection patterns for customer integrations
Value added
For people using it
Merchants could see what needed attention the moment they signed in, and take a phone order without a card machine. People in Yahoo Mail could pay or request money in the same window, with a visible sign that the sender was verified.
For the business
PayPal reached customers in places they already worked. Large partners got integrations shaped around their own use cases, and merchants got tools that made the account useful beyond receiving payments.
For the team
Working onsite shortened the distance between the Merchant Service team and each partner's designers and engineers. Questions got answered at a desk instead of over a long email thread, and the wireframes gave everyone a shared starting point.
The result
Covered three merchant tools and custom integrations for eBay, Skype and several Yahoo properties. PayPal Manager, the Virtual Terminal and merchant onboarding gave businesses a way to manage their payments. The integrations put sending and receiving money inside third-party products.
What I took from it
Drawing the overloaded first wireframe on purpose made the cuts easy to argue for, because the team could see what we were leaving out. I would do that again. I would also go onsite sooner, since the best decisions on the Yahoo work came from sitting next to the people who owned the product.
Background
PayPal's help pages describe PayPal Manager as a web tool for managing merchant payments. It has tabs for account administration, transaction search, a Virtual Terminal and reports. PayPal's newsroom describes the Virtual Terminal as an online form where a merchant types in card details for orders taken by phone, fax or mail.