Jak zapro­jekto­wali­śmy nowe K2.

Poprzednia wersja K2.pl liczyła sobie już 6 lat, a w internecie to cała epoka. Trudno uwierzyć, że tak długo mogliśmy funkcjonować jako agencja digital z serwisem, który pamiętał czasy, kiedy RWD było nowością, a wspomnienia po Flashu były jeszcze całkiem świeże. Ale wiadomo: szewc bez butów chodzi…

Czuliśmy od dłuższego czasu, że mamy problem. I wcale nie chodziło o to, że mieliśmy starą stronę. Nie wiedzieliśmy jak komunikować to co robimy.

Zatrudniamy ponad 200 specjalistów, a zakres usług, które oferuje agencja K2 jest bardzo szeroki. Dzięki temu możemy wspierać naszych klientów w zarządzaniu doświadczeniem konsumenta w każdym punkcie styku z marką, w każdym kanale, na każdym etapie customer journey. Jesteśmy agencją reklamową 360°, studiem graficznym, firmą brandingową, domem produkcyjnym, firmą tworzącą cyfrowe produkty i start-upy, agencją UX, firmą konsultingową, software house-em…

Z biegiem lat tych usług przybywało. Trudno było nam to wszystko wyjaśnić i komunikować obecnym oraz potencjalnym klientom. Nasz slajd z ofertą agencji z prezentacji dla klientów zaczął przypominać mapę londyńskiego metra. :/

W dodatku wiedzieliśmy, że w każdym z obszarów naszej działalności musimy konkurować z innego rodzaju firmami, które takich problemów komunikacyjnych nie mają, bo robią po prostu jedną rzecz.

W ostatnim czasie mieliśmy w K2 bardzo dużo wewnętrznych dyskusji na temat tego kim my jako firma właściwie jesteśmy, co, komu, i jak powinniśmy oferować, jak się komunikować? Odbyliśmy wiele spotkań na ten temat. Wnioski jednak zawsze jakoś się rozmywały.

Od strony WWW do strategii firmy.

W moim zawodowym życiu widziałem wiele projektów, które ciągnęły się miesiącami albo nawet latami, nie wychodząc poza etap slajdów PowerPointa, analiz i dyskusji. Wystarczyło jednak, żeby do projektu dołączył designer i przygotował wstępny prototyp, aby w ciągu kilku dni popchnąć inicjatywę do przodu bardziej niż przez poprzednie miesiące, doprowadzając do konkretnych ustaleń, decyzji i kolejnych kroków.

Jak stwierdził Mark Davidson, ex-VP of Design z Twittera: „Prototyp wart jest tysiąca spotkań”  —  dopiero jakiegoś rodzaju artefakt sprawia, że problemy i rozwiązania można skonkretyzować, skonfrontować z innymi ludźmi i rozwinąć. 

Tak było też z nami i z projektem naszego nowego serwisu. Dopiero projekt nowego K2.pl zmusił nas do sformułowania jasnej i krótkiej odpowiedzi na pytanie, co oferujemy i do wypracowania nowej strategii komunikacji. To konieczność przygotowania treści na serwis spowodowała, że pokategoryzowaliśmy, nazwaliśmy i opisaliśmy wreszcie wszystkie nasze usługi. A to wymagało spojrzenia na całą naszą działalność z punktu widzenia naszych klientów.

A prototype is worth a thousand meetings.
Mike Davidson

Poprzedni serwis K2.pl z 2012 roku eksponował tylko jeden z filarów naszej działalności, ten związany z reklamą, bo to stosunkowo łatwo było w nim przedstawić  —  wystarczyło pokazać spot wideo lub główny visual z kampanii. Pomijał jednak inne obszary, takie jak tworzenie cyfrowych produktów, konsulting i technologia. Formuła tamtego serwisu nie pozwalała nam na zaprezentowanie dłuższych tekstów czy case studies.

Wiedzieliśmy, że tego potrzebujemy. No i musieliśmy jakoś zrównoważyć i nazwać nasze obszary działalności.

Najważniejszą ideą związaną z nowym K2.pl było podzielenie naszych usług na trzy filary, które znalazły się na pierwszej makiecie strony głównej, jaką przygotowaliśmy:

• Rozwijamy marki  —  Pomagamy markom rozwijać dialog z konsumentami.
• Tworzymy produkty — Pomagamy firmom projektować i wdrażać cyfrowe produkty.
• Transformujemy biznes  —  Wspieramy cyfrową transformację firm.

Chcieliśmy, żeby te trzy hasła były pierwszą rzeczą, którą użytkownicy zobaczą na naszej stronie, a podstrony tych trzech obszarów były punktami startowymi do eksploracji serwisu.

