What belongs together?

Simplified redesign proposals based on two observed grouping problems in the Arngren catalogue. The shapes stand in for product images. These diagrams are not screenshots or working offers; names and prices below are illustrative.

Back to the observed screenshots and analysis

1. Proximity: keep each offer together

Weak separation

Bicycle

○—○

Electric assistance

Price A

Car jack

▰

Lifting tool

Price B

The gap between the two offers is smaller than several gaps inside each offer.

A clear item boundary

Bicycle

○—○

Electric assistance

Price A

Car jack

▰

Lifting tool

Price B

A larger gutter separates the offers. Each price stays with its own description.

2. Common region: one card, one offer

A boundary around several offers

○—○

Scooter / Price A

▰

Ride-on car / Price B

Vehicles for children

One outer frame groups several products; a category link sits at the bottom of the block.

A heading for the set, cards for the items

Vehicles for children

Scooter

○—○

Price A

Ride-on car

▰

Price B

The enclosing card identifies one product. The heading describes the whole category.