Design Matters: Why Less Is More for Icons

Icons are designed to be simple, modern, and helpful. An icon reduces the subject it’s representing to its most basic form, communicating information to the viewer quickly, and with minimal detail. When dealing with large amounts of varied information, like a recipe catalog, you have to take into account what you’re trying to represent, and who you’re trying to represent it to.

In the Fresco app, we’re representing food to a global audience, and the importance of offering a common visual language that transcends cultural and geographical differences becomes even more urgent. Choosing to use iconography isn’t an easy decision. Tests have shown that consumers often only remember the meaning of a small number of icons (gears for settings, a magnifying glass for search, all those ones that you tap without thinking twice about), which is why a combination of icons and text labels is best practice for clear communication.

We’re representing food to a global audience, and the importance of offering a common visual language that transcends cultural and geographical differences becomes even more important.

We have tens of thousands of recipes on the Fresco platform, and ensuring people can find what they’re looking for is an important part of serving up the right recipes — both for our partner brands and our users. For this, we’ve created a taxonomy of tags that sort our recipes into categories, and our iconography conveys them to users at a glance.

The problem with photography.

When it comes to representing food, it might seem like photography is the obvious choice. Photography is the undisputed king when it comes to recipe visuals, closely followed by video, and we do use photos to represent individual recipes in the Fresco app. However, it’s impossible, to sum up, an entire category of recipes with one photograph. Our experience addressing the visual smorgasbord of possibilities that food offers made us conclude that icons were the smarter choice for representing our recipe taxonomy.

Take “Chicken” as a category example. If a user is searching for chicken recipes but doesn’t like the look of the Chicken Cacciatore photo representing the category, there’s a risk that they will abandon their search and get discouraged from exploring the app further.

For our appliance brand partners with multiple appliances available on the app, like Instant Brands or Thermomix, showing just one model to represent their category might have the same result. By restricting these visuals to icons, we can show users shorthand to the complete collection, inviting them to discover the wide range of recipes available within.

A little color goes a long way.

We are no strangers to icons here at Fresco, and our iconography system has to grow and evolve as the Fresco platform does. Our apps have a system of well over 2,000 ingredients, tools and appliance icons, with the number growing constantly. Every time we add a new ingredient or appliance brand(or our existing partners launch new appliances!), we add icons to represent these in the apps.

Generally, these icons appear in a single color within the app — they are created and added to our system as one-color dark gray images, with individual ingredient colors being added dynamically. When representing our recipe categories, the additional detail that adding color provides in such a small space is invaluable.

When we rebranded from Drop to Fresco, we needed to make a few changes to our brand palette to better connect to our community. Our new color palette is rich, warm, and vibrant and represents the food we see in our kitchen. However, our iconography system and how we display icons remain similar. We know that icons need to stay clean, simple, and helpful.

Defining a scalable system.

For icons to be done well, and create a beautiful user experience, they must follow stylistic rules and convey a sense of harmony. Easier said than done, especially when you factor in the need to be flexible, scalable, and consistent to order work across mobile, tablet, and desktop apps.

For appliance brands looking to take advantage of all the user benefits that icons offer, working with an experienced partner can be the difference in getting to market quickly and effectively. Fresco’s design team, for instance, has years of experience in creating, testing, and refining instantly recognizable assets that move consumers effortlessly through the recipe apps we serve. We’ve developed a set of golden rules over the years our partners benefit from, including:

• Legibility trumps style.
• Leverage existing stereotypes.
• Keep it simple.

How to convey more with less.

Even with design guidelines in place, every icon is individually designed and optimized. When creating our cheese icon, for instance, we wanted to represent a range of cheeses and reflect our gourmet prowess.
As seen below, the first iteration had too much detail, and while the second iteration was an improvement(with more graphic shapes and bolder colors) it still wasn’t simple enough. The third and final iteration, with two-tone, bold colors, and minimal detail, tested as the most quickly recognized cheese. Ultimately, user recognition is more important than representing a range of cheeses (who’d have guessed?).

There are other pitfalls to avoid. We started out with meats by using animals as a first iteration. They were cute and fun, but ultimately user testing gave us the insight that they could end up being offensive to some users. The second iteration was a pleasingly consistent approach and solved the problem of offensive representation, but showed the raw material rather than the tasty results. The third — and final — iteration had easily recognizable, cartoonishly-cooked versions that resonated with our users, and so we sadly said goodbye to our farmyard friends.

Simple icons are complex but offer a beautiful, memorable user experience

As a design-led company, Fresco has always been an advocate of the work needed to represent the complexity of cooking in a way that makes it effortless and delightful for the home cook. Cooking is so personal, and the faster we can get users to what they want with easy-to-navigate road signs, the better it is and the more joy we can offer. The appliance brands who work with us know that offering this common visual language benefits them, their consumer, and a lot of hungry people.

To learn more about Fresco’s design-led ethos and KitchenOS, the neutral, cross-brand platform for the smart kitchen, please get in touch here.