Solving the Logo Soup problem


Logo soups from clutter to clean

April 7, 2021 | Daniel Sturman

Companies love to show off all the great clients they have by putting all their logos in a big graphic.
We call this a logo soup

Logo soups are those walls of logos that companies use to show off their fanciest clients. Logo soups are the ultimate “show, don’t tell” way to communicate legitimacy and maturity, saying both “look who we can keep happy” and “look who we are in leagues with”. The first thing any company does when they bag their first fancy client is put the logo in a soup.

Big companies have lots of clients, and that means lots of logos in their logo soups. And that is where things can become messy. Literally. A row of five logos will always look neat. But displaying a cloud of 20+ logos? That’s a thick soup.

An image that displays how nice five logos in a horizontal line will always look clean and simple, and how many logos will start to look more and more cluttered.

A cluttered, messy looking logo soup is undermining the aim of coming across as a slick organisation that warrants the custom of so many great clients. 

Empathising.

It’s certainly true that many a logo soup looks more like a headache than an orderly list, but why does that have to be so?

After all, logos are typically simple shapes and are typically designed to scale well, so what’s the problem?

The problem, so it turns out, is that while logos are often simple shapes, they are not all the same shape. And what this means in the multitude is that they don’t occupy the same amount of space, and this means there is no obvious way to stack them. A whole bunch of random logos do not suggest a satisfying layout like a grid, and this makes designing logo soups hard to pull off, as the designer isn’t so much finding order as playing Tetris. 

Logos are not the same shape.

On top of this, there is another level of complexity put onto the designer – one of scale and balance. When trying to bring two logos up to the same size, it’s not particularly obvious where to begin when they are different shapes. Also, the designer can feel guilty when making one logo appear smaller than the other; as if inviting a judgement of importance between the two clients.

How can you really make things the "same size" when they are fundamentally different sizes?

The problem is that not all logos occupy the same shape, which means designers have no uniformity to work from

Defining.

We looked into where we have seen logo soups done, if not done well, for some inspiration.

A personal favourite of mine was the sticker-bomb style of logo use you see in motorsports and on the cars. More porridge than soup for sure. Another common place to see logo soups is the photo-wall at an awards do. These are much more at the sophisticated end of logo soup design and very much stick to a grid. Without doubt, some sort of grid was the way to go. 

We brainstormed around various types of grid, some with different size columns, some more like Pinterest cards. But in so doing we realised that giving options was not addressing the sizing problem. Giving designers a way to work with different size logos was not tackling the fact that sizing logos was a point of contention. 

Like most things in life, simplicity was the solution. A grid in which every cell was the same height and width meant that all logos have their place, and all logos are compelled to have their size. 

Through ideation we identified the simplest way of maintain uniformity when designing logo soups

With a solution in mind, we built a prototype.

At Brew we use the digital design software Sketch. Sketch has a wonderful pair of features called Symbols and Libraries. Symbols are graphics you can duplicate many times but only need to editing from once from a central location, and libraries are a way of packaging symbols so you can import them to use in any file you are working on. Within Sketch we use these features to build a little system to assist designers in producing logo soups.

The system is:

1. Populate a Sketch Library of the logos you need. Every logo should be dropped into a symbol artboard with a fixed ratio of 2:1, with the logo centered and resized until either the top and bottom or left and right sides meet the edge of the artboard.

2. Import the Sketch Library to a new document to create a logo soup. Knowing you have a set number of logos, and a set space, use some maths to work out the ideal grid that is made up of cells with a 2:1 ratio, plus padding. 

And built a little system using the magic of Sketch symbols and Sketch libraries

With the prototype ready, we put it out to test.

We set three of our designers the task of making a logo soup each using a random space, and a random number of logos, using only the system as described in the prototype. The logos were supplied as a zipped up file of 30ish random logos. 

All designers completed the task quickly and the results were pretty great. 

Their feedback was that the process was simple and the removing the job of scaling the logos by eye removed a problem point that would have slowed them down a lot, for very little gain at the end of the process. 

The results speak for themselves. The logo soups are less cluttered, and are very easy to produce. 

The success of this project is down to the nature of how we approached it.

We used empathy to understand the goal, then defined what needed to be improved, then put some ideation time around finding improvements, then built a prototype and tested it. The empathy > defining > ideation > prototyping > testing formula, often called “design thinking”, is the foundation of innovation and it’s how we at Brew tackle all of our challenges, be they on behalf of our clients or in our own day-to-day work.

Here’s how design thinking got us a new system for making logo soups easy:

Empathy taught use that that logo soups needed a cleanup

Defining helped us identify the heart of the problem

Ideation helped us come up with some solutions

Prototyping gave us something to test

And testing confirmed for us that our ideation had been successful.