Branded App - Mobile Experience Builder

**Prefer to watch a learning module on this topic? Watch the related module(s) here.**
​

Paytronix has developed a unique mobile application building experience that will allow clients and their teams to utilize filtering factors to keep their app’s content fresh and relevant driving revenue and engagement through personalization in the Mobile App. This can be accomplished with:

With a new in-app dashboard design AND the Paytronix Client Web Mobile Experience Builder, a new content management system, Paytronix is putting the power into our clients hands. Paytronix believes by providing a way for our clients to control the Dashboard content through a series of pre-set Components, clients can provide more personalized experience for their guests while reducing the manual intervention needed from the Paytronix Branded App Team.
​
​

While a majority of the app’s content (side navigation, bottom navigation, and all other app pages) will continue to be managed by the Paytronix Branded App Specialist team via app-level configuration, clients using Mobile Experience Builder will control the content within the App’s Dashboard (aka homepage) through a series of preset design components.
​

Clients will be able to interact and customize this dashboard layout for users based on a few different filtering factors and allow for changes that don't require an app update. This means clients will be able to add new content while avoiding an app project, or store re-submission.
​

​

Mobile Experience Builder will be accessed from the Paytronix Client Web.

Users will need to have an account with the proper permissions View and Edit Mobile Experience Builder.
In order to access Mobile Experience Builder:

​

Mobile Experience Builder is bringing forward a completely redesigned dashboard. You'll note that there are still navigational buttons on this screen at the bottom (these ARE configured in app builds), but the scrollable dashboard is made possible through design components in the Client Web Mobile Experience Builder.
​

A design component is a drag and drop element that represents a pre-developed mobile app feature. This can be a Paytronix or 3rd party feature integrated into the branded mobile app. Clients will be able to decide which design components they want on the dashboard and in what order (with the exception of the Welcome Component).
​

When composing the design components, there will be default text that can be overridden. Each component also includes Alternative Text, or Alt Text, fields, which will be used when users have screen readers enabled.

Today, Paytronix offers 9 design components for use in the branded mobile app.
​

The welcome component is a simple greeting message for app users. This will always appear at the top of the list. Clients will be able to use a limited assortment of substitution parameters (eg *first_name*). If the user does not have an available parameter, a default message that is also configurable will be used.

Substitution parameters, which are case sensitive, include:

Some examples of text include:

The Image Component will display as a manually swipe-able carousel available to promote deals, rewards, and any other marketing messages that can be segmented. For each image, Mobile Experience Builder offers future publishing and expiration date capabilities and segmentation options by:

Please note, you are not required to segment the image. If you wish to make the image visible to all app users, select “All” for each filter.
​

This component has several layers. When this component is selected/clicked in the Client Web, Mobile Experience Builder will display the list of configured images first. Clients will be able to add images (via the + Add Item button at the bottom of the list), remove images (via the 3 stacked dots icon to the right of the image), move images (via the 6 stacked dots icon to the left of the image), and edit images (via the pencil icon to the right of the image).
​
​

​

When adding or editing each images, the Mobile Experience Builder is similar. Clients will be able to select an image (either uploading or selecting from a previously uploaded image), edit the active dates, and make configurations to the available segmentations.
​
​

​

Currently there are no limitations on image resolution when uploading images into Mobile Experience Builder. By design, the image component will display images at a 1:1 resolution, regardless of the actual image dimensions. The means, the component will not shrink to the image size uploaded for a thinner look. Therefore we recommend using images with the below resolutions (in .jpg of .png) for optimal display:

Please keep images no smaller than 500 x 500 px.
​

Image List Display

The Available Rewards component will showcase guests rewards that are available on their card. It will include a subset of THREE wallet names, balances, and expiration dates (if applicable) for individual users. If the guest has no available rewards, the component will be hidden from the user’s dashboard.
​

The nearest-upcoming, expiring reward(s) will be listed first, followed by rewards based on ascending wallet code. To link users to the full list of available rewards and offers on the account, there will be a customizable View All link that will route the user to the My Account/Balance screen. Please note, the points wallet balance does not appear in this component.
​

The Order Again component will be available for clients that utilize Paytronix Online Ordering within the branded app, only. This component will showcase last THREE items ordered by the individual user. If clients would like to link users to the full list of past orders, there will be a customizable View All link that will route the user to the Recent Orders screen. If the guest has no past/recent orders, the Order Again component will be hidden from the guests dashboard.
​

When an item is clicked, the app will perform the steps of a reorder - proceeding to the basket screen of the original location with the full contents of the original order.

If no image has been uploaded to Paytronix Online Ordering for the menu item, a non-configurable default image will be used.
​
​

Pull messages are sent via Paytronix Campaign Builder. Additional detail can be found here: How do I Send Push and Pull Messages to the Branded App?
​

