Testing AI with Real Design Scenarios: Evaluation Methodology and Prompts - NN/G

Introducing NN/G Membership | Access all self-paced courses for $249 per year | Join by Jan. 26, 2027 |
Find the training option that fits your learning style.
October 24, 2025 2025-10-24
To simulate realistic design context, we defined 2 scenarios we faced in our ongoing design workflows at NN/G:
We share the findings of this evaluation over a series of articles:
All the designs generated by the AI prototyping tools tested are included in a FigJam board.
The evaluation took place in 3 key phases: writing prompts, generating designs with AI, and assessing AI-generated designs.
We used a real design context to develop the prompts used in our evaluation. We started by gathering design requirements and artifacts (hand-drawn sketches, design mockups, and Figma files) from these projects, and turned the information into AI prompts following prompting best practices. To keep the testing setup consistent and ensure results were comparable, we used prompts that included all necessary context. To compare design variations within the same tool, we added a second followup prompt within the same conversation:
“Create an alternative design with a distinctly different layout. Keep the same context. Do not modify or change the content.”
We ran those prompts through each AI tool and collected the outputs. In some cases, we reran the same prompt in new chats to produce additional variants. All designs were placed on a FigJam board so we could review and compare them side by side.
We conducted heuristic evaluations to assess the AI-generated designs. Each design was evaluated through the lens of the main tasks to identify design elements, features, or decisions that violate the defined criterion. We also compared the AI-generated design to real designs created by NN/G designers without using AI.
We ran each prompt across 3 categories of AI prototyping tools that we considered to be most relevant to a designer’s workflow.
Primary design output
Static wireframes or design mockups with limited interactivity
UX Pilot, Figma First Draft, Uizard, Stitch (formerly Galileo AI), Relume
AI-assisted (vibe)coding
Interactive code-based prototypes
V0, Bolt, Lovable, Replit, Figma Make, Magic Patterns, Subframe
General-purpose AI chatbots
Note: We did not include AI code editors (such as Cursor and Windsurf) or command-line interfaces (such as Claude Code) as these tools require more technical setup and extend beyond a typical designer’s workflow.
To match our testing to real design scenarios across various stages of the design process, we created 4 types of prompts with various degrees of input specificity while maintaining the same context and request.
You are a senior product designer at Nielsen Norman Group, a UX research consultancy that offers live online training on UX topics. Your task is to design a profile page in the desktop viewport for course attendees participating in online training. The page should allow attendees to view all the courses they’ve taken, access downloadable course materials for each course, check the status of summative course exams, and track their progress toward UX certification.
You are a senior product designer at Nielsen Norman Group, a UX research consultancy that offers live online training on UX topics. Your task is to design a profile page in the desktop viewport for course attendees participating in online training. The page should allow attendees to view all the courses they've taken, access downloadable course materials for each course, check the status of summative course exams, and track their progress toward UX certification. ## Page Components ### 1. Certification Progress Panel: Show progress towards the following certifications: - UX Certification: Requires completion of 5 courses. - If the certification is completed, show users how to access the certification.
- UX Master Certification: Requires completion of 15 courses. - Specialty Progress Breakdown: - Interaction Specialty: Requires 5 interaction-specific courses. - Management Specialty: Requires 5 management-specific courses. - Research Specialty: Requires 5 research-specific courses. ### 2. Course History Section: Display a list of all past live online courses taken by the user. - For each course, include: - Course title - Specialty (Interaction, Management, Research) - Exam deadline (if applicable) - Remaining exam attempts (3 attempts max) - Course material access (including material password) - Exam status: - Passed/Failed indicator - Option to take or resume the exam, if applicable - Consider various course scenarios: - If the exam deadline has passed, display a message indicating the exam is no longer available. - If the user did not take the exam but is eligible to purchase an exam extension, provide a purchase link. - If the user failed all three attempts, display an option to retake the course at a discounted price. - If the user needs to purchase an exam credit to take the exam, display a link to purchase. ### 3. Exam Credits Component: - Show the number of available exam credits. - Provide a purchase option for additional credits if needed. ### 4. Course Sorting and Filtering: Allow users to sort their courses by: - Specialty (Interaction, Management, Research) - Exam progress (Pending, Passed, Failed) ## Design Language ### Visual Style - Mature - Balanced - Trustworthy - Clear
- Research-driven - Practical ### Colors - Primary button color: #002AF6 - Secondary colors: - Interaction specialty: #FFD914 - Management specialty: #42C556 - Research specialty: #8952FF - UX Certification: #4D0001 - UX Master Certification: #BB181C - All colors and elements on the page should meet WCAG AA accessibility standards ### Shapes & Icons - Interaction specialty: Triangle - Management specialty: Square - Research specialty: Circle ### Typeface - Source Sans
3a - Hand-drawn wireframeYou are a senior product designer at Nielsen Norman Group, a UX research consultancy that offers live online training on UX topics.