Designing cohesive components for a unified experience across the PayPal Merchant Platform.
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.
ux design, design systems, responsive design
accessible figma file of page layouts with specs at various breakpoints
designs across the merchant experience will be consistent and cohesive
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!
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.
Feel free to reach out to me via email if you'd like to learn more about this project!