Tretí rok sme oslávili novým dizajnom: Ako MONO zmenilo svoju tvár

Máme nový dizajn a veríme, že sme sa zase posunuli o kus ďalej. 2FRESH SK, KAT štúdio a CREALAB sa spojili a pomohli nám vytvoriť novú vizuálnu identitu a web pre MONO 2.0. Prečo sme sa rozhodli pre zmenu, ako nám to išlo a čo môžete od nového vizuálu čakať?

Prečo redizajn a kto nám s ním pomáhal

MONO má nový dizajn, čo na to hovoríte?

Pôvodný web už potrebám MONO 2.0, ktoré tvorí nový tím, nevyhovoval, a tak museli nastať zmeny. „Pri spustení MONO sme chceli mať web, ktorý bude jednoduchý bez rušivých prvkov a bude dávať dôraz na čistotu dizajnu,“ opisuje začiatky súčasný šéfredaktor Tomáš Halász. To sa vtedy autorovi pôvodného webu Michalovi Hrickovi podarilo. Zvládol to rýchlo a s obmedzenými finančnými prostriedkami, čo boli ďalšie podmienky, keďže MONO je neziskový projekt.

Ako sa MONO vyvíjalo a tím publikoval stále náročnejšie texty, začali sa objavovať nedostatky prvotného nastavenia. „Pôvodné nastavenie sme potrebovali doplniť o nové formáty zobrazenia článkov ako longform alebo funkcie ako newsletter, donate a sociálne siete, dôsledkom však bolo, že vydanie jedného článku vyžadovalo veľa malých editorských úkonov a viedlo to k vzájomnej nekompatibilite,“ hovorí šéfredaktor. Editori kvôli tomu pri pridávaní článku na web strávili veľa času a následne museli ešte niekoľkokrát kontrolovať výsledok.

Druhou slabinou pôvodného webu bol vzhľad. Starý systém mal obmedzenia, najmä pri práci s typografiou, obrázkami a interaktívnymi prvkami, ktoré sú dôležitou súčasťou našich článkov.

MONO sa ako platforma s kvalitným obsahom snaží čitateľa zasiahnuť a vytvoriť si s ním hlbší vzťah. Naši čitatelia strávili nadpriemerne dlhý čas pri longformoch – priemerne okolo šesť minút –, ale pomer tých, ktorí článok aj zdieľali, bol nízky. Preto bola jedna z hlavných výziev redizajnu aj snaha zapojiť ich v čo najväčšej miere, a teda zviditeľniť možnosti interakcie.

Logo bolo v prvotnom dizajne MONO použité iba v hlavičke a na inom mieste sa nevyskytovalo. „V dobe, keď väčšina čitateľov číta rôzne zdroje počas dňa, je pre nich často ťažké zapamätať si, na akom portáli čítali článok, ktorý ich zaujal,“ vysvetľuje Tomáš Halász nevýhodu takto nastaveného dizajnu.

Práve tieto nedostatky sme chceli redizajnom odstrániť a priniesť aj nové prvky, ktoré obohatia čitateľský zážitok a posilnia MONO ako priestor na kvalitné čítanie.

MONO 2.0 a jeho príbeh

MONO 2.0 vzniklo po tom, ako väčšina zakladajúcich členov (Tomáš Prokopčák, Filip Struhárik, Pavol Sybila) postupne ukončila spoluprácu a z pôvodnej štvorice zostal Tomáš Halász, ktorý sa stal šéfredaktorom. Spoločne s Dávidom Tvrdoňom, vtedajším zástupcom, prijímali nových členov a vznikol súčasný tím. Základná úlohou, ktorá pred ním stála, bolo obnovenie publikovania na pravidelnej báze s čím súvisel aj pripravovaný redizajn. Novým vzhľadom sme chceli prečistiť stránku a graficky podporiť naše nové smerovanie.

Okrem spomínaných vizuálnych a editorských prvkov je pre nás dôležitá komunikácia toho, čo prinášame, kam smerujeme a naše fungovanie ako mimovládnej organizácie. „Ak mám vytvárať jednotnú fundraisingovú stratégiu, potrebujem mať veľmi zreteľný obraz toho, čo je MONO. A presvedčiť v prvom rade samú seba, že toto je presne to, čo chcem podporiť – a to teraz hneď,“ opisuje členka tímu Katarína Fajtáková.

