NextGen (Micro) experiences are interactive, mobile-first, slide or scroll-based experiences that can be published in social media stories, ad networks, and as embedded experiences on your website. These experiences harness lightning-fast load times, elegant animations and natural gesture behavior to vastly enhance the user experience and turn forms and data collection into something as natural as conversation between two people.

NextGen Experiences are different from traditional and larger Macro Experiences even in the way you create them. This guide aims to provide you with tips & tricks for creating and styling a MX.

How are NextGen (Micro) Experiences different?

As we have highlighted above, NextGen Experiences are not designed to take over an entire page, they are built for smaller screens and spaces. We have also changed the design philosophy a little - the themes you can use to style them (Tint and Block) carry less design elements and settings compared to Macro Themes. We have moved a lot of additional design settings to the modules and experiences screen themselves. There are more differences worth mentioning:

• New themes - Tint & Block (see more on themes below)
• Image size and presentation controls available directly in the module
• Support for background images and videos for all modules AND form section
• Form design settings for the most commonly asked design enhancements
• Support for inverted color scheme
• Two display modes - Slide (Content is presented as a series of slides, which the user can navigate between) and Page (Content is presented in a long-form article style layout, expanding to fill the viewport) mode
• Unique preview functionality supporting a multitude of devices and even customizable sizing

What theme should I choose? 

Tint theme is a unique theme that introduces the ability to apply filters on text and images in modules. Out of the box, it comes with 6 default module styles that can be customized for you on demand.

Block theme applies a block of color behind the content of a module. It doesn’t have the module styles available, but it is great for highlighting content in Slide mode.

Generally speaking, Tint Theme will likely work better as a base if your own brand theme but give Block a try if you are creating an experience in Slide mode and want to achieve high contrasts between background and the content block.

How to build a NextGen (Micro) Experience? 

Now when we have discussed what sets NextGen apart and what themes are available, let’s build an experience together.

• In the Experience Library, navigate to NextGen Experiences section
• Select the right mechanic and decide if you want to publish an experience to Social Story or embed it to a website or microsite - this will influence whether you build experience in Slide or Page mode
• Apply Tint or Block theme, or use one of your custom ones (to learn more about styling a theme using Theme Designer, see this article)
• Follow steps in this article to build your experience 

How to style a NextGen (Micro) Experience?

For training purposes, we have selected an Embeddable Experience in Slide mode and we will be using a Tint Theme.

As with any experience, first think about the publishing destination and always use assets that are suitable for presentation at the largest possible screen your experience can be viewed at (i.e. if the experience will be embedded on a page that is 1200px wide and you want to use a full-width banner, use banner 1200px wide x variable height). The platform will automatically scale down and resize assets on your behalf to make them optimized for different screen sizes.

Other image settings to note:

• Based on the shape and style of your asset, you can decide whether it should be presented on top/bottom/right/left or as a masthead in the Layout section under the Design Tab
• We have 2 image styles:
  • Icon image - ideal for presenting logos (upload small assets ideally around 100 x 100px)
  • Image - standard banner or feature image
• For an image, we have 3 display sizing settings to help you present your asset exactly the way you’ve intended to:
  • Cover - Cover automatically fills space while maintaining aspect ratio. The focus will be on the center of the image.
  • Contain - Contain scale image to maintain its aspect ratio while fitting within the given space. It is ideal for use of irregular design assets and product images.
  • Native size - Native, use an actual image size.

Background settings:
You can use a background color, image or background video in modules but also in your form section
If you decide to use a background image, a number of additional settings will be offered to you:

• Background display sizing
• Background scroll (only applicable in Page mode)
• Background repeat

Copy settings:

• The ability to change Headline size on the fly
• Text alignment (top/bottom/right/left/middle)
• Color inversion

Our training experience has the following settings applied:

• Uploaded icon image (100 x 105px)
• Uploaded image (530 x 394 px) - set to layout with image on the right, image display sizing set to Contain given that we are using irregularly shaped feature image
• Heading Font Size: XL
• Text positioning: Top Left
• Color inversion
• Background color
• Cyan Tint

Form Section Settings:

The form section has a great number of settings that will help you achieve the desired look & feel of your experience.

• Field layout - controls labels alignment (left or centered above the field)
• Field style - underline, outline or use solid background for yoru form fields and questions
• Field size - affecting the overall size of text like input height, label, placeholder etc.
• Spacing - defines the spacing between fields or elements within the field
• Style - applies filter (Tint theme only)
• Ability to invert colors
• Background settings as described above

Our training experience has the following settings applied:

• Background image
• Field layout: Top
• Field style: Underline
• Field size: Standard
• Spacing: Compact
• Style: No tint applied

If you need any further assistance with styling your Micro Experience, please do not hesitate to contact support@wayin.com or your Customer Success Manager.