How We Designed the New K2.

K2 is a leading digital agency in Poland. Recently we have launched the new K2.pl. It is the 5th version of our website in the 21-year history of the company.

The previous version of the website was 6 years old and it is like ages in webdesign. Hard to believe that we were able to act as digital agency having the website remembering the time when RWD was a new concept and the memories of Flash were still fresh. But, according to the old saying: every busy, every bare.

We felt that we had a problem. And it was not about having such an old website. We simply didn't know how to communicate what we were doing.

We employ over 200 experts and the range of services offered by K2 agency is very wide. Because of that, we can support our clients in management of customer experience at every touchpoint, in every channel, on every stage of customer journey. We are a 360° advertising agency, graphic design studio, branding company, production house, product design and UX agency, consulting company, software house, start-up studio...

There were more and more services on board with every passing year and the difficulty of communicating them all to our existing and potential clients was overwhelming. Our "capabilities" slide from the presentation for clients started to resemble the London tube map. :/

On top of that we knew that we had to compete with other companies in every area of our operations. And those companies were free for such communication turmoil as they were focused on one thing only.

We have held numerous discussion in K2 lately about what we are as the company, what we should offer, to whom and in what way, and what to do with the communication. Despite that, all the conclusions just faded away.

From the website to company's strategy.

I have seen many projects with months or years-long development periods that have never stepped beyond the PowerPoint slides, analysis and discussion stage. It was enough however for the designer to join the project and to prepare initial prototype to push the initiative forward more in a few days that it was done during those months or years, and to agree on arrangements, decisions and further steps.

As Mark Davidson, ex-VP of Design from Twitter, said: “A prototype is worth a thousand meetings” — only when you create some kind of artefact you are able to clarify problems and solutions, confront them with other people and develop.

It was exactly what we have experienced. We have managed to give clear and short answer to the “what we offer” question and to develop new communication strategy only when we started working on the new K2.pl. The need to prepare the content of the website made us categorize, name and describe all our services. And this required to see our operations with the eyes of our clients.

A prototype is worth a thousand meetings.
Mike Davidson

The previous K2.pl website from 2012 was focused solely on one pillar of our operations, the advertisement-related, as it was quite easy to present — it was enough to upload a video spot or a campaign main visual. Unfortunately, the website neglected all other areas, such as product design, consulting and technology. The formula of the previous website made it impossible to present longer articles or case studies.

We knew that we needed it. And we had to balance and name our main areas of operation.

The key idea of new K2.pl was to divide our services into three groups that we included in the first wireframe of the home page:

We wanted these three sentences to be seen first by the website’s visitors and the subpages of these areas to be the starting point to explore the website further.

New visual identity: PRO & BOLD.

At the same time, we wanted to refresh the K2 brand image.

Digital is a very serious business today. K2 is often engaged in business-critical projects with high-end budgets, supports clients during digital transformation process, develops consulting services. There is no place for jokes and showing-off as it was done at the early stages of interactive agencies life, when they were creating banners and Flash mini-sites. Today we work with CMOs, CTOs, CPOs, CXOs and CEOs of large corporations, and they are looking for experienced business partners that they may trust.

We wanted to enrich our new identification with a serif font, as it is automatically associated with professional and serious approach and wins confidence.

Then again, we wanted our headlines to be written in sans-serif font, which would make every sentence look like a strong slogan that engraves itself in the memory. It does not even have to be a sentence. A word is enough. We wanted to be able to present the client the following slide:

We wanted everything about our website to be BOLD: big fonts, big elements, simple and strong message. But also, on the other hand, this profound and valuable knowledge in descriptions of services and projects and at our blog. (People do read!)

After testing a dozens pairs of fonts, we decided to use serif Maitree (by Cadson Demark) for bodycopy and sans-serif Gilroy Extrabold (by Radomir Tinkov) for headlines.

Then, we had to refresh our logo. Last time it was updated in 2012 when we quitted orange for the sake of black and white (a very dark blue to be precise).