Dizajn sa tak stáva základným nástrojom platformy, ktorá chce vytvárať priestor autorom kvalitných textov a fotografií. Snaží sa spájať dva prvky, a to kvalitný obsah a zaujímavú formu článkov.

Kto s nami spolupracoval

Na redizajne sme začali pracovať minulý rok v septembri. V prvej fáze sme spolupracovali s 2FRESH SK, ktoré malo na starosti webdizajn, testovanie a UX. 2FRESH SK je digitálna agentúra, zameriava sa na výskum, stratégie služieb a produktov, dizajn a použiteľnosť digitálnych rozhraní.

O vizuálnu identitu sa nám postaralo KAT štúdio, ktoré sa venuje najmä firemnej a produktovej identite, ale aj tvorbe tlačovín, písma a ilustrácií.

Programovania sa potom chytili v online marketingovej agentúre CREALAB, kde sa zameriavajú na vytváranie webových stránok, navrhujú online marketingové stratégie a realizujú kampane.

So všetkými spomenutými sme v celom procese aktívne komunikovali a prechádzali jednotlivé možnosti, aby nový dizajn odrážal MONO 2.0 a jeho nastavenie a aby bol prínosom pre našich čitateľov.

Bol to dlhý proces, ktorý do určitej miery definoval aj fakt, že MONO je mimovládna organizácia a funguje na základe darov prispievateľov, preto bola pomoc a práca jednotlivých partnerov do veľkej miery nekomerčná, pracovali za symbolický honorár. Projektu sa zúčastnili, lebo majú radi MONO a získali zaujímavú skúsenosť.

„Čakala som, že ľudia v MONO sú nadupaní, poznajú tento biznis a že sa od nich veľa naučíme. To sa dialo – ich poznatky sú inšpiratívne,“ opisuje jeden z dôvodov spolupráce Tina Ličková, CEO 2FRESH SK. Tiež dodáva, že výhodou je užší vzťah a možnosť skúšať nové veci, a preto jej práca dáva zmysel.

Už na začiatku sa počítalo aj s prekážkami takejto spolupráce.

Tina Ličková vysvetľuje, že prekážkou nebýva ani tak slabé finančné ohodnotenie, ako to, že spolupráca je komunikačne a projektovo náročná, čo sa aj potvrdilo. Tiež tvrdí, že mimovládky často nemajú vyhradeného jedného človeka na komunikáciu a manažment a tiež vždy nemusia rozumieť postupom. To sa, samozrejme, nedá zovšeobecniť, no vyhradiť si jedného človeka na komunikáciu bolo spočiatku náročné aj pre nás.

KAT štúdio pri práci nerozlišuje, či spolupracuje s jednotlivcom, firmou alebo mimovládkou, podstatnejšie pre nich je zadanie dizajnérskeho projektu.

Podobne zmýšľali aj v CREALAB: „Projekt MONO nás oslovil svojou jedinečnosťou, ktorú do našej práce vkladáme aj my. Už od prvej komunikácie sme cítili, že sme naladení na jednej vlnovej frekvencii. A práve to bol jeden z dôvodov, prečo sme sa rozhodli pustiť do projektu, nehľadiac na výšku ponúkanej odmeny.“

Dôležité bolo aj rozdelenie úloh medzi 2FRESH SK a KAT štúdiom, čo nebolo na začiatku úplne jasné. Nakoniec v KAT vypracovali vizuálnu identitu a dizajn manuál, na základe ktorého po vzájomnej komunikácii pripravili 2FRESH SK webový dizajn so všetkými časťami.

Ako vyzerá čitateľ MONO

„Je dobré si na začiatok určiť všetky ciele, ktoré chceme redizajnom dosiahnuť, teda nielen tie webové, ale aj ciele jednotlivých formátov,“ myslí si Tina Ličková z 2FRESH SK.

Aby sme si jasne určili naše ciele, zorganizoval pre nás 2FRESH workshop. Zadefinovali sme tam, kto je MONO, aké má hodnoty a ako má vyzerať v budúcnosti, tiež sme analyzovali našich čitateľov a podporovateľov. Vďaka identite, ktorú sme na workshope určili, sa neskôr jasnejšie vyberala vizuálna identita, ktorá sa stala podkladom pre nový dizajn.