Nowa identyfikacja wizualna: PRO & BOLD.

Równolegle z projektowaniem nowego serwisu chcieliśmy odświeżyć identyfikację marki K2.

W obecnych czasach digital to poważny biznes. K2 często realizuje krytyczne biznesowo projekty o budżetach liczonych w milionach złotych, wspiera klientów w transformacji cyfrowej, rozwija usługi konsultingowe. Nie miejsce tu na żarty i kreatywne szaleństwo na pokaz, jak w czasach młodości agencji interaktywnych, kiedy robiło się bannery i Flashowe minisajty. Naszymi klientami są CMO, CTO, CPO, CXO i CEO dużych korporacji, którzy szukają doświadczonych partnerów biznesowych, którym mogą zaufać.

W naszej nowej identyfikacji bardzo chcieliśmy wprowadzić font szeryfowy. Tego rodzaju kroje pisma automatycznie kojarzą się z profesjonalizmem i poważnym potraktowaniem tematu, budzą zaufanie.

Oprócz tego zależało nam na bezszeryfowym foncie do zastosowania w nagłówkach  —  takim, który jest w stanie zmienić każde zdanie w mocny, zapadający w pamięć slogan. Zresztą nie musi być to nawet zdanie, wystarczy jedno słowo, po którym postawimy kropkę. Chcieliśmy mieć możliwość pokazania na prezentacji u klienta takiego slajdu:

Wszystko w naszym nowym serwisie miało być BOLD: duże czcionki, duże elementy, prosty i mocny przekaz, a z drugiej strony głęboka i wartościowa, konkretna wiedza w opisach projektów i usług, oraz na blogu. (To nieprawda, że ludzie nie czytają!)

Po testach kilkudziesięciu par fontów zdecydowaliśmy się na szeryfowy Maitree od Cadson Demak i Gilroy Extrabold autorstwa Radomira Tinkova do nagłówków, które zastąpiły dotychczas stosowany przez nas font Museo Sans.

Kolejnym etapem było odświeżenie logo, które ostatnią dużą zmianę przeszło w 2012 roku. Zrezygnowaliśmy wtedy z koloru pomarańczowego na rzecz czerni i bieli (a konkretnie bardzo ciemnego granatu). 

Ideą, która stała za tamtym logotypem było to, aby zastosowany w kontrze na kolorowych tłach lub zdjęciach wtapiał się w nie i przenikał z nimi. Na stronie chcieliśmy, żeby logo agencji wtapiało się w projekty naszych klientów, które powinny odgrywać pierwszoplanową rolę. Tę ideę przenikania dobrze widać na dwóch filmach, które wtedy przygotowaliśmy: “Tusze” i “Cyna” (to są prawdziwe tusze i stopiona cyna!).

Z logotypem z 2012 roku wiązało się jednak wiele problemów. Źle sprawdzał się w małych rozmiarach. Litera K i cyfra 2 były stosunkowo drobne i cienkie, przez co stawały się czasem nieczytelne. Prostokąt z połączonych kwadratów kiepsko wpisywał się w kwadrat lub koło awatarów w social mediach. Najbardziej kłopotliwa była jednak brzydka ramka, która zyskała grubszą wersję w 2014 roku. Niewiele to jednak pomagało.

Zastanawialiśmy się teraz jak jeszcze można zredukować ten i tak już bardzo prosty znak. Przez chwilę braliśmy poważnie pod uwagę usunięcie dwóch połączonych kwadratów, są one jednak zbyt charakterystyczne dla naszej marki. (Może za kolejne 6 lat… :) W końcu po prostu usunęliśmy ramkę  —  drugi kwadrat domyka się “wirtualnie” — i zmieniliśmy font na grubszy Gilroy Extrabold. 

To nowe logo jest kontynuacją pomysłu z 2012 roku, ale sprawdza się dużo lepiej w wielu kontekstach.

Rozważaliśmy też kwestię powrotu do jakiegoś dodatkowego koloru lub kolorów. Zostaliśmy jednak w końcu przy czerni i bieli  —  to działało najlepiej i takie monochromatyczne kolory kojarzą się nam z naszym warszawskim biurem: czarno-białe ściany, szary beton, białe biurka.

Samą czernią i bielą można się też w kreatywny sposób bawić, tak jak to widać na początku naszego nowego showreela:

Jako dodatkowy element CI wprowadziliśmy jednak kolorowe gradienty, które są stosowane jako tła dla diagramów w serwisie i w szablonie naszych prezentacji.

Poza tym w serwisie zastosowaliśmy także kolorowe flary po najechaniu kursorem na tytuły na stronach głównych działów na desktopie — taki mały interaktywny smaczek, który nawiązuje do wspomnianych gradientów.

