How to Design a Product Quiz With AI Prompts (No Design Skills Needed)
Short summary:
Most people don't get stuck building a quiz, they get stuck making it look like their store. This video takes a plain supplements quiz and makes it on-brand using only prompts in the AI design editor, without touching a single design setting.
Transcript:
- Most people don't get stuck building a quiz. They get stuck making it look like it belongs on their store. So in this video, I'm not going to touch a single design setting. I'll describe what I want in plain English and let the AI design editor do the rest. By the way, it doesn't have to be English. You can write your prompts in whatever language you prefer.
- This is a quiz for a daily supplements brand. It's built from a simple template: five questions, a lead page and a results page. The logic is wired and the products are matched. It works. It's just completely plain. That's the honest starting point for most people, and it's where things usually stall.
- So here's the AI tab, and here's my first prompt: "Improve my overall quiz design, make it nice and modern with a friendly vibe for a daily supplements brand." Colours, typography, spacing, applied everywhere at once. It tells you what it changed, and you see it live in the editor.
- That's the thing worth understanding. One prompt changed the entire quiz, not one page. You describe a direction, it gets applied everywhere, and then you narrow it down. Nothing is permanent until you hit save, so you can prompt as much as you like.
- So let's narrow. The palette is fine, but it isn't ours. I'll give it our brand colours as hex codes, and it applies them exactly, everywhere.
- Imagery, same approach: "Add imagery to the quiz where there are image elements. Find the most relevant ones." Those come from a free stock library, so they're cleared for commercial use. But if you've got your own photography, just upload it and describe where it goes: "Use this image on the get started page."
- Now the other direction: change one thing. There's more than one way to present an answer set: images, icons, a drop-down, a selection control or tabs. The trick is naming the question and the answer option type in the prompt. "On the energy levels question, update the answer options so they use images instead." Only that question changes. I repeat the process to use a drop-down on the health goal question: "On the current health goal question, make the answer options a drop-down."
- The lead page gets the same treatment. Adding a field: "Add a phone number field to the lead page." And for the design, you can be as loose as you like: "Make the lead page look better." That's actually all it needs.
- The results page is where being specific pays off, simply because there's a lot on the page. "Remove the social media sharing element from the results page." And "Change the results page layout to recommend two products." Page, element, change. If a prompt isn't landing, one of those three is missing.
- Now, mobile. I wouldn't skip this, because most of your traffic is on a phone. "Optimize my quiz for mobile. Make sure all questions look good on this device." It goes through every page, question by question, adjusting the layout for a mobile screen.
- Here's how it looks on the phone, from start to finish. Get started. Main health goal. Energy levels. Sleep quality. What I take. Budget. The lead page. And the results: products matched, on brand, ready to convert.
- Same quiz we started with. Same questions, same logic. The only thing that changed is that I described the design I wanted.
- If you want to try it, there's a free trial link just below. And if you've got a quiz that works but looks like a form, now you know how to fix it.
Description:
- One prompt restyles the entire quiz at once: colours, typography and spacing on every page
- Add your brand's hex codes, stock images cleared for commercial use, or your own photography
- Change a single question's answer type, like images or a drop-down, by naming the question in the prompt
- Finish with one prompt to optimize every page for mobile