The idea behind this logo was that it should merge flawlessly with the background images, for example with the projects of our clients, which should play the main role on our website. This idea of merging with surroundings is depictured in two short movies we filmed back then: “Ink” and “Tin” (mind you, these were the real inks and molten tin!).

Alas, we had many problems with the logotype from 2012. It did not look good in small size. The letter K and digit 2 were relatively small and thin, therefore sometimes hard to discern. The rectangle composed of connected squares was problematic in use in the social media avatars. But the the most troublesome was the ugly frame. We made it bolder in 2014 but it was still far from perfect.

We gave a lot of thinking on how to simplify this already simple sign. For a brief moment we wanted to remove two connected squares, but we found them too distinctive for our brand. Maybe we will be brave enough to do so in some next 6 years or so… :). In the end we decided to remove the frame — the second square closes “virtually” — and we used Gilroy Extrabold font.

The new logo is the extension of the idea from 2012, but proves to be more useful in many contexts.

Moreover, we considered the option to add some colors to our identity, but finally we left it black and white — this worked the best and these monochromatic shades bring to mind our Warsaw office: black and white walls, grey concrete, white desks.

Besides, the black and white can be put to some creative use as well. You can see it at the beginning of our new showreel:

We have however added some color gradients as the new element of our identity, which became the diagrams’ background on the website and in our presentation’s template.

Inspired by said gradients, we have also applied colorful flares on our website, that you can see after moving the cursor over the titles of main sections on the desktop.

And below you can see our new business cards — vertically orientated to keep it more interesting!

Website architecture: “keep it simple”.

For some time we were exploring the idea of using the big text headlines on the websites for a few of our clients. We did it together with our Art Director — the designer of the new K2 website.

Those designs remain unrealised. However, we have found such way to present the content very interesting and we decided to give it a go on the new K2.pl website. The idea to start all website pages with big headlines, to put graphic header a bit down below and leave it kind of cut and partially visible above the fold hit us as incredibly attractive. All website pages are kept this way. We tried to apply extended visuals in order to attract attention and encourage users to scroll down.

All these make a perfect match with three main pillars of our operations that you can see on our homepage.

Three main categories of services are also filters for projects and blog entries.

Moreover, we have prepared this page for clients willing to see the full list of our services.

We reminded ourselves many times when working of this project to keep it as simple as possible and to stick to familiar and verified conventions. It’s the content that matters, not the website.

We have spent long hours trying to find the best way to present the latest and the most important projects on the main page. We tried the solution based on irregular grid, but it was not impressive and BOLD enough :) So, what we have are three full-screen slides changing on scroll.

The navigation is based on the old and well-working hamburger icon and full-screen menu. We may not advocate for such a solution for our clients, but agencies’ websites belong to specific category, where this solution is kind of a standard. We wanted simple and minimalistic form and our clients are “old hands” in the area of digital and they know how to use it.

We gave a lot of attention to the mobile version of the new website. Now, almost 50% of traffic on the new K2.pl website is mobile driven.

Content is the key.

Designing the website templates was not a piece of cake. Even if the website is nothing more than a showcase. Much easier to design than online banking systems, eCommerce platforms or complicated applications that we deliver to our clients on a daily basis.

But the most difficult part was the production of the content.

It may not look like this, but you would get over 160 A4 pages of raw text if you felt like putting the website content to paper. It could be a pretty average-sized novel. We had to write this content and create graphics — sometimes in two versions: for desktop and mobile. And remember, these 160 pages refer only to the initial content of the website.

We had 5 graphic designers working on case studies for ‘Projects’ sections at one point.

And that is only the beginning — we dug through our archives and we have many more projects up our sleeve. Unfortunately, we cannot show some of them, and it pains us, as they are often the newest and the most interesting works.

We decided to show our projects in the most simple way, because we do not buy all those presentations at Behance and Dribbble, where devices are visible at weird angles and from weird perspective, so you are really unable to watch the project itself.

We will of course expand this section, alike our blog. We are already working on new entries and we do encourage you to subscribe to our newsletter.

And if you are curious you can download our new Brandbook (PDF, 38 MB).

Wish to receive notifications about new entries? Leave your email address.