A tak wyglądają nasze nowe wizytówki — w orientacji pionowej, żeby było ciekawiej!

Architektura serwisu, czyli “keep it simple”.

Od pewnego czasu wspólnie z naszym Art Directorem, który jest autorem nowego K2, eksplorowaliśmy w kilku projektach dla naszych klientów pomysł związany z dużymi tekstowymi nagłówkami w serwisach internetowych.

Te projekty pozostały niestety niezrealizowane, ale taka forma prezentacji treści na stronie bardzo nam się spodobała i postanowiliśmy zastosować ją w nowym K2.pl. Pomysł, w którym wszystkie strony zaczynają się od dużych tekstów tytułowych, a header graficzny jest obniżony i wystaje ucięty od dołu pierwszego ekranu wydał nam się bardzo atrakcyjny. Wszystkie strony w nowym serwisie K2 trzymają się tego schematu — staraliśmy się stosować przedłużone visuale, które budzą zainteresowanie i w naturalny sposób zachęcają użytkowników do scrollowania.

Wszystko to układa się w ładną całość z trzema głównymi filarami naszej działalności na stronie głównej. 

Trzy główne kategorie usług służą także jako filtry dla projektów oraz wpisów na blogu.

Dla tych klientów, którzy chcieliby przejrzeć pełną listę naszych usług przygotowaliśmy też taką stronę.

Wiele razy w czasie tego projektu mówiliśmy sobie, żeby nie kombinować, tylko projektować jak najprościej się da i trzymać się znanych, sprawdzonych konwencji. To treść powinna być najważniejsza, nie serwis sam w sobie.

Dużo czasu spędziliśmy nad prezentacją najnowszych i najważniejszych projektów na stronie głównej. Próbowaliśmy rozwiązania z jakąś formą nieregularnej siatki, ale to nie robiło wrażenia i nie było wystarczająco BOLD. :) Skończyło się więc na trzech pełnoekranowych slajdach podłączonych pod scrolla.

Jeżeli chodzi o nawigację, to od początku wiedzieliśmy, że pozostaniemy przy starym, dobrym i sprawdzonym hamburgerze i pełnoekranowym rozwijanym menu. Chociaż niekoniecznie polecalibyśmy takie rozwiązanie naszym klientom w ich projektach, to strony agencji są specyficzną kategorią, gdzie jest to standardem. Zależało nam na prostej, czystej i minimalistycznej formie, a nasi klienci to stare wygi digitala, którzy dobrze wiedzą jak się tego używa.

Dużo uwagi poświęciliśmy też wersji mobilnej strony, która poprzednio — co tu dużo mówić — kulała. Obecnie prawie połowa odsłon na nowym K2.pl pochodzi z mobile-a.

Najważniejsza jest treść.

Sam projekt szablonów strony, to nie była bułka z masłem. Chociaż strona agencji, to w końcu tylko wizytówka. Dużo łatwiejsza rzecz, niż systemy transakcyjne, e-commerce, czy skomplikowane aplikacje, które na co dzień projektujemy dla naszych klientów. 

Jednak to co okazało się największym wyzwaniem, to produkcja treści.  

Może na to nie wygląda, ale wszystkie teksty na nowym K2.pl w momencie startu to ponad 160 stron A4 — grubość średniej powieści. To wszystko trzeba było napisać i przygotować do tego materiały graficzne, niektóre w dwóch wersjach — na desktop i mobile.

Nad samym przygotowaniem case studies do sekcji “Projekty” w pewnym momencie pracowało u nas pięciu grafików. A to dopiero początek — zaczęliśmy od przekopania naszych archiwów. Mamy dużo więcej projektów w zanadrzu i straszliwie żałujemy, że wielu z nich — często tych najnowszych i najciekawszych — nie możemy pokazać. :(

W kwestii prezentacji projektów także postawiliśmy na maksymalną prostotę, bo kompletnie nie kupujemy tych wszystkich prezentacji z Behance’a i Dribbble’a, gdzie urządzenia pokazywane są pod dziwnymi kątami i w dziwnej perspektywie, tak że nie można w zasadzie obejrzeć samego projektu.

Oczywiście będziemy tę sekcję rozwijać, tak samo jak naszego bloga. Już pracujemy nad nowymi wpisami i bardzo zapraszamy do zapisania się do naszego newslettera.

A dociekliwych zachęcamy do pobrania naszego nowego Brandbooka (PDF, 38 MB).

Zobacz też:

• Jak pracujemy nad brandingiem i identyfikacją wizualną.
• Jak tworzymy cyfrowe produkty i usługi: UX & Visual Design.

Autor: Maciej Lipiec.