„Musím povedať, že až po prvom workshope s 2FRESH SK a ujasnení si persón MONO, sa mi MONO profiluje jasnejšie – ako samostatná entita nezávislá od konkrétnych ľudí v tíme. A to je aj jeden z cieľov, aby MONO nebol Tomáš, Dávid či Veronika, ale samostatná entita s vlastnými vlastnosťami. Ďalší cieľ je vedieť to presnejšie komunikovať,“ povedal Tomáš po workshope.
Druhý workshop, ktorý pre nás 2FRESH pripravili, sa zameral na archetypy. To opäť pomohlo lepšie definovať, kto MONO je a ako komunikovať s čitateľmi.

„Na začiatku workshopu sme odhadovali, že MONO bude mudrc alebo tvorca. Boli sme veľmi prekvapení, keď nám napokon vyšiel kúzelník, nad ktorým sme na začiatku nerozmýšľali,“ hovorí členka tímu Iveta Aldana.

Definícia kúzelníka však do veľkej miery vystihovala MONO, pretože kúzelníci sú vizionári, ktorí veria v zmenu a sú jej katalyzátormi. Snažia sa pôsobiť na ľudí a premieňať myšlienky na činy.

Od loga k vizuálnej identite

MONO 1.0 bolo definované najmä logom od Ondreja Jóba, ktorý ho vytvoril ako jasné, moderné a nadčasové. Chýbali nám však ďalšie vizuálne prvky, aby sme mohli komunikovať MONO ako značku a v tom nám mala pomôcť vizuálna identita.

„Keď sme sa s KAT štúdiom stretli prvýkrát, opísali sme im, čo znamená MONO pre nás a čo by sme potrebovali novým webom, dizajnom a identitou povedať starým aj novým čitateľom,“ opisuje vtedajší zástupca šéfredaktora MONO Dávid Tvrdoň.

Chceli sme od KAT dva návrhy. Jeden, ktorý by vychádzal z pôvodného loga a dopĺňali by ho font, farebná škála a vizuálne prvky, a jeden úplne nový, ktorý by zahŕňal aj nové logo. KAT štúdio nás prekvapilo, keďže sme dostali tri návrhy – tri cesty –, z ktorých jeden vychádzal z pôvodného loga.

„Každý z troch variantov bol kvalitný a mohli sme si vyberať podľa myšlienky, ktorú komunikuje. Veľmi pomohli ukážky praktického využitia vizuálnej identity ako v online, tak aj v offline prostredí. Oceňujem, že tie návrhy neboli uzavretými možnosťami, ale sami ľudia z KAT štúdia nás vyzvali na podrobný feedback,“ hovorí o priebehu šéfredaktor.

Aj keď sme pôvodné logo chceli zachovať, zistili sme, že je pri budovaní vizuálnej identity obmedzujúce. Nakoniec sme sa po dlhej diskusii v tíme rozhodli pre úplne novú identitu. To si myslí aj Michal Tornyai, grafický dizajnér a spoluzakladateľ KAT štúdia: „Logo od Ondreja Jóba bolo postavené na vizuálnej hre prekrývania znakov a opakovaní tvarov, čo ho robilo zaujímavým, napriek tomu v ňom nebol obsah alebo idea, ktorá by mala súvis s činnosťou a ideou MONO ako média.“

Nasledovali ďalšie rozhovory, počas ktorých sme všetko ladili. „Na jednej strane bol tím MONO, ktorý prichádzal s pripomienkami, na druhej strane bolo štúdio KAT, ktoré nám vychádzalo v ústrety a naše predstavy premenilo do funkčného vizuálneho dizajnu novej identity MONO,“ dopĺňa Dávid Tvrdoň.
Ako zhrnul Michal Tornyai, vizuálna identita MONO je postavená na textovom kurzore, ktorý je súčasťou logotypu, jednoduchom písme, výraznej farebnej škále a na použití fotografie. Teší nás, že autorom použitého fontu Uni Grotesk je slovenský autor Peter Biľak, ktorý napríklad vytvoril známku pre slovenské predsedníctvo v Rade EÚ alebo písmo pre parížske metro či viedenské letisko. V súčasnosti žije a tvorí v Haagu.

Ako bude MONO vyzerať

Na to, aby 2FRESH SK vedeli identitu priviesť k životu, potrebovali poznať presné pravidlá a výnimky z nich. Preto si k tomu sadli spolu s KAT štúdiom. Nebolo to ľahké, pretože dva tímy museli zosúladiť svoje predstavy.

