# Design
source: https://developer.mastercard.com/mastercard-merchant-presented-qr/documentation/experience-design-guide/design/index.md

A best-in-class consumer experience when designing Mastercard QR includes: access to the UX product journey, a diagram of the end-to-end consumer experience, experience prototype, and a Figma file for end-to-end product experience.

![Prototype](https://static.developer.mastercard.com/content/mastercard-merchant-presented-qr/uploads/prototype.svg)

### Experience prototype {#experience-prototype}

View the reference prototype to get a glimpse of the happy path (Password: CX\&D)

[Open prototype](https://www.figma.com/proto/TKeMFSyz2IyVHrOJuJrIap/Scan-To-Pay-2023?page-id=127%3A6649&node-id=127-7479&viewport=9%2C444%2C0.1&scaling=scale-down&starting-point-node-id=127%3A7479)
![Flow diagram](https://static.developer.mastercard.com/content/mastercard-merchant-presented-qr/uploads/flow-diagram.svg)

### Flow diagram {#flow-diagram}

View the end-to-end flow diagram to get an understanding of the full product at a glance

[Learn more](https://developer.mastercard.com/mastercard-merchant-presented-qr/documentation/experience-design-guide/design/flow-diagram/index.md)
![Figma](https://static.developer.mastercard.com/content/mastercard-merchant-presented-qr/uploads/figma.svg)

### Figma file {#figma-file}

Find the end-to-end product experience for all use cases to duplicate and customize in your own environment

[Access file](https://www.figma.com/design/o53OIL63k6mBVu7xYxNqsq/Scan-to-Pay-User-Journeys?node-id=110-552)

### UX Journeys {#ux-journeys}

[Static QR](https://developer.mastercard.com/mastercard-merchant-presented-qr/documentation/experience-design-guide/design/static-qr/index.md)   
[Dynamic QR](https://developer.mastercard.com/mastercard-merchant-presented-qr/documentation/experience-design-guide/design/dynamic-qr/index.md)   
[Cross-border Static QR](https://developer.mastercard.com/mastercard-merchant-presented-qr/documentation/experience-design-guide/design/cross-border-static-qr/index.md)   
[Cross-border Dynamic QR](https://developer.mastercard.com/mastercard-merchant-presented-qr/documentation/experience-design-guide/design/cross-border-dynamic-qr/index.md)   

<br />