# Quick Start Guide
source: https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/quick-start-guide/index.md

This quick start guide provides an overview of the **user experience considerations** for successfully integrating Smart Subscriptions into your app and ensuring **strong customer engagement to maximize the investment in the product**.

## Key steps {#key-steps}

### 1. Understand, and plan for, the features you will deploy for your first launch {#1-understand-and-plan-for-the-features-you-will-deploy-for-your-first-launch}

The Smart Subscription functionality is naturally modular and provides options for how features are delivered to your users. Depending on your goals, it is possible to start with a single feature and then add more over time.

* Work with your cross-functional stakeholders to determine what features the initial release will contain.
* Plan for expanding features over time to ensure smooth updates in the future that will not require significant redesigns. This means space on transactions for new controls, statuses, and notifications as well as anticipating any new surfaces you may want to create which will encourage stronger engagement.
* You will want to design a flexible location for subscription actions. A common implementation may begin with a single action and then evolve to two or more actions.  

![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/launch-plan.png)

### 2. Design paths for integrating Smart Subscriptions {#2-design-paths-for-integrating-smart-subscriptions}

There is no single way to integrate Smart Subscriptions. You can learn more about three possible integration paths that let you add Smart Subscriptions with minimal lift now and expand into richer, more engaging surfaces over time.
![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/core.png)

#### Lightweight integration {#lightweight-integration}

Embed basic controls inside Transaction Details with a simple Active/Inactive list. A low-lift way to enable subscription management.
![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/balanced.png)

#### Enhanced subscription details {#enhanced-subscription-details}

A Subscription Details page with richer information and multiple ways in. Provides clearer context and control without requiring a full hub.
![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/best.png)

#### Dedicated subscription hub {#dedicated-subscription-hub}

A centralized space with insights, history, upcoming payments, and multiple entry points in high-intent spaces to drive repeat visits and long-term value.

Learn more in the [Design Paths](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/moments-that-matter/design-paths/index.md) section.  

​

### 3. Review the primary flows {#3-review-the-primary-flows}

* The core functionality to design is centered on a variety of controls such as [Cancelling](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/use-cases/cancel/automated-cancel/index.md) or [Changing Plans](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/use-cases/change-plans/index.md) for the subscriptions that your users may have.
* The Figma Assets file contains all feature flows as well as illustrative examples and specific assets you can customize.
* You can get an overview of all available features on the [Use Cases Overview](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/use-cases/overview/index.md).  

We have created a set of assets that help to explain the functionality and also allow you to rapidly incorporate the features into your own application. Each feature or use case has its own page within the Figma file. See details on the contents below.

#### Figma file contents {#figma-file-contents}

**User flow**   

Here you will find a user flow diagram that captures the happy path as well as any decision points to understand to implement properly.  

**Illustrative happy path**   

We have captured a low-fidelity wireframe view to quickly get you up to speed on the feature and the primary considerations for implementing.  

**High-fidelity screens**   

We provide high-fidelity screen designs for all screens in the illustrated flow. Incorporate these into your experience to speed up the process of integration.  

**Components and alternative designs**   

Additionally, we have separated out specific components for the flow into its own section, including alternative designs. These should also accelerate your design process and enable you to directly paste components into your existing screens, style them to fit and present a cohesive user experience.  

**Prototypes**   

Finally, the guide includes prototypes capturing the key flows for each feature.
![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/figma-file-contents.png)
![Experience prototype](https://static.developer.mastercard.com/content/consumer-clarity/uploads/prototype.svg)

#### Experience prototype {#experience-prototype}

Get a glimpse of the reference experience. (Password: EthocaSS)

<br />

[Open prototype](https://www.figma.com/proto/ChtfTZgyUb2c605GcGJMqP/Smart-Subscriptions-Assets?page-id=750%3A22320&node-id=750-22352&p=f&viewport=-5008%2C-5297%2C0.5&t=jSN5DZjDK07hyyMk-8&scaling=contain&content-scaling=fixed&hide-ui=1)
![Figma file](https://static.developer.mastercard.com/content/consumer-clarity/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.

<br />

[Access file](https://www.figma.com/design/ChtfTZgyUb2c605GcGJMqP/Smart-Subscriptions-Assets?node-id=2-2&p=f&t=WoCO6VEepEWcjQOw-0)

![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/how-to-use.png)

## Key considerations {#key-considerations}

### 4. Understand edge cases and "unhappy paths" early {#4-understand-edge-cases-and-unhappy-paths-early}

Given the nature of the Smart Subscriptions functionality, understanding the back-and-forth between the subscriber and merchants is important to creating a seamless experience.

* Work with your content strategy team to incorporate your voice and tone into clear, concise messaging. You can learn more about those specific situations in the [Unsuccessful Cancel Flows](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/use-cases/unsuccessful-successful-states/index.md).
* There are a few unlikely but possible circumstances that require nuanced communication with the customer as to why something processed as it did, and the next best steps given the situation. Learn more about common [Edge Cases](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/use-cases/edge-cases/index.md).
* Anticipate notifications and messaging strategies for the use cases that require further action from the user. Learn about [Notifications and Messaging](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/moments-that-matter/notifications-messaging/index.md) best practices.  

### 5. Design for discovery and engagement {#5-design-for-discovery-and-engagement}

#### Discovery {#discovery}

Meet users where they already are. Integrate Smart Subscriptions into existing workflows. Consider the different entry points in which a customer may naturally discover Smart Subscriptions and return to them when they need to manage subscriptions, such as transaction lists, notifications, and subscription hubs. Learn more in [Discovery](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/moments-that-matter/discovery/index.md).   

<br />

<br />

<br />

<br />

<br />

#### Re-engagement {#re-engagement}

Make subscription management engaging and easy to return to. Many subscribers come to regularly check spending, track renewals, and review upcoming charges. Consider dedicating a space that helps users see the full picture, manage easily, and return often. Learn more in [Re-engagement](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/moments-that-matter/re-engagement/index.md).
![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/discovery.png)
![](https://static.developer.mastercard.com/content/consumer-clarity/uploads/re-engagement.png)

Next: [Moments That Matter](https://developer.mastercard.com/consumer-clarity/documentation/experience-design-guide/smart-subscriptions/moments-that-matter/index.md)