Design Strategist z 2FRESH SK Jozef Benko vysvetľuje, na čo zamerali svoju pozornosť: „Vizuálne prvky ako fotografie, vizualizácie a videá majú v tomto dizajne veľkú vizuálnu prioritu. Dopĺňajú text o akési oddychové zóny, ktoré rozkladajú long read na kratšie celky.“

Tiež „typografia môže byť kľúčovým prvkom novej MONO identity. Vychádzam predovšetkým z princípov čitateľnosti na digitálnych médiách,“ dodáva.
Typografia, ktorá sa zameriava na typ, veľkosť, sklon písma a jeho umiestnenia, má v novom dizajne uľahčiť namáhaniu očí a zvýšiť čitateľnosť, čo sa dosiahne najmä veľkosťou písma a šírkou riadku. Po dohode sa použila pôvodná typografia od KAT štúdia a farebnosť 2FRESH prispôsobili digitálnemu prostrediu.

Z pohľadu tímu MONO bolo dôležité zvýšiť interaktivitu čitateľa s obsahom, a tým dosiahnuť väčší počet zdieľaní článkov a prihlásení na newsletter.
Samostatnou kapitolou bola výzva ako webdizajnom odkomunikovať, že MONO je projekt fungujúci z dobrovoľných finančných príspevkov a nie web s článkami zadarmo. Výzvy na podporu majú za cieľ dostať tento fakt do povedomia čitateľov a potenciálne ich priviesť k pravidelnému darcovstvu cez systém Darujme.sk.

O umiestnení, vzhľade a znení týchto výziev preto 2FRESH SK a MONO dlho a náročne debatovali. Rešeršom znalostí najmä amerických neziskových médií, ktoré sú pre nás vzorom (napr. Texas Tribune, Voice of San Diego a iné), sme získali lepší obraz o možnostiach fundraisingu špecifickom v online žurnalistike. Pri finálnych výzvach na podporu počítame s ich dlhodobým A/B testovaním a vyhodnocovaním.

„Osobne ma najviac potešila možnosť zhodnotiť článok jednoduchými odpoveďami ÁNO – NIE na otázku: Páčil sa vám článok? Odpoved NIE zobrazí feedback formulár, kým odpoveď ÁNO možnosť hneď sa stať pravidelným podporovateľom a pomôcť tak vzniku ďalších takých článkov. Podľa mňa je to nevtieravý a minimálne na Slovensku jedinečný spôsob, ako zapojiť čitateľa. Používanie budeme, samozrejme, vyhodnocovať,“ hovorí šéfredaktor MONO Tomáš Halász.

V návrhoch webu od 2FRESH už boli zaradené všetky dôležité prvky a my sme následne ponúkli spätnú väzbu.

Dynamická domovská stránka a dlaždicový systém

Nový web nám CREALAB vytváral na platforme WordPress, s ktorou MONO pracuje od začiatku. Má dynamickú domovskú stránku, kde sa mení farebnosť aj fonty v závislosti od témy. Na domovskej stránke je tiež dôležitý akýsi dlaždicový systém, kde je v každej dlaždici iný druh obsahu. Editori majú možnosť dlaždice každého článku formátovať rôznymi spôsobmi, a tak čitateľom komunikovať dôležitosť článku veľkosťou dlaždice a druh článku jej formátovaním.

Dôležitou časťou pri programovaní boli aj tematické podstránky, ktorých koncept sa rozpracoval práve pri redizajne. A, samozrejme, celý web je responzívny.

Zakladateľ a CEO CREALAB Gabriel Vojtko ocenil jasnú víziu redizajnu, ktorú dostali do rúk, no tvrdí tiež, že niektoré požiadavky boli nekompromisné. „Hlavnou výzvou bolo vytvoriť intuitívne administračné rozhranie, s ktorým by dokázal jednoducho a pohodlne pracovať aj laik. Do administrácie sme pridali možnosť rôznych nastavení šablóny, stránok aj článkov. Všetky tieto funkcie správcom webu umožňujú prispôsobiť si vizuál webu podľa vlastných predstáv a potrieb,“ vysvetľuje Gabriel Vojtko.

