AI variation development agent

Write explicit and precise prompts to Optimizely Opal. Adding more context to your prompts leads to better results.

Example

• Initial prompt – Create a 24-hour countdown timer. (This might reset each time the page reloads.)
• More specific prompt – Create a countdown timer that counts down to July 24, 12:00 a.m. GMT. (This ensures the timer functions as expected, counting down to a specific date and time.)

Instead of just telling Opal what to do, explain why you want it done. This helps Opal understand the underlying goal and generate more effective and relevant variations.

Example

• Initial prompt – Change the button color to blue.
• More specific prompt – Change the 'Add to Cart' button color to a vibrant blue to increase its visibility and encourage more clicks. (This clarifies the objective of increased visibility and click-through rates.)

If there are any design system rules, brand guidelines, or technical limitations, communicate them clearly. This prevents Opal from generating variations that are unusable or off-brand. You can also use Instructions to help guide Opal.

Example

• Initial prompt – Add a new heading here.
• More specific prompt – Add a new H2 heading above this section, using the 'Optimizely Blue' color and 'TT Commons Book' font, as per our brand guidelines. (This incorporates specific brand constraints.)

AI-generated variations might not be perfect on the first try. Provide feedback on initial results and refine your prompts to guide Opal to the desired outcome.

Example

• Initial prompt – Make the headline more engaging.
• Opal response – Here's a new headline: 'Unlock Your Potential Today!'
• Refinement prompt – That's a good start. Now, make the headline more benefit-driven and include a sense of urgency, similar to the tone of our 'Cool-girl confident' voice pillar. (This guides Opal to a more specific tone and benefit.)

Prompt Opal to think about the end-user experience. Encourage requests that improve usability, readability, and accessibility for all visitors.

Example

• Initial prompt – Add some text here.
• More specific prompt – Add a short paragraph of explanatory text here, ensuring it has sufficient contrast for accessibility and is easily scannable for users on mobile devices. (This emphasizes UX and accessibility considerations.)

Sometimes it is clearer to tell Opal what not to do, especially if you encounter undesirable outcomes.

Example

• Initial prompt – Add a pop-up for our newsletter.
• More specific prompt – Add a newsletter signup pop-up, but ensure it does not appear immediately on page load and is not intrusive; perhaps trigger it by exit intent. (This prevents common UX pitfalls.)

Quickly adjust the appearance and behavior of existing website elements to align with campaigns, branding updates, or performance goals.

• Brand consistency – Apply specific brand colors, fonts, or styles to text elements, buttons, or entire sections with a simple prompt.
  • Example prompt – Change all primary call-to-action buttons to Optimizely Blue (#0037ff) and use the 'TT Commons Demi Bold' font.
• Dynamic effects – Enhance user engagement by adding interactive or animated styles to call to actions (CTAs), banners, or other interactive components.
  • Example prompt – Update the 'Shop Now' button to include a subtle hover animation and a slight shadow effect.
• Seasonal and thematic updates – Effortlessly adapt your website's look and feel for holidays, promotions, or special events.
  • Example prompt – Adjust the website's main banner for a Christmas-themed campaign, incorporating festive imagery and a snow effect.
• Batch element updates – Apply a consistent set of changes (for example, styling, text modifications, or attribute updates) across multiple similar elements on a page simultaneously, based on their type, class, or other identifying characteristics.
  • Example prompt – Apply a subtle grey background (#f5f5f5) and a 1px solid light grey border to all Buy now buttons on this page.

Refine and restructure your on-page content for better readability, conciseness, or impact, ensuring your message resonates with your audience.

• Information decongestion – Transform lengthy paragraphs into concise bullet points or summaries to enhance user comprehension.
  • Example prompt – Convert this product description into three key bullet points highlighting its main benefits.
• Text refinement – Adjust the tone, length, or clarity of any text content to match specific campaign objectives or audience segments.
  • Example prompt – Make the headline more concise and impactful, focusing on urgency.
• CTA optimization – Generate compelling and clear calls-to-action that encourage conversions.
  • Example prompt – Suggest three alternative phrases for the 'Learn More' button that emphasize immediate value.

Introduce new functional or promotional elements to your webpage to capture attention, provide information, or drive specific actions.

• Promotional banners – Add "butter bars" or sticky banners for sales announcements, limited-time offers, or important alerts.
  • Example prompt – Add a prominent banner at the top of the page announcing a 20% off sale, with a countdown timer ending on December 31st.
• Interactive widgets – Integrate new interactive components like countdown timers, searchable frequently asked question (FAQ) sections, or social proof elements.
  • Example prompt – Insert a customer testimonial carousel below the hero section, featuring positive reviews.
• Visual storytelling – Generate and place images to support your content, creating different scenes or showcasing products from various angles.
  • Example prompt – Replace the current product image with a variation showing the smartwatch from a different angle, perhaps on a person's wrist.

Explore multiple design directions and optimize page layouts for improved user experience, visual hierarchy, and conversion rates.

• Layout suggestions – Receive AI-driven recommendations for improving the arrangement and presentation of elements on a page.
  • Example prompt – Provide suggestions to improve the menu layout for better navigation on mobile devices.
• Variant generation – Quickly generate multiple distinct design variations for a specific page section or an entire webpage based on a theme or objective.
  • Example prompt – Generate three different variants for the product listing section, focusing on a minimalist design, a grid layout, and a featured product highlight.
• Full-page redesigns – Experiment with new page designs or themes to test radical changes and discover optimal user journeys.
  • Example prompt – Redesign this entire product page based on a 'modern and clean' aesthetic, prioritizing product imagery and clear pricing.

Create and refine variations directly within the Visual Editor, supporting continuous optimization cycles.

• Building on success – Create variations based on existing successful ones, letting you continuously refine and improve high-performing experiences.
  • Example prompt – Take the current winning variation of the checkout page and create a variant that simplifies the shipping information section.
• Personalized experiences – Develop tailored content and layouts for different audience segments, ensuring relevance and maximizing impact for each user group.
  • Example prompt – Create a personalized hero banner for returning customers that highlights recently viewed items.