# Design
source: https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/index.md

A best-in-class consumer experience when designing the Digital Debit Mastercard (DDMC) includes: access to the full UX product journeys, a diagram of the end to end consumer experience or flow diagram and the Moments that matter or key consumer highlights in the product journey.  
![Experience prototype](https://static.developer.mastercard.com/content/digital-debit-experience-design-guide/img/design-standards/Prototype2.svg)

### Experience prototype {#experience-prototype}

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

<br />

[Open prototype](https://www.figma.com/proto/h7Gtbmlo43Rwcju42Y8yPE/DDMC-Sep-2021-EN?page-id=0%3A1&node-id=1%3A4023&viewport=405%2C369%2C0.07&scaling=scale-down&starting-point-node-id=26%3A10275)
![Flow diagram](https://static.developer.mastercard.com/content/digital-debit-experience-design-guide/img/design-standards/Flow_diagram2.svg)

### Flow diagram {#flow-diagram}

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

<br />

[Learn more](https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/flow-diagram/index.md)
![Figma File](https://static.developer.mastercard.com/content/digital-debit-experience-design-guide/img/design-standards/Figma2.svg)

### Figma File {#figma-file}

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

<br />

[Access file](https://www.figma.com/file/MKAeiCLKPbTeQ5Q9s8jhC2/DDMC-User-Journeys?type=design&node-id=2310-3630&mode=design)

### UX Journeys {#ux-journeys}

[Onboarding](https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/onboarding/index.md)   
[Tutorial](https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/tutorial/index.md)   
[Tooltips](https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/tooltips/index.md)   
[View card details](https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/view-card-details/index.md)   
[Save card details to browser](https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/save-card-details-to-browser/index.md)   
[Card controls](https://developer.mastercard.com/digital-debit-experience-design-guide/documentation/design/card-controls/index.md)   

<br />