back

PayPal Frameworks

Designing cohesive components for a unified experience across the PayPal Merchant Platform.

overview

PayPal is a two-sided platform for consumers and merchants. On the merchant side, the experience is a bit disjointed due to varying design components on each page. In order to address this disparity within our experience, we wanted to create an accessible repository of components and layouts for the team to leverage in their designs.

toolbox —

figma
ux design, design systems, responsive design

deliverables —

accessible figma file of page layouts with specs at various breakpoints

impact —

designs across the merchant experience will be consistent and cohesive

framework

We wanted this resource to act as the framework for designers working on the merchant experience.

Designers can leverage the Figma file and find full-page layout templates of various sections on the PayPal Merchant Platform. Within the file, designers can easily access the page templates at different breakpoints ranging from XL (1440), L (1024), M (752), S (575), and XS (375). There are also various table views and detail page views with different variations based on use cases and different interactions. All of these framework templates are fit to a consistent 12-column grid and contain separate components which are spec'd based on the PayPal UI Design System guidelines!

paypal frameworks design

takeaways

Working on this project, I definitely ran into some challenges regarding the responsive aspect. Some pages within the merchant experience did not have designs at certain breakpoints. It was quite challenging to understand how a table page and the interactions, for instance, would behave at different breakpoints and screen sizes. However, it was a learning experience to wrangle with responsive design and understand atoms vs. molecules vs. components. vs. page layouts!

Through this accessible and cohesive framework file, I am hopeful that the Merchant Platform can shift towards being conistent and unified for a seamless merchant experience.

questions

Feel free to reach out to me via email if you'd like to learn more about this project!