Bring these inputs
Screenshots, brand components, product facts and a prioritized usability finding.
Use approved, minimized data. Replace personal details with anonymous IDs.
Work through the lesson
- Write the customer task and the obstacle. For example: shoppers cannot tell whether a container fits their shelf.
- Ask Claude’s available design capabilities or Figma Make for two ways to present the same verified information. Supply brand styles and content constraints.
- In Figma, refine hierarchy, responsive layout, focus states, readable type and component behavior. Treat generated screens as a starting point.
- Run a task-based session with representative shoppers. Ask them to find the dimensions and decide fit without coaching.
- Give development an annotated specification, assets, acceptance checks and analytics needs. A prototype is not a working payment or inventory integration.
Try this prompt
Replace the bracketed fields with your own evidence.
Design two mobile product-page concepts for [task] using [facts, screenshots, styles]. Preserve claims and pricing. Show how a shopper finds fit, delivery and returns. Include loading, unavailable and error states. List accessibility and implementation checks. Do not simulate a successful purchase as a real transaction.
Worked example
Put a dimension diagram beside the size selector and test whether shoppers can answer the fit question. A prettier layout alone is not evidence of improved conversion.
Before you use the result
- Real shoppers attempted the task.
- Keyboard and small-screen behavior are specified.
- Developers can distinguish prototype behavior from integrations.
Complete the exercise
Create the deliverable described at the top of this lesson. Save the input evidence, your edited output, unresolved questions and the name of the reviewer in your workbook.
Official tool references
Tool references checked October 24, 2026; GPT-6 Astra guidance updated October 25, 2026. Workflows are teaching exercises, not vendor guarantees.