SynthMock
A before-and-after image should let the interface change explain itself. Keep the presentation conditions comparable instead of giving the newer version a more flattering scene.
Try it in SynthMock
Start with a Duo scene.
Use a reusable template as your starting point, then apply the choices in this article.
A paid plan is required to use templates and export.
Hold the setting still
Use the same Duo finish, fold angle, camera, background and light for both revisions. Keep the source task and selected item comparable too. A new screen shown closer to the camera with a brighter reflection may look more polished for reasons unrelated to the redesign.
Match the amount of content where possible. Comparing an overloaded old state with a carefully emptied new state can confuse a content change with an interface improvement. If the redesign intentionally changes what is shown, explain that decision in the caption rather than hiding it inside the mockup.
Write the comparison criteria in advance
Choose a small number of visible questions. A render can support discussion of layout and emphasis, but it cannot independently prove task success or business impact.
| Question | Visible evidence | Separate evidence needed |
|---|---|---|
| Is the selected item easier to locate? | Hierarchy and selection treatment | Actual user performance |
| Is the wider view more coherent? | Grouping and spatial relationships | Behavior across real screen states |
| Is the feature represented truthfully? | Approved source and labels | A working product or prototype |
Use matched stills before animated comparisons
Place both stills side by side at the same display size. If the difference only becomes apparent after zooming into the new version, add equivalent detail crops for both. Keep the labels clear and avoid a transition that gives one revision more viewing time without a reason.
A proposed motion comparison can reuse an identical camera path with only the source artwork changed. Before publishing, check every frame for source consistency and make sure neither version receives a different lighting treatment. Describe the actual change in plain language: a consolidated navigation area, a clearer selection, or fewer competing panels. Reserve words such as faster or more effective for outcomes that have been measured elsewhere.
Final pass
Before you call it finished
- Match scene settings and source context.
- Provide equivalent detail crops when necessary.
- Describe observed visual changes without inventing user outcomes.
Make the next version yours.
Explore Duo templates ↗