PayPal Payment Buttons
Enable merchants to quickly accept payments.
PayPal Payment Buttons
Enable merchants to quickly accept payments.
PayPal Payment Buttons
Enable merchants to quickly accept payments.
PayPal Payment Buttons
Enable merchants to quickly accept payments.
PayPal Payment Buttons
PayPal Payment Buttons
PayPal Payment Buttons
PayPal Payment Buttons allow small to medium sized merchants to accept payments through PayPal on their websites. I was initially a consultant on the redesign of this merchant tool, providing business guidance and influencing design direction. A couple of months later, I was asked to be the lead designer.
In 2015, PayPal was processing almost $900 million a year through PayPal Payment Buttons, a tool primarily used by small to medium sized merchants. About 50-60% of Merchant Services (off-eBay) Revenue was from buttons. The goal of this redesign was to simplify this complicated tool, increase discoverability, increase usability and button creation, and drive up revenue for both merchants and for PayPal.
PayPal | Lead Designer | 2015
Website 
PayPal Payment Buttons allow small to medium sized merchants to accept payments through PayPal on their websites. I was initially a consultant on the redesign of this merchant tool, providing business guidance and influencing design direction. A couple of months later, I was asked to be the lead designer.
PayPal | Lead Designer
Website
Here's the flow...
1
awesome team
1
awesome team
20+
concepts
20+
concepts
20+
concepts
4
interactive prototypes
4+
interactive prototypes
4+
interactive prototypes
4+
interactive prototypes
4+
interactive prototypes
200+
cups of tea
200+
cups of tea
3
rounds of user testing
3
rounds of user testing
36
merchants tested
36
merchants tested
In past user testing only 50% of merchants successfully created a payment button. 70% had major issues configuring the right button for their business.
I gathered substantial research on creating products and services to sell online, created an online products inspiration board and deck (my kind of mood board). I listened to 30+ hours of past user research and gathered data from customer center calls when I first started.
Collaborated with my cross-functional team of a product manager, a visual designer, a content manager, a director of research, and 8 engineers in design discussions, jam sessions, etc. Created 20+ end-to-end concepts.
In past user testing only 50% of merchants successfully created a payment button. 70% had major issues configuring the right button for their business.
I gathered substantial research on creating products and services to sell online, created an online products inspiration board and deck (my kind of mood board). I listened to 30+ hours of past user research and gathered data from customer center calls when I first started.
Collaborated with my cross-functional team of a product manager, a visual designer, a content manager, a director of research, and 8 engineers in design discussions, jam sessions, etc. Created 20+ end-to-end concepts.
Built 3 “Knocked it out of the park!” end-to-end interactive prototypes with Marvel or Proto.io prototyping tools for user testing plus a dozen concept interactive prototypes with Omnigraffle.
Partnered with engineers to create working prototypes for user testing as well as day-to-day collaboration on developing our MVP for launch. We had 3 rounds of user testing.
My hypothesis was that there would be a 50-60% increase in button creation success (50% success rate from past user testing vs. 80% completion rate from new studies).
Previous designs
Understanding user experience issues on Classic.
Previous designs
Understanding user experience issues on Classic.
In past user testing (2012-2014), 70% of users had moderate to serious difficulties creating a Buy Now button with 2 simple options (like color and size), they failed to correctly configure the button. 40% encountered at least one error message. The success rate of creating a button was 50%. The take away from the studies was that a complete best-practices redesign was recommended.
In past user testing (2012-2014), 70% of users had moderate to serious difficulties creating a Buy Now button with 2 simple options (like color and size), they failed to correctly configure the button. 40% encountered at least one error message. The success rate of creating a button was 50%. The take away from the studies was that a complete best-practices redesign was recommended.
In Step 1, users did not know which button was right for their business. Most had trouble customizing the button and didn’t know what a drop-down menu was for. Rather than providing the option names, they entered the actual options (like “red, green, etc” vs. “color”) or forgot to enter one at all. They didn’t notice the “customer’s view” section or see it change as they customized the button. Some users skipped step 2 and 3 completely.
In Step 2, inventory tracking was confusing to users, it also didn’t report inventory accurately (like 12 t-shirts vs. more specifically - 10 red, 2 green t-shirts) and it was an under-utilized feature. Users didn't know which fields were optional vs. required, causing errors and confusion.
In Step 3, some users thought this is where they configure those drop-downs. They wondered if they would be able to make changes later within the advanced options.
In Step 1, users did not know which button was right for their business. Most had trouble customizing the button and didn’t know what a drop-down menu was for. Rather than providing the option names, they entered the actual options (like “red, green, etc” vs. “color”) or forgot to enter one at all. They didn’t notice the “customer’s view” section or see it change as they customized the button. Some users skipped step 2 and 3 completely.
In Step 2, inventory tracking was confusing to users, it also didn’t report inventory accurately (like 12 t-shirts vs. more specifically - 10 red, 2 green t-shirts) and it was an under-utilized feature. Users didn't know which fields were optional vs. required, causing errors and confusion.
In Step 3, some users thought this is where they configure those drop-downs. They wondered if they would be able to make changes later within the advanced options.
In Step 1, users did not know which button was right for their business. Most had trouble customizing the button and didn’t know what a drop-down menu was for. Rather than providing the option names, they entered the actual options (like “red, green, etc” vs. “color”) or forgot to enter one at all. They didn’t notice the “customer’s view” section or see it change as they customized the button. Some users skipped step 2 and 3 completely.
In Step 2, inventory tracking was confusing to users, it also didn’t report inventory accurately (like 12 t-shirts vs. more specifically - 10 red, 2 green t-shirts) and it was an under-utilized feature. Users didn't know which fields were optional vs. required, causing errors and confusion.
In Step 3, some users thought this is where they configure those drop-downs. They wondered if they would be able to make changes later within the advanced options.
In Step 1, users did not know which button was right for their business. Most had trouble customizing the button and didn’t know what a drop-down menu was for. Rather than providing the option names, they entered the actual options (like “red, green, etc” vs. “color”) or forgot to enter one at all. They didn’t notice the “customer’s view” section or see it change as they customized the button. Some users skipped step 2 and 3 completely.
In Step 2, inventory tracking was confusing to users, it also didn’t report inventory accurately (like 12 t-shirts vs. more specifically - 10 red, 2 green t-shirts) and it was an under-utilized feature. Users didn't know which fields were optional vs. required, causing errors and confusion.
In Step 3, some users thought this is where they configure those drop-downs. They wondered if they would be able to make changes later within the advanced options.
Competitive analysis
Understanding how
shopping carts work.
Competitive analysis
Understanding how
shopping carts work.
Competitive analysis
Understanding how
shopping carts work.
I researched many shopping cart tools and shared with my team. I wanted to compare and also make sure ours will be unique. These were just 3 examples, everyone had a different way of adding options like color, size, material, etc.
Most carts provided wizard style steps which was cool for the novice users or for the first time setting up products. But they were hard to edit or manage, requiring an extra click to edit a simple color in a little lightbox. For PayPal, based on a poll of 200 random merchants, the average number of buttons they create for their business is 26. Entering each option via a wizard for each button is too much work for busy merchants. The plan was after MVP, we'd explore a wizard as part of an A/B test.
Shopping cart research
I researched many shopping cart tools and shared with my team. I wanted to compare and also make sure ours will be unique. These were just 3 examples, everyone had a different way of adding options like color, size, material, etc.
Most carts provided wizard style steps which was cool for the novice users or for the first time setting up products. But they were hard to edit or manage, requiring an extra click to edit a simple color in a little lightbox. For PayPal, based on a poll of 200 random merchants, the average number of buttons they create for their business is 26. Entering each option via a wizard for each button is too much work for busy merchants. The plan was after MVP, we'd explore a wizard as part of an A/B test.
To change options in our new design, the merchant would just retype the color. We had a feature to move the ordering of each option too (for convenience) but it did not make it into MVP.
Inspiration & vision board
I also researched a ton of e-commerce websites out there and posted screenshots to share with my team. To design a tool for merchants for building their product pages, one should envision and strive towards what the end state should look like. There are so many product option styles out there, from drop-downs, radio options, color swatches, to actual images. My favorite was the DODOcase pattern swatch options. PayPal did not have the services to support them other than drop-downs, but we were to keep these in mind for Phase 2.
Inspiration & vision board
I also researched a ton of e-commerce websites out there and posted screenshots to share with my team. To design a tool for merchants for building their product pages, one should envision and strive towards what the end state should look like. There are so many product option styles out there, from drop-downs, radio options, color swatches, to actual images. My favorite was the DODOcase pattern swatch options. PayPal did not have the services to support them other than drop-downs, but we were to keep these in mind for Phase 2.
Inspiration & vision board
I also researched a ton of e-commerce websites out there and posted screenshots to share with my team. To design a tool for merchants for building their product pages, one should envision and strive towards what the end state should look like. There are so many product option styles out there, from drop-downs, radio options, color swatches, to actual images. My favorite was the DODOcase pattern swatch options. PayPal did not have the services to support them other than drop-downs, but we were to keep these in mind for Phase 2.
Inspiration & vision board
I also researched a ton of e-commerce websites out there and posted screenshots to share with my team. To design a tool for merchants for building their product pages, one should envision and strive towards what the end state should look like. There are so many product option styles out there, from drop-downs, radio options, color swatches, to actual images. My favorite was the DODOcase pattern swatch options. PayPal did not have the services to support them other than drop-downs, but we were to keep these in mind for Phase 2.
Inspiration & vision board
I also researched a ton of e-commerce websites out there and posted screenshots to share with my team. To design a tool for merchants for building their product pages, one should envision and strive towards what the end state should look like. There are so many product option styles out there, from drop-downs, radio options, color swatches, to actual images. My favorite was the DODOcase pattern swatch options. PayPal did not have the services to support them other than drop-downs, but we were to keep these in mind for Phase 2.
Brainstorming,
design concepts,
and design reviews.
Exploring all possibilities.
Brainstorming, design concepts, and design reviews.
Exploring all possibilities.
Brainstorming, design concepts,
and design reviews.
Exploring all possibilities.
Brainstorming,
design concepts,
and design reviews.
Exploring all possibilities.
Design jams, sprints, and design reviews.
We had design jams where anyone who is interested is invited to come participate. Any idea is a good idea wherever or whomever it may come from. My philosophy is that it doesn’t matter who’s idea it is, as long as it is the best for the customer and for our company.
We also did weekly “walk-the-wall” design reviews within our team and monthly design reviews with our Design VP and leadership team.
We had design jams where anyone who is interested is invited to come participate. Any idea is a good idea wherever or whomever it may come from. My philosophy is that it doesn’t matter who’s idea it is, as long as it is the best for the customer and for our company.
We also did weekly “walk-the-wall” design reviews within our team and monthly design reviews with our Design VP and leadership team.
From sketches to wireframes.
Sometimes I sketch my ideas first and sometimes I go straight to Sketch, Omnigraffle, Illustrator, or code to create my wires and flows. It depends on what's available at the time – like a notebook, napkin, copier paper, computer, or a voice memo on the iPhone while driving. Just gotta document those ideas! I also got a chance to do some visual explorations with a store front imagery and some quick icons. It was a lot of fun!
Interactive prototypes and user testing
From Omnigraffle to Marvel
and Proto.io to code, we iterated quickly and tested it till we had the winning formula.
Interactive prototypes and user testing
From Omnigraffle to Marvel and Proto.io to code, we iterated quickly and tested it till we had the winning formula.
“
This design is amazing, you guys really knocked it out of the park! I believe that the ‘impactable’ segment of merchants will be really pleased with how easy it is to get the correct button on their site. I think that those business owners are the ones that we can really impact, and your design really allows someone at that phase to figure it out and get to the outcome that they desire.
”
– Nate Sanders, Global Product Manager, PayPal Payment Buttons
“
This design is amazing, you guys really knocked it out of the park! I believe that the ‘impactable’ segment of merchants will be really pleased with how easy it is to get the correct button on their site. I think that those business owners are the ones that we can really impact, and your design really allows someone at that phase to figure it out and get to the outcome that they desire.
”
– Nate Sanders, Global Product Manager
“
This design is amazing, you guys really knocked it out of the park! I believe that the ‘impactable’ segment of merchants will be really pleased with how easy it is to get the correct button on their site. I think that those business owners are the ones that we can really impact, and your design really allows someone at that phase to figure it out and get to the outcome that they desire.
”
– Nate Sanders, Global Product Manager
“
This design is amazing, you guys really knocked it out of the park! I believe that the ‘impactable’ segment of merchants will be really pleased with how easy it is to get the correct button on their site. I think that those business owners are the ones that we can really impact, and your design really allows someone at that phase to figure it out and get to the outcome that they desire.
”
– Nate Sanders, Global Product Manager
“
This design is amazing, you guys really knocked it out of the park! I believe that the ‘impactable’ segment of merchants will be really pleased with how easy it is to get the correct button on their site. I think that those business owners are the ones that we can really impact, and your design really allows someone at that phase to figure it out and get to the outcome that they desire.
”
– Nate Sanders, Global Product Manager
Early prototype and user testing round 2.
I built interactive prototypes for reviewing concepts with my team and for user testing. We used this early prototype, built with Marvel, for our second round of user testing with 12 merchants. The prototype included an end-to-end experience from the merchant signing up for a business account, to setting up business and payment settings, and creating a payment button. It also included every state possible including drop-down menus and hover states to make it as close to real as possible.
7 out of 12 merchants appreciated the ability to add a PayPal logo or credit logos to their buttons and the real time Preview at the top was helpful but 4 out of 12 were unsure what to enter for product option names vs. actual options. Also, there’s a potential for the Preview area to get quite long if a merchant chooses to use the maximum allowed options like 5 drop-downs and 2 text boxes and depending on their screen resolution, the Preview could take up 60% of their screens. This didn’t happen during user testing but back to the drawing board!
Overall, we felt the merchants (especially the ones who have an idea of what kind of products they are selling) understood what to do and were able to create their buttons seamlessly. Only 1 out of the 12 (8%) participants failed at creating a button as compared to the 50% fail rate from past user studies!
Early prototype and user testing round 2.
I built interactive prototypes for reviewing concepts with my team and for user testing. We used this early prototype, built with Marvel, for our second round of user testing with 12 merchants. The prototype included an end-to-end experience from the merchant signing up for a business account, to setting up business and payment settings, and creating a payment button. It also included every state possible including drop-down menus and hover states to make it as close to real as possible.
7 out of 12 merchants appreciated the ability to add a PayPal logo or credit logos to their buttons and the real time Preview at the top was helpful but 4 out of 12 were unsure what to enter for product option names vs. actual options. Also, there’s a potential for the Preview area to get quite long if a merchant chooses to use the maximum allowed options like 5 drop-downs and 2 text boxes and depending on their screen resolution, the Preview could take up 60% of their screens. This didn’t happen during user testing but back to the drawing board!
Overall, we felt the merchants (especially the ones who have an idea of what kind of products they are selling) understood what to do and were able to create their buttons seamlessly. Only 1 out of the 12 (8%) participants failed at creating a button as compared to the 50% fail rate from past user studies!
Our last round of user testing.
For our last round of user testing, we used a prototype built by two of our engineers. 7/12 participants focused on the Preview area and changed the size of the button. 9 of them added a PayPal logo and credit card logos and liked that it would make their websites look more professional and secure. They noticed the Preview automatically updated as they entered the product options and thought that was cool. See it in action on Vimeo.
However, we still saw issues with adding product options and realized how we could fix it. The name of the option (like color) and the actual options (like red, blue, green) were at the same level and even though there were tooltips to explain this, the merchants did not noticed the content because they relied heavily on the Preview to guide them. We decided that we needed to indent the actual options and not allow expand/collapse of the drop-down menus.
Our last round of user testing.
For our last round of user testing, we used a prototype built by two of our engineers. 7/12 participants focused on the Preview area and changed the size of the button. 9 of them added a PayPal logo and credit card logos and liked that it would make their websites look more professional and secure. They noticed the Preview automatically updated as they entered the product options and thought that was cool. See it in action on Vimeo.
However, we still saw issues with adding product options and realized how we could fix it. The name of the option (like color) and the actual options (like red, blue, green) were at the same level and even though there were tooltips to explain this, the merchants did not noticed the content because they relied heavily on the Preview to guide them. We decided that we needed to indent the actual options and not allow expand/collapse of the drop-down menus.
Here's the final flow again...
Here's the final flow again...
See more projects
Custom Business App BuilderProduct Design
FileMaker Platform App IconsArt Direction
Customer CRMProduct Design
Inventory ManagementProduct Design
Merchant Account ActivationProduct Design
YummyLunch AppProduct Design
© Anna Fung Henry. All Rights Reserved.
© Anna Fung Henry. All Rights Reserved.
© Anna Fung Henry. All Rights Reserved.
© Anna Fung Henry. All Rights Reserved.
© Anna Fung Henry. All Rights Reserved.