A product journey that works on a phone.
Give the product preview, the current choice, and the next step enough room to stay understandable on a small screen.
Keep the label, value, and unit together.
Make one decision easy to see
On a phone, a complex desktop interface can turn into a stack of tiny labels. Start with the choice the customer is making now. Keep its label, selected value, and effect on the product close together. Additional context can remain available without competing for the same space.
For dimensions, show the unit and the current value beside the control. For a finish, show a name as well as a swatch. A customer should not need to remember a previous screen to interpret the selection they are about to change.
Let the preview explain the change
A smaller screen does not need every visual detail at once. A product view can explain footprint or finish while a focused diagram explains a roof, side panel, or mounting arrangement. Choose the view that clarifies the current decision.
Keep visual changes and text summaries consistent. If the product cannot show a detail accurately, explain that boundary. A label or a simple diagram is preferable to an impressive image that appears to promise an unsupported specification.
Coordinate floating controls
Chat invitations, sticky actions, consent notices, and a mobile menu can compete for the same part of the screen. Review them together. A useful control should not obscure the product option, search suggestion, or primary action the customer is trying to use.
Give dismissible panels an obvious close control and preserve access to the main task. When a menu or dialog opens, check the focus order and how the visitor returns to their configuration. Reduced-motion preferences should leave the essential information readable.
Test the whole enquiry
Complete a realistic configuration and its next step at a narrow width. Try a long product name, an expanded option, a validation message, and the on-screen keyboard on a real phone where available. Watch where the customer needs to scroll back to find missing context.
Check the summary and enquiry as carefully as the preview. A responsive product image alone does not establish that the journey works. The final brief, contact fields, and confirmation should carry the same clear vocabulary through to the end.
Worked example: changing a pergola footprint
A hypothetical phone journey asks the buyer to adjust the width. The current measurement stays visible above the control, and the preview explains the footprint.
- Keep the updated value readable during interaction.
- Show which next choice depends on that footprint.
- Carry the same measurement into the brief.
Your review list.
- Keep the label, value, and unit together.
- Use text names alongside color swatches.
- Check menus, chat, and sticky actions together.
- Complete the summary and enquiry on a real phone.
See the next step
in Sales Visualizer.
Explore an illustrative experience, then review your own range and requirements with your team.
Try the illustrative product canvas