The Problem
Amazon's website is probably well known to most of us, however, it's the familiarity that belies details which would otherwise bother us.
With a critical eye, it's easy to notice how dense everything seems, even though there would be enough free space - after all, pixels are free.
On the other hand, of course, there's the trumping argument of success, somewhere much of the website will be solidly justified by A/B testing. But that shouldn't stop me from questioning some of these decisions.
Design Process
My work starts with basic questions regarding the layout and the underlying information structure Amazon has grown over the years.
My main arguments against the current layout are aimed at the typography in conjunction with layout spacing.
Most of the text is set relatively small with narrow line spacing, resulting in reduced readability. Some elements are close to each other and enjoy only very sparse spacing from the other elements.
Typography
In order to stay true to Amazon's style and not produce anything completely unrealistic, I'm sticking with the house font Amazon Ember. It's a friendly humanistic font, which is unfortunately set densely by default and gives its letters little free space.
Hinting ensures readability even on very low-resolution displays, according to Amazon, although the question arises as to what extent this is still necessary nowadays.
I give almost all elements two sizes on top, so we can enjoy 20 point font size for reading text and 18 point for smaller elements.
Left: Original formatting
Right: Improved readability due to bigger line height and more letter spacing
Variants
Some of the variations are based on changes to the information architecture, rather than purely typographic adjustments.
For example, an interesting usage resulted for the randomly selected product shown in my screens: The vendor apparently misunderstood the "Select Style" function and offered combinations of products for purchase there.
I dealt with this real problem in the following and tested variants.
Style selection with boxes containing pure typographic descriptions without images.
Style selection with boxes containing descriptions and images, to clarify which products are referenced by the descriptions.
Outcome
The final version combines many improvements I worked out and tested along the way.
These include typographic interventions, such as a better letter spacing in the font, a higher line spacing and generally larger typography for improved readability – but also layout decisions, such as tidying up the content of the purchase box on the right.
The description and the selection of the product now have more space, in addition, the purchase options are sorted and arranged more sensibly.
The section Often bought together could slide higher up due to the white space gained and still looks delicate.
The final version containing all optimizations for readability, layout and overview.
Reflexion
Redesigning and noticeably improving such a familiar service requires both subtlety and an almost tactical approach.
The project held a very nice balance between challenge and potential which I now count as one of my favorite projects. Although I faced numerous problems – like Amazon's endless A/B testing, which often changed my starting point – I was able to overcome all of them with persistent testing.