top of page
Web Payments.jpg
Web Payments
Using the Payment Request API makes online purchases easier without having to fill in personal and payment details repeatedly every time a user enters a checkout flow. By storing user details in Firefox the user no longer needs to re-enter their details the next time a merchant requests payment. The Payment Request UI also provides a consistent experience across merchant sites.
 
From a UX perspective we want to give the user a clear, friction-free experience that allows them to check out quickly and as securely as possible. The UX team worked very closely with both the product manager and user research to ensure we were designing that experience.
 
 
Web Payments Dropdown Visuals 1.jpg
Checkout Summary Screen
Web Payments Dropdown Visuals 2.jpg
Add shipping address
Web Payments Dropdown Visuals 3.jpg
Error Screen
Information Architecture.jpg
Information Architecture
Wireframes 1.jpg
Wireframes 2.jpg
Wireframes 3.jpg
Wireframes
In collaboration with user research, we ran several studies to validate and test our designs. Below is an example of a prototype we used to test how a user responds to running into errors in the checkout flow. We named this prototype "The Unhappy Flow".
UR4.jpg
UR2.jpg
UR3.jpg
UR1.jpg
"The Unhappy Flow" Prototype created for user testing
Profile Image

Hey, it’s nice of you to stop by!

 

Let me introduce myself, I’m Eric a Senior Product/UX Designer based in Toronto. I'm currently working on improving the user experience of privacy and security features for Firefox at Mozilla. Partnered with my past experience in production design I understand the importance and value of all stages from conceptualization to implementation. Feel free to reach out to me with the form below, I’ll be more than happy to hear from you. :)

  • LinkedIn - Grey Circle
  • Instagram - Grey Circle
  • Twitter - Grey Circle

Success! Message received.

© 2016 by Eric Pang

bottom of page