Introduction to the Outgrow Builder

The Outgrow Builder is an intuitive and flexible platform, which allows users to build highly optimized interactive experiences in minutes. Once you log in to your Outgrow account and start working on creating interactive content for your business, you will notice that the entire content-building experience is divided into 3 parts. Using this document, you can learn more about the different parts involved in your content-building experience.

Designing the Welcome Screen & setting up the Content Title

A. Welcome Page Configuration: Content usually begins with a Landing Page or a Welcome Page. The point here is to get the users excited about actually using the calculator and not bouncing from the welcome page. To do this, you want to have clear, crisp text that clearly explains what your content does and what benefit someone will get from your content. So in addition to saying “find the cost of building your roof”, you can add “make sure you are not overpaying” as a subheading to clearly outline the benefit.

A.1. For the Welcome page, under the Design tab, you can specify the Font Type, Font Size, and Text Alignment for the welcome page text. You can also upload a background image and set the tint as well in this section. NOTE: For the background image, the recommended minimum image size is 1250 pixel * 800 pixel, and the maximum supported file size that you can upload is 1 MB.

A.2. You can go to the Layouts sub-tab, and can choose the layout that you want to use to display the information and media on the Welcome screen of your Outgrow content.

B. Title: The title of the content is the first thing the users see, so it has to grab eyeballs. Besides being catchy, it should be short, concise (not more than 5-9 words), and focused. An effective strategy is to challenge the user by using words like “Are you a true..”, “Do you really know..” etc. Use phrases like the hardest quiz or the most challenging test to catch attention and bring them in.

NOTE: In case you have embedded the content on your website, and want to show the questions page to the users directly, you can choose to hide the Welcome screen.

Setting up Questions in Outgrow

Once you have configured the design for your Welcome Screen, the next important thing to do is to configure the questions and the respective options that will be displayed for each question to the users. You can add the questions and respective responses by following the below-mentioned steps:

A. While setting up the questions, depending on the content type that you are creating, you can opt for one of the below-mentioned question types:

A.1. Multi Select
A.2. Single Select
A.3. Drop Down
A.4. Text Input
A.5. Text Area
A.6. Numeric Slider
A.7. Opinion Scale
A.8. Rating
A.9. Ranking Grid
A.10. Date/Time Picker
A.11. File Upload

B. You can configure the question text, and along with that, you can set up the help text as well that you would like to display to the users. For the respective options available for selection in a question, you can choose to display the options as Text, Image, or Icon. You can also mark a question as mandatory or non-mandatory by toggling on the Mark Mandatory option.

C. In the Advanced Tab, you can enable the settings for:

1. Allowing users to be redirected to a different page when they click on Submit.
2. Setting up a fallback value that will be used in result calculation or sent to the CRM, in case the user skips submitting a response for this question.
3. Displaying feedback to a user when a response is submitted for the question. NOTE: This option is available for a few content types only.
4. Adding a Countdown Timer within which the user needs to submit a response for the respective question.

C. From the design tab, you can configure the font settings that you would like to use for displaying the question and response text. You can also upload the background image that you would like to show on the questions page.

D. Lastly from the Layouts tab you can choose the design layout, that you would like to use to display questions and responses.

Questions play an important role in the customer funnel, here are some of the best practices that can be used in your content pieces:

A. Five to Ten Questions: You want to have enough questions that the users trust your content but not so many that they bounce off. There is a fine line and delicate balance between this and if you are building a B2C calculator, you want to make sure it's short and fun. B2B calculators can be a little longer but they still have to be engaging, especially if you are targeting people at the top of the funnel.

📘

Pro Tip

For longer content pieces, over 8-10 questions, have them divided into sections so you don’t scare away users with a long list of questions on one page.

B. Use Checkboxes and Sliders: Avoid asking for text inputs because they are ambiguous and require too much thinking and time from users. Say you’re asking someone their height, provide a slider with pre-standardized units instead of letting the user imagine which units she should use. Some of the Outgrow templates come with in-built slider question types. You'll learn more about them in the K Create a Calculator ] section.

C. Display 1-2 Questions at a Time: To avoid confusing the user, stick to one or two questions at a time unless the calculator requires real-time variable adjustment and calculations.

Setting up Results in Outgrow

This is where it all comes home. The user filled out your questionnaire in anticipation of a result that adds value and/or is interesting. So your results need to be such that they do not disappoint the customers. Using Outgrow's intuitive content builder, you can design the results page of your content to ensure that you display important information along with rich media for the users. Here is how you can do it:

A. Under the All Outcomes/Results tab, you can customize the information that is displayed on the Results page. You can add additional results or outcomes by clicking on the Add icon. For each Result/Outcome, you can add the Title of the result along with the Description for the result as well.

B. You can choose to add media on the results page by enabling the toggle setting for Add Media. NOTE: The media you will add will be for the specific result only.

C. You can add a Primary and a Secondary button on the results page. These buttons can be used to allow the users to download the result information using Save As PDF functionality or can be used to redirect the users to a different URL as well.

D. You can also enable the settings, in case you want to show the same CTA buttons for all the result/outcome pages.

E. From the Results Setting page, you can customize the overall heading and subheading that will be displayed on the results page.

F. You can enable the Add Media setting, in case you would like to display additional media on the results page. This media will be common for all results/outcomes.

G. In the Footer section, you can display a footer headline and subline, and can also enable the following settings:

1. Share on Social Media: This setting should be enabled, in case you want to allow users to share your content on different social media channels. This can help you in making your content go viral.
2. Subscribe on Social Media: This setting should be enabled in case you want the users to be able to subscribe to your social media channel.
3. Add Disclaimer: You can display a disclaimer on the results page.
4. Show Retake: You can enable this setting to allow users to be able to retake the content.

H. From the Design tab, you can upload a background image, and can choose the background image layout as well from the drop-down. In case you want to use a different background image on the mobile device, you can enable the toggle for Mobile Background Image. You can also configure the font settings for the result text and footer text.

I. From the Layouts tab, you can choose the layout that you would like to use to display the information on the results page including Results Text, Media, etc.

Here are some of the best practices that can be used while designing the results page in your content pieces:

1. Show Rich Results: To make the results richer, you can show multiple results instead of just a single number. For example, showing app development cost estimates by region adds to the analysis. Or while showing ROI, you can show ROI over 6 months, 1 year, and 2 years.

2. Use Images & Charts: Where possible, use graphics to make the user experience more appealing.

3. Show Comparisons: You can even show comparisons. For example, show a comparison between “how much would you save by using [company’s] products” and also provide a way to save the results if you feel this can be useful to the customer in future

4. Show Breakdown: Instead of simply giving a number, as a result, you can even try to showcase the cost breakdown of each of the line items in a quoting calculator for example. This can allow the user to see how each component impacts the price.

5. Have a clear call to action: Now that you have added value to the user think about what is the right next step for a user at that point and have a clear call to action on that page.

6. Provide Ranges: Services businesses like legal and software design will usually provide a range: cost is between $8K to $12K, instead of paying $10K. This reduces the risk of committing a specific price point to a user.

7. Have a Disclaimer: It’s good to have a short disclaimer saying that all results are not binding in any way and are simply estimates to be used for educational purposes. This way you are not guaranteeing anything in your content and you are not in question as there are different types of users and not all results can match their needs or expectations.

In case of doubt or discussion, you can also reach out to us at [email protected] and we will be glad to assist you further.