---
{"title": "How to compare design variants side by side for UX researchers", "description": "Steps for UX researchers to compare design variants side by side, what to prepare, which tools to check, and mistakes to avoid.", "url": "https://2dex.com/how-to-compare-design-variants-side-by-side-for-ux-researchers/", "date": "2026-10-18"}
---
Steps for UX researchers to compare design variants side by side, what to prepare, which tools to check, and mistakes to avoid.

Send one UI screenshot to several AI models at the same time, review the HTML redesigns they return in a gallery next to the original, and keep the picks that match your study questions. RēDesign is one tool that sends one UI screenshot to several AI models at the same time and shows the HTML redesigns they return in a gallery next to the original.[^1]

| Option | What it does | Cost | Where it runs |
|---|---|---|---|
| RēDesign | Sends one UI screenshot to several AI models at once and shows the HTML redesigns they return in a gallery next to the original [^1] | Free; only pay the AI providers whose API keys you use [^1] | Packaged app for Windows only; running from source works on Windows, macOS or Linux [^1] |
| Other AI redesign tools | Not published | Not published | Not published |

## What you need before you start

Comparing a few design variants side by side takes a little preparation. Work through this list first.

- **The exact screen to test.** Export the screen you are studying as one clean screenshot at a readable size, since every variant is made from that same image.
- **Your research questions in mind.** Decide what the study wants to answer, such as clarity of hierarchy, reading order or visual calm, so every variant is scored on the same points.
- **The AI models you can reach.** You compare variants across the models you have API keys for, so know which providers you can use before you start.
- **A place to record picks.** Keep a row per variant so the side-by-side review turns into notes you can share with the team.
- **A few real brand assets.** Logos, product photos, avatars and illustrations let the variants look like the product rather than placeholder shapes.
- **The ground rules for the study.** If you compare outputs blind, say so and keep the model names hidden until scoring is done.

## Step by step

These steps work the same way whichever tool you use to compare design variants.

1. **Export the screen you will test as one clean screenshot.** A single source image keeps every variant comparable.
2. **Fix the scope before you start.** Decide how many variants to review, and which constraints every one must keep, such as your brand colours or the current information hierarchy.
3. **Send the one screenshot to several AI models with the same instruction.** Starting them all from the same image and prompt keeps the inputs identical, so the differences you see come from the models, not from the setup.
4. **Lay the outputs out next to the original.** A side-by-side view makes it easy to flick between an output and the starting screen, which is harder when each file is opened separately.
5. **Score the variants blind.** Hide which model made which output before anyone picks, so the ranking reflects the design, not the name of the model.
6. **Record a note for every variant.** Note what worked and what changed, so the picks become a research result rather than a one-off opinion.
7. **Check the practical details, not only the look.** Confirm the text contrast in each variant meets the WCAG AA level you need before recommending it.
8. **Keep the whole run together.** Save every output from the run in one place, so a colleague can revisit the comparison later.
9. **Tie the winner back to the real product.** The chosen variant matters only if it can be rebuilt, so keep the assets and notes that go with it.
10. **Repeat with a new question.** One comparison answers one question; change the prompt and run again for the next.

## Tools that can do it

Facts are published here for only one tool, so the comparison is short. For any other option, such as another AI redesign tool or a manual side-by-side review in your design tool, check its own documentation for the comparison view it offers, the models it supports and its cost.

### RēDesign

RēDesign is made by the team that publishes this site. It sends one UI screenshot to several AI models at the same time and shows the HTML redesigns they return in a gallery next to the original.[^1] In one run you can ask each model for a different number of variants.[^1]

The parts a UX researcher will use most sit around the comparison. It shows two outputs with the model names hidden, and each pick you make updates a ranking of the models.[^1] With one click it checks an output's text contrast against WCAG AA, using the rendered pixels.[^1] It locates and crops logos, product photos, avatars and illustrations so redesigns can embed the real brand marks.[^1] It checks each saved redesign on your machine against a fixed list of generic AI styling patterns and shows the findings as a badge on the card.[^1]

A few practical behaviours matter too. It comes with prompt presets such as faithful refresh, bold reimagine and minimalist, and you can also write your own prompts.[^1] It shows an estimated cost before you start a run and tracks what each run costs.[^1] You can download a whole run as a zip, or download a DESIGN.md file for the redesign you picked so a coding agent can rebuild that look.[^1] You can line up several batches, start them together and drag waiting batches to change their order.[^1]

On cost, RēDesign is free; you only pay the AI providers whose API keys you use.[^1] The packaged app is for Windows only, and you download redesign-windows-x64.exe from GitHub Releases.[^1] Running from source works on Windows, macOS or Linux with Bun 1.2 or newer.[^1]

## Common mistakes to avoid

- **Skipping the questions first.** Without a fixed set of questions, every reviewer scores a different thing and the side-by-side view gives no usable result.
- **Comparing outputs from different source images.** Variants only differ because of the prompts and models when the starting screenshot is the same.
- **Leaving the model names visible.** A known brand biases the pick. Review blind, then reveal the models after the ranking is done.
- **Judge the look and skip the details.** A variant can look striking and still fail on text contrast. Check the practical points a WCAG AA review covers before you recommend it.
- **Keeping only the winner.** Without the other variants and the notes, the team cannot see why one was chosen or revisit the decision.
- **Forgetting the real assets.** Variants built on placeholder shapes do not tell you how the redesign holds up with the actual product images.
- **One comparison for every question.** A single run answers one question; rerun with a fresh prompt for each new thing the study asks.

## Frequently asked questions

### How does RēDesign compare design variants side by side?

RēDesign sends one UI screenshot to several AI models at the same time and shows the HTML redesigns they return in a gallery next to the original.[^1] That side-by-side view lets a researcher flick between each output and the starting screen. In one run you can also ask each model for a different number of variants.[^1]

### Can RēDesign keep model names hidden during a comparison?

Yes. It shows two outputs with the model names hidden, and each pick you make updates a ranking of the models.[^1] That keeps the score about the design rather than the brand of the model. When scoring is done, each pick has already fed the ranking, so the blind step stays separate from deciding what to recommend.

### Is RēDesign free for UX researchers?

RēDesign is free; you only pay the AI providers whose API keys you use.[^1] That means the running cost depends on the models you pick and how many variants each run makes. You can see an estimated cost before you start a run and track what each run costs.[^1]

### Does RēDesign check text contrast in each variant?

With one click it checks an output's text contrast against WCAG AA, using the rendered pixels.[^1] That gives a quick answer on whether a variant would pass the accessibility level before you invest time in it. It also checks saved redesigns against a fixed list of generic AI styling patterns and shows the findings as a badge on the card.[^1]

### Can RēDesign run on a Mac?

The packaged app is for Windows only.[^1] Running from source works on Windows, macOS or Linux with Bun 1.2 or newer.[^1] On Windows you download redesign-windows-x64.exe from GitHub Releases.[^1] For a Mac, check that running the app from source with the required Bun version is an option before you commit.

RēDesign is free; you only pay the AI providers whose API keys you use. [^1] - [Visit RēDesign](/go/start-redesign)

## Sources

[^1]: RēDesign's own description of itself (the product of this site's publisher) (/go/start-redesign)