Mobile: Campaign Design Tips, Tricks, and Best Practices

You may wonder how to optimize your Campaigns’ user interface and user experience. This article will teach you about optimal Element placement and style.

Understanding Elements

Every item under CAMPAIGN ELEMENTS in the WYSIWYG corresponds to an Element that currently sits on your app screen:

You can select one of these Elements for placement and customization either by clicking it in the CAMPAIGN ELEMENTS section or on the app screen itself.

You can move around all of the Elements on the screen together by clicking on CANVAS under CAMPAIGN ELEMENTS and dragging the highlighted section around the app screen.

Campaign Design Tips and Tricks

Moving Elements Forward and Backwards

Some Elements can be moved forward and backward with respect to other Elements on the screen (similar to z-index in HTML). You can do this in one of two ways:

Click on the dropdown menu to the right of the Element and select Move Forward or Move Backward, or

Right click on the image itself in the device screen and select Move Forward or Move Backward:

This is helpful in situations where you attach a CTA to an Element that sits at the same location on the app screen as another Element (e.g., a shape sitting on top of an image).

Scaling and Docking the Canvas

You can resize most Elements at will, either using their settings-panel’s size fields, or by clicking the Element’s border on the app screen and manually drag-resizing.

When designing for various devices and device-sizes, you must place and set the size of your Elements with this in mind. Use the red guidance lines on the app screen to understand when your Elements are centered and/or docked to the sides of the app screen.

For example, when an Element (in the following image, the CANVAS element) is centered vertically and horizontally, you will see two intersecting red guidance lines:

If an Element is centered vertically and horizontally, it will appear in the center of the app screen regardless of which device is selected in the PREVIEW DEVICE panel, but it may be cut-off if the size of the content is too large to fit on a given device’s screen.

Previewing Content on End-User Devices

An important part of Campaign content-building is ensuring your Campaign will provide a pleasant UI regardless of device OS and size.

PREVIEW DEVICE enables you to simulate the Campaign’s appearance on small, medium and large Android and iOS devices, in both portrait and landscape orientations:

Customizing the Campaign’s Back Cover

With Mobile SDK version 1.7.0 and up, you can customize the back cover of your Campaign (or the area that sits behind your Campaign while the Campaign is displayed).

You can designate the back cover’s color, opacity, and associated CTA (this last one only for ShoutOuts):

The default values are as follows:

Color: black.

Opacity: 0.7.

CTA: MAYBE.

Campaign Design Best Practices

When building Campaigns in the Campaign Wizard, follow these best practices where applicable:

Model your Campaign with the smallest device(s) the end-users will use in mind.

If there is insufficient space on an end-user’s device, WalkMe content may not be fully visible.

Consider using Segmentation to segment your Campaigns’ end-users by their device-sizes.

The most intuitive, and least error-prone, placement for Campaigns on end-user device screens is either aligned center or docked to one side.

if you’d like a Campaign to span the entire width or height of an end-user device screen, stretch it in the WYSIWYG until the size of the Canvas Element reads 100% along the axis you’re stretching it on.

If you must support portrait mode (in addition to landscape mode), perform QA frequently as you design and size and place your Elements creatively with this goal in mind.