How We Made a Visual Language for Yandex Zen

Sulliwan Studio
9 min readSep 2, 2020

--

Rebranding a media platform with an audience of 50 million

Task

Once upon a time, when it all started, Yandex Zen was a «smart newsfeed» that generated a selection of articles. Today, it’s a proper media platform. Zen helps readers spend their online time in an interesting and meaningful way, while authors, media and brands help create stories and discover new audiences. The essence of the brand ceased to fit into the newsfeed logo, and there were not enough tools to fully describe it, therefore Zen’s team came up with the idea of changing the logo and creating a visual language.

Previous Yandex Zen logo

To rethink the image of a service with a multimillion audience is an interesting task in itself, but that’s not all. Working with Yandex is also a fantastic motivator, and it’s recently been trying new visual solutions. It was with Zen that the team clearly understood the need for a rebranding, and was ready to deliver strong results and meaningful change.

Team

It was clear from the start that this project needed to work with meanings and a solid story, so we strengthened our team with a creative director and a copywriter. We met before New Year’s Eve, had a briefing, came up with a plan, and have gone around the world. We developed a concept of visual language from four countries and three time zones with two synchronizations per week. This had an interesting impact on the project: we were not distracted by the New Year fuss and the extra steps in the process, so did not lose a clear understanding of the problem, and during the conference calls discussed only the essence in order to save each other’s time and internet traffic in roaming. On top of that, we weren’t working from one office, we traveled and had different experiences, which helped us perceive the problem from different angles and to think bigger.

Idea

Search
In the beginning, we had a brief and a description of what Zen was, what drove it, and what values should be built into its communication.

We were looking for a visual language to::
— Zen’s communication to be unified in all channels, inside and out,
— create a unique visual code in a highly competitive environment,
— be recognized even without the logo,
— express Zen’s emotionality.

At the same time:
— keeping the connection with the mother brand, i.e. Yandex,
— creating a visual language that can be used to communicate not only with readers, but also with authors and brands.

Zen’s meanings:
The essence is the joy of discovering new stories.
The mission is to help you spend time online in an interesting and meaningful way.
Values — empowerment, communication, discovery, self-expression.

Since Zen is a complex product with multiple directions, audiences and goals to consider and weave into one solution, we realized that the solution is a simple and powerful metaphor. Put accurately — it is to embody the values of service, team spirit and, well, broadcast them into the world. We started from collecting all the shades of Zen’s essence, mission and values and translating them into a single field of meaning with five bases:

By brainstorming with the help of an associative map, we filled it with many clear (and not very) metaphors. After processing, we had seven images left, each of them had a set of meanings and forms.

Discovery
After brainstorming, the analysis came a stage of visualizing directions — what an icon might be, what a communication material or an animation might look like. After sketching, we had three promising directions left, but at that point it became clear that both the brief and our hearts are leaning toward the only option — the star.

It brings together abstract meanings — the basic values of Zen: a spark of inspiration, the light of knowledge. And the meanings are quite specific — the space between four content cards in the product itself. And in animation, the corporate identity comes alive: the star becomes a technique that reveals something interesting. That is how the story started.

Additional meanings of the image

The Legend
We wanted to tell Yandex’s team about the idea in their own way- succinct and beautiful. This was helped by a legend that showed how Zen values are represented in images, and how they unite in one symbol:

«From the infinite absolute nothing comes a light source. It’s a flash of inspiration, a light of new knowledge, a pure radiance of awareness and a connection to other sources. On an intergalactic level.»

In the presentation we immediately showed the scalability of the idea to very different formats — icons, animated screensavers for video, online and offline communication, onboard in the product, souvenirs, objects and spaces. We even showed what an art object might look like on the basis of our visual language: it was important for us to present the idea in a way that made it almost palpable.

After the presentation, the Zen team also had a spark in their eyes. After pre-testing the symbol, we began developing it.

Developing

Sign
First, we modified the star itself. We needed a very precise symbol, so we resorted to formulas and built the perfect hyperbola — making the curve as smooth as possible.

Color
The original solution was a monochrome approach in the logo. But it did bother the team: black seemed void of emotion and lost among the screaming competitors’ apps. We were confident, because black is just a background that makes the star even brighter. To make sure and convince the team, we prepared about 40 screens of phones with different color transmissions and different wallpaper. The star burned brightly on all of them.

Color as an emotional brightness we added, but not in sign, but in brand communication. It went from monochrome to gamma. We found the ideal solution in the shades of the sunset: the meaning is beautifully embedded in the legend, complementing the idea of a star in the night sky.

Simplicity of solution
A lot of people are involved in creating Zen communication, not only the team, but outside people as well — a lot of subcontractors are making materials. One of the goals of the refinement was therefore to make the visual language easy to reproduce, especially for online and outdoor media. For this purpose, we created a flexible branded module and tested it on a variety of formats.

Logo block layout variants

Focus on content
After the presentation, we realized that for communication — banners, outdoor advertising and more — we need a more utilitarian approach, in which the focus shifts from the corporate identity itself to filling the layout and message.

Zen mainly promotes channels, brands and bloggers, and gives them more space on the platform. This is why we have made the star a branded frame or, in some cases, a divider in the layout. The content itself -the images — we could only predict, so we described the requirements and recommendations for creation. This approach will make working with the style easier and faster for the design team and the subcontractors.

Instruction for use

Testing everything
A separate stage focuses on adapting the branded module for any and all formats and channels. We made both online and offline modules, developed branding options for social networks, souvenirs, clothes and various other items, as well as presswalls and even the office. It was important not just to find a solution, but to make it as simple and scalable as possible.

Not exactly a brandbook
As a result of all our tests, we have compiled what is traditionally called a brandbook. However, in our case, it is more of a manual, a detailed guide on how to do anything in Zen style. It describes the basics: the legend, icon, logo, brand colors. Moreover, flexible modules for advertising communication were developed, including the principles of animation, recommendations for images, several levels of branding, a master layout template and style work in business communication.

With all its detail, the brandbook does not intend to dictate the rules, but rather lays the foundation on which a new Zen can be built for years to come. Without the grid for building a logo with a golden cross section, complex schemes and other anachronisms, unnecessary in a modern designer’s work. There is a file, there is a button: “download”, and you’re done.

Beautiful end
Zen is developing rapidly and its reach runs far and wide, which means that fantastic new things are in store after the launch of the visual language. Ahead will be testing in battle, rolling out advertising campaigns, designing internal and external products — which means the style is waiting for a number of necessary changes. But it’s alright when there’s Zen in your head, heart and brandbook.

--

--