This article describes how you can use the Web Editor's generative AI capabilities to produce variant designs based on the variant description.
Describe the variants you want to test and let the AI do the rest.
Do you want to alter the rendered design? That's okay, too. You can regenerate the variant with an updated description.
Download and install the Web Editor to start using the generative AI features.
Table of Contents
- Getting started with the Web Editor
- Creating a project in the Web Editor
- Creating contexts & components
- Creating variables
- Creating variants
- Working with generated variants
- Troubleshooting
Getting started
Open the Web Editor and click the user icon in the top-right of the screen to log in.
- Use your Evolv AI Manager credentials.
You're ready to create your first project and start building variants.
1. Creating a project in the Web Editor
What is a project?
Projects are designed to organize ideas and optimize a specific audience and metric.
- Projects can have multiple contexts.
- Contexts can have components and variables.
- Variables must have variants that change the design of specific components.
The following diagram illustrates the anatomy of a project.
How to create a new project
Click New Project from the Web Editor home screen to create a project, or use the File menu.
When the project opens, you can name it by clicking the Settings icon in the top right of the window.
2. Creating contexts and components
What is a context?
Contexts define the type of page or pages on which a particular set of variants can be rendered. A context is primarily defined by URL domain and path-matching criteria.
For support in creating more advanced context definitions, especially those in single page applications, contact your Evolv AI representative.
Here are some examples of contexts you might create.
- Homepage
- Landing page
- Product Listing Page
- Product Detail Page
- Add to Cart Confirmation Dialog
- A step in an interactive wizard
Learn more: About Contexts
How to create a context
- If this is your first context, use the Create a New Context button or click the "+" icon next to the Contexts panel on the left.
- Enter the URL of a page that matches the context you want to create and press enter to load the page.
- Click CREATE CONTEXT to open the context panel.
- Give your context a name and adjust the domain and path-matching options if required.
- Click SAVE to finish creating your context.
For more information on creating, editing, and deleting contexts, see How to create and edit contexts in the Web Editor.
What is a component?
Components are the elements of a page that a variant may change. A component is defined by a selector and can be hierarchical.
Examples of components include:
- Headlines
- Hero images
- Add to Cart Button
- Navigation menus
- Content sections and columns
- Interactive Dialog containers
Learn more: About Components
Naming components
By default, the component is given the name of the HTML element associated with the selector. You can change the name by clicking the component name in the Components panel on the left or at the top of the component Styles palette on the right.
Best practices for naming a component
Make component names distinct from one another. This will allow the AI to understand your intent better when describing variables and variants.
For example, instead of naming a component "Heading," be more specific about which heading it is, like "Product Heading."
If you have a variable that is changing the heading of the product detail page and another variant changing the heading of one of the product options, then you'll want to name these heading components distinctly, such as “Product Heading” and “Product Option Heading.”
Creating components
- Select a context from the list, then click the inspect tool
below the address bar or in the Components panel.
- Hover the mouse over the web page to highlight the element you want to use.
- Click on an element to add it as a component.
- Sometimes, the element you really need might be different to the one you clicked.
- Right-click the element to help you find the right selector.
- Hover over the options and see the highlighted element changes on the screen.
- Rename the component or change its selector as needed.
Important: Changing the component’s selector should be done by someone familiar with HTML and CSS experience.
For more information on creating, naming, and deleting components, see How to create and edit components in the Web Editor.
3. Creating variables
What is a variable?
Variables represent an aspect of the design that can be tested to see if it's able to have an impact on your optimization metric. A variable can be a hypothesis you want to test.
In practice, a variable includes a component and the characteristic of the component that will be tested.
Here are some examples of generic variable descriptions.
- Hero headline text
- Hero headline font size
- Hero headline location
- Hero image variation/source
- Checkout button background and text color
Here are some examples of hypothesis-based variable descriptions.
- An Add to Cart button that is located above the fold will be more obvious to users and increase conversions
- Savings-focused value propositions that have a prominent appearance will stand out to prospective customers and increase sign-ups
- Checkout flow that excludes unnecessary steps will reduce distractions and increase conversions
Learn more: About Variables and Variants
Create a variable
In the Web Editor, variables are organized by context, and a context can have zero, one, or many variables.
-
In the Contexts panel on the left, move your mouse over the context and click the plus (+) icon on the right of the highlighted row, or right-click the context and select Add Variable.
- Enter a name in the empty field and press enter on your keyboard.
For more information on creating, editing, and deleting variables, see How to create and update variables in the Web Editor.
4. Creating variants with generative AI
Before adding a variant, adding all the components you want to test with is important. The AI uses these components to generate your design.
- Create a variant by hovering the mouse over a variable in the list and clicking the "+" icon, or right-click the variable and select Add Variant.
- Enter the variant description and press enter.
- For this example, we use the description, "Change hero text to 40pt font size and the font color to #ff7a41".
- "Hero Text" is the name of the component we created earlier.
This is when the magic happens!
When you click the Generate Variant button, the AI will take the variant name or a more detailed description you have entered and generate code to render it in the web view.
Here's how it looks with the example we used in the previous step. Note the orange text with a 40pt font size.
Refining a variant design
You can continue to refine a variant design by updating the variant description.
If the AI cannot produce the variant to your specification, review the Troubleshooting section to see if you need to change your components or variant description.
If you’re familiar with HTML, CSS, and Javascript, you can try using the Code editor to refine the design.
Tips for working with generated variants
The AI will try to understand your intent by considering all the descriptions in the variable hierarchy. You can improve the accuracy by being clear and explicit in your descriptions.
Make component names distinct from one another
Distinct component names allow the AI to understand your intent better when describing variables and variants.
| Example Component | Good Description | Poor Description |
| "Add to Cart Button" | "Primary Button" | |
| "Add Item Button" | "Secondary Button" |
If you intend to change only the “Add Item” button, naming the component “Secondary Button” can be confusing if there is more than one secondary button on the page.
However, you may create two components targeting the same element. One could change the text on a particular instance of the secondary button, and the other could change the color of all secondary buttons.
Describe aspects of the design you want to change and use component names
Whether you're describing variables or variants, be explicit about the design aspect you want to change, and use the names of the components you created.
Here are some examples of different aspects of the visual design.
|
|
|
Here are some examples of interaction design aspects.
|
|
Describe what the variant should look like
Variable: Add to Cart Contrast
| Example Component | Variant Description |
| |
(Control) |
| |
1.1 Add to Cart button is #CC0000 with bold text. |
Expert Tip
Add a description for the control variant to accurately record the original design to aid you during later performance analysis.
Troubleshooting
Your variants may not always render the way you expect, or at all.
Try these strategies to help the AI understand your meaning and render the variant design successfully.
- Check that the component you’re referencing exists.
- For example, you may be describing a component that hasn’t been added to your Components list or using a different name for the component.
- Check that your component's selector is targeting the correct HTML element. Ideally, you want to choose the element with the style you want to change.
- For example, you may be trying to change the text on a component, but the selected component doesn’t contain the text you’re trying to change. That text may belong to another element.
A button may be structured like so: <button><span>Add to Cart</span></button>.
If your Add to Cart button component uses the button selector, you won’t be able to change the text in the span element.
- For example, you may be trying to change the text on a component, but the selected component doesn’t contain the text you’re trying to change. That text may belong to another element.
- Include more details in your description.
- Instead of “headline 36px”, try “headline font size is 36px.”
- Use specific units for dimensions.
- For example, “font size 36px (or 3em)” or “image size is 50% smaller.”
- Use HEX values for colors.
- For example: #FF0000. You can use this Google Color Picker, or use the Developer Tools in your browser to look up the color HEX values on your website.