Vedieť si pohodlne vyskladať obsah webu bola jedna z našich požiadaviek. „Na frontende sme preto implementovali drag&drop builder. Vďaka nemu dokáže web intuitívne a jednoducho obsluhovať aj úplny začiatočník pričom zmeny, ktoré vykonal, uvidí v reálnom čase,“ opisuje technické riešenie nového dizajnu Gabriel Vojtko. To vyplynulo z grafických podkladov a zadaní, ktoré vypracovali 2FRESH.

Pri programovaní mysleli CREALAB aj na čitateľov, aby všetko ladilo a vytváralo kompaktný celok.

Nový dizajn sme aj otestovali

Okrem programovania prebiehalo v poslednej fáze aj UX testovanie dizajnu.Vďaka testovaniu sa zistí, či návštevník stránky rozumie obsahu, vie sa na nej orientovať a dokončiť cieľ, pre ktorý sa na nej ocitol.

Katarína Zalánová, Researcher a UX Designer z 2FRESH SK, hovorí, že cieľom testovania prototypu MONO bolo preveriť jeho použiteľnosť a zistiť reakcie čitateľov ešte pred jeho úplným dokončením. „Zamerali sme sa najmä na to, či ľudia zo stránky chápu, čo je to MONO, ako sa im číta článok, ako si vyberú ďalšie články, či si vedia nájsť potrebné informácie na stránke a celkovo sa na nej zorientovať.“

UX testovanie zamerali na čitateľnosť, pretože tá je pri dlhých textoch zásadná, a na estetiku fontov. V 2FRESH SK získali názor odborníka na fonty a aký majú podľa neho vplyv na celkový čitateľský zážitok a následne robili kvalitatívny test na vzorke respondentov.
Pýtali sa ich, aký majú zážitok z čítania a na fonty, nechali ich čítať nahlas a sledovali chyby a tiež merali rýchlosť čítania, pričom v závere pokladali kontrolné otázky týkajúce sa porozumenia textu. UX testovanie tiež obsahovalo interview a sledovalo názory skupiny, A/B test na dva druhy fontov a kvantitatívne porovnávanie.

Dôležitý bol aj výber respondentov, aby sa zabránilo skresleniu výsledkov, preto to boli ľudia, ktorí reprezentujú typ čitateľa MONO. Testovanie ukázalo, že čitatelia zo stránky pochopili, čo je MONO a dokázali tiež určiť miesta, ktoré bolo treba doladiť, preto 2FRESH zhodnotilo testovanie ako prínosné.

„Mňa zaujalo, že aj napriek tomu, že išlo o prototyp a stránka bola zobrazená ako tzv. wireframe, čiže ešte ‚nevyfarbičkovaná‘ a niekde nebol úplne relevantný obsah, čitatelia na ňu reagovali veľmi pozitívne a vyslovene sa im páčila. Aj keď testujúci MONO pred testovaním poznali len chabo, ak vôbec, už prototyp a zobrazené články v nich dokázali vzbudiť chuť čítať články a dokonca sledovať aktivity MONO,“ dodáva Katarína Zalánová.

Dizajn je len začiatok

Spustením nového webu sa pre nás v MONO nič nekončí. Naopak, veľmi sa tešíme, že máme peknú platformu, na ktorej budeme publikovať nové, podnetné články, na ktorých už teraz pracujeme.
Bolo náročné zhmotniť našu predstavu o tom, ako by malo nové MONO vyzerať, ale skromne si dovolíme tvrdiť, že sa nám to s partnermi podarilo. Úplne to však rozhodnete až vy, naši čitatelia, lebo chceme naďalej testovať a vyhodnocovať výsledok, práve pri aktívnom používaní.

MONO má nový dizajn, čo na to hovoríte?

Napíšte nám, budeme vďační.

Ďakujeme partnerom, že do tohto projektu s nami išli. Bolo nám cťou spolu vytvárať nové MONO.sk.

2FRESH SK

2FRESH SK je digitálna agentúra. Zameriava sa na výskum, stratégie služieb a produktov, dizajn a použiteľnosť digitálnych rozhraní.

KAT štúdio

Grafické dizajnové štúdio KAT sa venuje najmä firemnej a produktovej identite, ale aj tvorbe tlačovín, písma a ilustrácií.

CREALAB

Online marketingová agentúra CREALAB sa zameriava na vytváranie webových stránok, navrhuje online marketingové stratégie a realizuje kampane.