When UK retail giant Argos sought proposals to reinvent their famous — and famously thick — print catalogue in digital form, their main requirements were that the experience should be (1) innovative, (2) immersive, (3) work on tablets and desktop computers, and (4) retain the functionality of a standard e-commerce site.
In response, I proposed a unique “map” interface that was inspired by the idea of spreading the pages of the catalogue out into a flat, scalable and easy-to-pan grid system.
The primary design challenge: how do you make a flat interface feel as immersive and expansive as a paper catalogue?
The answer: find a way to communicate “scale” and “orientation”.
For example, the thickness of a paper catalogue is a visual indicator of its scale (that is, how big it is). But it also gives the reader a clue where the page they’re currently reading is located relative to the entire catalogue.
Translating these scale and orientation principles into a flat, two-dimensional space, the closest analogy is a map.
After starting the app (or website), the user is presented with a bird’s eye view of the structure of the catalogue.
Moments later, it automatically zooms in to reveal the “subcategory” view.
In the Subcategory view, the user can navigate the map by using the controls or swiping across the screen. Select a subcategory reveals products.
Each Subcategory “page” functions like a self-contained website containing a number of “sub-pages”. By default, sub-pages display products in grids or can be customised for greater visual design possibilities.
At the end of the buying process, users can use familiar e-commerce functions to complete their purchase.
The concept adapts easily to tablets and desktop computers.
More Design Work