The Pull Message component will showcase the most recent pull messages sent by the client to their guests. The first 127 characters (or two full lines) of the most recent pull message appears. When a guest clicks on the message, they will navigate to the app’s Message/Notification Center. If the guest has not yet opened the pull message, it will appear unopened and indicated with a black dot. Once the guest has opened the message in full, it will be checked.
​

If an image has been assigned to the Pull Message in the Campaign Message Template, the image will appear alongside the message. If no image has been assigned to the Pull Message, the default pull message icon appears in its place. If a guest does not have any pull messages to view, the component will be hidden.
​

Checkin is a specific Paytronix action and transaction that indicates a guest has ‘identified’ they are at a PXS store location. Additional information for the branded app can be found here:
​https://support-paytronix.force.com/help/s/article/000001338
​

There are two options to display the checkin code, what is referred to in Mobile Experience Builder, Code Type:

The check-in component will display a pressable button (Pre-Check In) that, when pressed (Post Check In), will prompt the check-in code to appear for the closest location. This code is supplemental to the individuals card number.

The text entered in the Post Check-in Button Label of Mobile Experience Builder will be followed by the expiration time configured in the Paytronix backend for the Check In Feature that will count down.

Example:

The Scannable Loyalty Card component offers clients the ability to select between a scannable barcode or QR code that can be used to identify the guest at the store, depending on their in-store hardware capabilities. The client will also be able to select between using the user’s account number for the barcode or the user’s phone number.

The app supports the following:

The Point Tracker component will offer the ability to display a pre-defined progress bar that tracks an individual wallet towards a maximum value defined within Mobile Experience Builder. The progress bar will fill from left to right and will be broken into 4 equal sections with 3 labels determined by the app logic based on the maximum value defined.

Examples:

The point tracker will utilize the app’s configured low contrast color to represent empty and the primary color to represent full.

The text that sits below the bar will display the remaining balance required to meet the maximum balance followed by static text UNTIL YOUR NEXT REWARD.

Paytronix has integrated to partner P97’s API to bring convenience store clients the ability to offer their guests the option to Pay in Store or Pay at Pump with ACH payments.

The P97 Pay In-Store/At-Pump component will bring the selectable payment options (in-store or at-pump) to dashboard. This feature surfaces a scannable code that can be used to identify the guest at the convenience store location. Additionally, clients now have the ability to configure an image and description with this component, offering more insight and direction to their guests on how to successfully use it.

By default, both options for Pay In Store and Pay at Pump will be displayed. To surface only one in the app, simply leave the Button Label text field in Mobile Experience Builder empty.
​
​

⚠This feature requires:

If one or both of the above are not met, the P97 component should not be added into Mobile Experience Builder. If added, users will experience an error message reading “P97 not configured to this merchant.”

When implementing Alternative Text, or Alt Text, consider the experience for users with reading impairments. Always use punctuation as you would when typing or where you’d break when speaking.
​
​

​​​​​​​

​​​​​​​

​​​​​​​

Because Mobile Experience builder now gives clients the power to change items in real time, Paytronix has implemented two mechanisms for sending the Client Web Mobile Experience Builder changes to a live build of the app:

​​​​​​​

As clients make edits to the Client Web UI, Mobile Experience builder will automatically save those changes. They, however, do not get pushed to all users' screens automatically until the Publish button is pressed. In order for clients to see these changes in real time before publishing them, they must enter Draft Mode on the device.

Draft Mode can be initiated following the below steps:

Draft Mode can be exited following the below steps:

​​​​
​

​
​*NOTE: Previewing respects filtering conditions, so if you don’t see images or content in DRAFT mode, try logging in with a user that has the set criteria. You might want to create test users for previewing purposes.

After the client has tested their changes with Draft Mode and considers their changes finalized, they will be able to send the changes to all users by pressing Publish within Mobile Experience Builder in the bottom right-hand corner.

There is no way to publish content for a singular component. If no updates have been made since the last publishing, the publish button will appear disabled and non-clickable.
​

​

Top image is of the Client Web Mobile Experience builder when content is publishable and the Publish button is enabled.

Bottom image is of the Client Web Mobile Experience builder when there is not content to be published and the Publish button is disabled.

In the app, users will need to navigate away from the dashboard and navigate back to see these new changes adopted.
​

In addition to the design components, the app will also leverage bottom screen navigation. These 5 buttons are app-level configurations and should be defined at the time of app generation. Clients will have the option to select button functions (listed below), position, and label:

The button label can accommodate only 12 characters. If more than 12 characters are provided, the app will surface the first 9 characters followed by “…”.

Within the App Update form https://paytronix.formstack.com/forms/mobile_apps_specs_guide_update clients will see the following options, where the icon present next to the button function will be used in the branded mobile app. Changing these buttons in the future will require an app update. Please note that the actual icons are not configurable.
​
​​​​​​​