A visual study on systematising content formats for mobile

Designers Clementine Jinhee Declercq and Michael Feeney provide insights on how to build a design system for your visual content for mobile.

E-commerce platforms like Zalando have to produce a lot of visual content for the products they sell, outfits they create, categories and sales they promote, and marketing campaigns they launch. A huge variety of content and visuals are displayed and frequently updated, on the windows of our digital stores every day.

Here are some of the different formats that exist in our content landscape at a glance.

This visual diversity poses a few challenges for product designers, whose role it is to create a consistent interface design solution. Each piece of content must look appealing whilst remaining true to its original purpose.

Here are some design challenges we observed:

• Disparate formats: Visual content includes images and videos, which come in all sorts of aspect ratios like 4:3, 16:9, 1:1…the list goes on.
• Diverse content use cases: While a Black Friday sale image aims to promote the event across the site, product images — of a pair of sneakers for example — aim to show the item’s details from various angles.
• Scalability: All content should be shown across our store’s digital touchpoints; on the home page, catalogue page, product details page, all the way to email newsletters.
• Consistency and appeal: As well as looking great, images have to look consistent on mobile device screens across platforms (Responsive Web, iOS, Android)
• Demand for efficiency: Content managers and creators frequently request multiple design solutions from product designers.

Considering these challenges, which formats should we choose for which visual content? How big should they be on the screen? Should they be big, small, rectangular or square? Should we have one format that works for all content use cases or should there be more than one? What’s the rationale behind such decisions? And how can we ensure that the design solutions we choose are consistent and scalable across the site?

In order to answer these questions, we looked at ways to systematise how we display our visual content — primarily on mobile devices since a significant amount of it is viewed on phones nowadays. Here are some of the steps we took.

Building a scalable system from a base aspect ratio.

The aspect ratio of an image is the proportional relationship between its width and its height. At Zalando, we have a defined aspect ratio for our product imagery. It is our safest aspect ratio, a format that we know won’t change.

If we go full-screen on an average mobile, this is how it looks:

You can see that it is shown in a vertical format.

From here, we used it as a base ratio to develop a system using a mathematical approach. We divided the base ratio by 2, 4, … to create blocks that look like this:

As a result, new formats were created: two-thirds of the portrait, half of the portrait, one-third of the portrait etc.

So, what could we do with them?

Understanding the visual effects that each of these formats creates on a mobile screen.

Let’s take this image and apply the different formats.

Visual Effect 1: As you can see above, the image is more impactful in full-screen mode if it has a portrait format. “Impactful” because it complements the vertical form of the device and covers the whole screen — immersing you and holding your attention. You just can’t miss it.

At the other extreme, accommodating the landscape format within the screen diminishes the visual effect — the image loses its powerful presence on the screen and is reduced to something more discreet and functional.

Visual Effect 2: if we take the portrait format and divide it into smaller blocks, this is how it looks.

As the screen fills with multiple small images it becomes crowded and grows “louder” visually. It does, however, have the benefit of allowing you to view a lot more images in the same frame.

To sum this up, we came up with the following axis diagram to sort all the differently sized formats according to their visual effects: visual loudness (horizontal axis) and visual impact (vertical axis).

The blocks in section A have a high visual impact due to their screen coverage. The visual effect is reduced as the blocks take on a landscape format in section B.

The blocks in section C create a screen that is visually louder. Multiple visuals are shown in the frame. However, as the blocks in section D become smaller their loudness is reduced.

Let’s now look at some examples to better understand the implications of these effects when applied to concrete visual content cases.

Matching the formats to the content goals and vice versa.

• Example 1. For any visual content that requires an inspiring and immersive experience, go for a full-screen portrait format. In this example, the beautiful campaign imagery takes over the screen, inviting the viewer to swipe through the images one at a time without any other content-based distractions.
• Example 2. An almost square (or 1:1) format lets you highlight visual content without overwhelming the viewer by filling up the viewport like in the first example.
• Example 3. For content that’s not too in your face, opt for a landscape format. In this sales banner example, the aim of the visuals isn’t to create an awe-inspiring experience, but rather to inform.
• Example 4. Smaller-sized images work best if you want to make a large amount of content visible, like in a product catalogue. It’s also a great way of providing a navigational overview of different categories.

• Example 5. Extra small blocks divided into columns are suitable for visual thumbnails which show, for instance, how a product looks from various angles at a glance.
• Example 6. Extra small blocks in a landscape format are ideal for any visual content with a navigational purpose since the visual effect is more functional than stylish.

You can see above how one single image can be adapted to different formats in a systematic way to satisfy different use cases: sales banners, background images, collection teasers, catalogue teasers etc. And these are just a few examples among many, many others.

The decision to go for certain formats in certain sizes depends on the goal you want to achieve through the visuals and their content use cases: Is the goal to inspire? To inform? To ease navigation? To provide an overview? To increase the visibility of your content? Form will also play an important factor — will you focus on the form factor of a mobile like this study has or something else?

Once you’ve answered these questions, think about how you can systematise the way your platform shows content using a similar approach. Make sure to ask yourself if your platform even struggles with similar challenges, and if it actually makes sense to systematise.

If it does, then be creative! Have fun with your blocks, and try creating compositions and interactions that would work for your content use cases. Hopefully, this can help clarify your visual goals. Good luck!