Product change modal

  • When users configure a computer on Dell.com, some selections may require changes to the configuration to support that selection, like a more powerful processor to support an upgraded graphics card.

    How can we inform users of these required changes, give them to agency to decide, and not present the information in an overwhelming way?

The interaction

A gif showing a user selecting a new processor. The change modal appears.

When a user selects a spec that requires different specs to support it, a modal appears.

  • We had an existing modal but received customer feedback that it was confusing. We ran a usability test on it and one user’s comment sparked an idea: they said they’d need to put the information in the modal into an Excel table to understand all of the details.

    The designer and I created a modal with a table that had three columns: 1) the spec type and the currently selected spec, 2) the new spec, and 3) the price change.

  • We presented both the original version and the table format to users and got a clear answer: over 90% of participants preferred the table. They found it easy to read and thought the information was laid out clearly, even if there were a lot of changes.

Before

The original modal. On the left side, it says "Processor: Intel i5 to Intel i7" and to the right "+ $80.00"

After

Another version of the table format with three columns: the current spec, the new spec, and the price change.