Designing Your First Experience

Follow this step-by-step guide to design, publish, and monitor your inaugural onboarding tour with Jimo. Learn how to effectively engage users and enhance their experience from the very start.

Designing Your First Experience

Now that you’ve completed your initial setup, it’s time to walk through the lifecycle of creating an experience in Jimo. In this tutorial, we’ll build a simple onboarding tour for new, trialing users. This example demonstrates Jimo’s main workflow: Design → Publish → Monitor.

What You’ll Learn:

Navigating to the relevant experience dashboard.
Starting with a prebuilt template or starting from scratch.
Using the Flow Builder, Content Builder, and other Jimo tools.
Positioning steps in context with the CSS selector.
Preparing your experience for targeting, publishing, and later analytics.

Step 1: Accessing the Dashboard

Open the Jimo Dashboard: From your Jimo main menu, choose the type of experience you want to create and access the dashboard from the sidebar. In our case: Tours & Modals.
Create Your First Tour:
- If this is your first time, you’ll see an “empty state” prompting you to “Create your first tour.”
- Otherwise, click the + New Tour button in the top-right corner.

Step 2: Choosing a Starting Point

You can start from a template or from scratch.

Templates: Prebuilt tours for common use cases—just tweak the content and visuals.
From Scratch: Total flexibility to build your tour step-by-step.

For this guide, let’s start from scratch.

Name Your Experience: Give your tour a clear, descriptive name (e.g., “Trial Onboarding Tour”).

Open the Builder:

At this point, you can choose to open the builder in-app (if Jimo is installed on the page or using the extension) or use the standalone builder.
Let’s start in the standalone builder. You can always switch to in-app mode later to refine targeting and positioning.

Click Enter Builder to proceed.

Step 3: Building Your Flow

Flow Builder Tab: This is your experience’s structure, where you can add, arrange, and connect steps.

Add Your First Step:
- Drag and drop a Modal step from the tool panel. This will serve as the welcome message for new trial users.
Automatically Move to Content Builder: Once you add your modal step, you’ll be taken to the Content Builder to edit its content.

Step 4: Editing Your Step Content

In the Content Builder, you can:

Click on any element in the central preview or use the navigator to select components.
Customize text, images, buttons, and style.
Access top-level settings for step behavior and user interaction.

For our welcome modal:

Add a short title (“Welcome to Our Product!”)
A brief description (“Ready to explore? Let’s show you around.”)
A “Get Started” button to move forward in the tour.

Right Sidebar: Elements Editor

Select an Element: Click on any element within the central preview or use the Navigator to select it from the left sidebar.
Edit Parameters:
- Text: Change the text content directly in the editor.
- Styling: Adjust fonts, colors, and sizes to match your brand.
- Behavior: Set actions like button clicks or step transitions.
Advanced Options: Access generic and behavioral settings at the top of the dropdown in the navigator or by clicking on the entire card.

Quick access to the Flow Builder
Navigator:
- Manage Elements: Easily add, remove, or reorder elements within your step.
- Access Specific Elements: Quickly jump to any element’s settings through the navigator.
Additional Features:
- Triggers/Conditions: Add if/else logic to control step flow.
- Theme Management: Apply predefined themes for consistent styling across all steps.
- Language Tab: Handle translations to support multiple languages.

Step 5: Adding More Steps

Go back to the Flow Builder and add another step, this time a Tooltip.

Add Tooltip Step: Select a Tooltip step and place it in the flow after the Modal.
In-App Positioning: To attach a tooltip to a specific element on your website:
- Switch to the in-app builder mode or hit the button target element in-app and choose the URL on which you want to place your tooltip step.
- Use the CSS selector to pinpoint the element you want to highlight.
Edit Tooltip Content: Back in the Content Builder, customize the tooltip’s text and appearance. For example, highlight a “Settings” button or a “Start a Project” link to guide users deeper into your app.

Positioning targeted steps requires either Jimo installed on that URL or the extension active.

Step 6: Iteration and Preview

Feel free to add more steps, change designs, or adjust the order. Each step can be:

Simple modals that greet users.
Tooltips guiding users to specific features.
Hotspots pinpointing important UI elements.
Etc... (Check experiences components).

-> And interconnect steps to other experiences with CTA actions like Hints, Banners, or Checklists to create more advanced patterns as you grow comfortable.

In-App Builder for Contextual Edits:

At any time, open the in-app builder overlay directly on your site.
Preview exactly how the tour will look and behave for end users.

Preview Mode:

Test the flow from start to finish.
Ensure everything appears as intended and the triggers work as expected.

Step 7: Target & Publish

When you’re satisfied with your tour design, it’s time to configure how, where, and to whom it will appear.

-> Click the Target & Publish button to access the experience’s targeting and publishing settings.

What to Configure:

Show On (Trigger): Decide when the tour should start. For a simple onboarding, let’s trigger it on page load.
Where (Page Filtering): Limit the experience to a specific URL (e.g., your main dashboard page).
Who (Audience): Use segments (e.g., a “Trial Users” segment) defined by the user attributes you’ve set up to ensure only trialing users see this tour.
When (Timing & Scheduling): Optionally schedule your experience or set an expiration date.
Goal (Optional Aim): Define success criteria, like whether users complete a certain step or interact with a key feature. This helps measure the impact of your onboarding.