Redesign Scrapbooku a podpora sdílení portfolií na KISKu

S magisterským studiem na KISKu se pojí jedno důležité slovo — portfolia. Jedná se o osobní webovou stránku, kterou studenti využívají k reflexi svého studia v rámci KISKové komunity, ale i mimo ni. Důležité je, že do něj zapisují vše, co si ze studia odnášejí, co jim daný kurz dal či nedal a v čem se mohou rozvíjet dál. Slouží tak zároveň k sebeprezentaci a může potenciálně pomoci i s pracovním uplatněním. Portfolia jsou tudíž jedinečným zdrojem inspirace pro samotné studenty i zbylé studující a vyučující na katedře.

Na konci podzimu mě oslovil Dalibor Černocký (neskutečně aktivní a zapálený spolustudent) s prosbou o pomoc s vizuálem vznikajícího projektu zvaného Scrapbook, který se snaží portfolia studentů KISKu shromažďovat. Začal tak náš společný proces tvorby autentického vizuálu a zároveň redesignu stávající služby.

Scrapbook — O co jde?

„Na Scrapbooku shromažďujeme střípky z našeho studia. Cílem Scrapbooku je nebát se sdílet na čem zrovna pracujeme, i když daný výstup zrovna není podle našich představ. Díky vzájemnému sdílení víme, na čem pracují ostatní a můžeme se vzájemně podpořit.“

Scrapbook je webová stránka, která shromažďuje a pravidelně zveřejňuje články a blog-posty studentů KISKu. Studenti sami připojí své portfolio (pokud je zveřejněno na jedné z podporovaných platforem — Wordpress, Wix apod.) a tím souhlasí se zveřejněním jeho obsahu. Vše je silně svázáno s Discordovou komunitou KISKu, kde se nad články může diskutovat a zároveň probírat veškeré podněty a pocity, které v nás může vyvolat.

Scrapbook je především o sdílení a podpoře napříč naším studiem na KISKu. Celý projekt je zcela otevřený, proto je zdrojový kód spolu se statistikami veřejně dostupný. Skrz roadmapu na GitHubu lze pak číst o aktuálních úkolech a výzvách, do kterých se studenti mohou zapojit.

Scrapbook je v zásadě o vytvoření safe-space pro sdílení a vzájemnou inspiraci z našich portfolií. První kroky na KISKu (píšu z vlastní zkušenosti) mohou být matoucí a Scrapbook může být tím místem, který nás propojuje, seznámí a umožní nám dozvědět se, jak studium prožívají ostatní.

Scrapbook — Současný design

Původní myšlenka a design vychází ze stejnojmenného projektu organizace Hack Club — neziskové organizace sdružující mladé hackery a kódéry. Dalibor se tímto projektem inspiroval a vytvořil velmi podobnou službu na sdílení příspěvků z různých platforem, na kterých portfolia studentů fungují.

Původní vizuál KISKového Scrapbooku.

Designový proces

Moje role: Visual Designer

Čas: Se vším všudy okolo 1,5 měsíce (avšak ještě nejsme zcela u konce)

Nástroje: papír a tužka, Google Forms, Figma, Adobe Illustrator, Procreate, GitHub a Discord

Vzhledem k tomu, že jsem na návrhu nového vizuálu pracovala sama a zároveň se jedná o menší studentský projekt, jsou některé části designového procesu po obsahové stránce kratší. Snažila jsem se však k finálnímu řešení přistupovat pomocí designového myšlení a zároveň si tak celý proces bezpečně projít. Ilustrovat svůj proces budu pomocí double-diamondu, kterým postupně procházím všechny jeho čtyři části. V rámci testování jsem se pak jednou vrátila zpět k ideaci a v současné době s Daliborem pracujeme na dokončení celého procesu a implementování změn.

Popis designového procesu.

Poznávání

Na začátku jsem si s Daliborem (zadavatel a zároveň uživatel) orámovala jeho obecný problém a cíl. Z našich prvních konverzací jsme se bavili primárně o Daliborových potřebách, ze kterých poté vzešel celý komplexnější problém. Orámování jeho potřeb nám oběma pomohlo ujasnit, že se nejedná jen o vytvoření loga, což byl původní plán, ale, že bude třeba vytvořit zcela novou vizuální identitu pro Scrapbook.

Rámování probíhalo nejprve pomocí e-mailového rozhovoru, pak jsem využila on-line dotazník v Google Forms, ve kterém jsem se ptala na konkrétní otázky týkající se konkrétní představy vizuálního výsledku.

Klíčové potřeby zadavatele:

• Vytvořit pro Scrapbook rozeznatelné logo, které lze použít jako ikona záložky na webu a propagační materiály.
• Vytvořit prostředí, ve kterém se nebudou studenti bát sdílet a experimentovat. A pomoci jim překonat strach/blok ze sdílení vlastních (byť třeba nedokonalých) příspěvků.
• Vizuál by měl být hravý, inkluzivní, přátelský a minimalistický.

Díky veřejně dostupnému feeedbacku studentů na GitHubu a Discordu jsem byla schopná lépe pochopit, jak uživatelé dosavadní stránku vnímají a co od ní potřebují. To, co psali, bylo v naprosté většině pozitivní a Scrapbook v nich především podněcuje zvědavost. Několik studentů zmínilo obavy ze sdílení vlastního portfolia, které není ještě hotové nebo v něm nemají dost příspěvků. Tyto komentáře mi pomohly stanovit potřeby a obavy ze strany studentů (=uživatelů).

Klíčové potřeby studentů:

• Vytvořit místo, které bude shromažďovat portfolia studentů KISKu.
• Inspirovat a motivovat se z příspěvků ostatních.
• Zdůraznit, že ne všechna portfolia jsou hotová. Jde o proces ne finální výsledek.
• Jednoduchý a přehledný design, který ušetří čas proklikáváním portfolií.

Obavy studentů:

• Nedokonalost svých vlastních portfolií.
• Portfolia nejsou hotová a stále na nich teprve pracují, tudíž nemají dost příspěvků.
• Správa portfolia zabírá příliš mnoho času.

Vyvozování

Problém: Stávající vizuál Scrapbooku je převzatý a nemá osobitou vizuální identitu, která by byla spjata s KISKem nebo portfolii. Na Scrapbook je potřeba přilákat studenty, tak aby se nebáli sdílet své příspěvky. Jde tedy o vytvoření přívětivého, hravého prostředí, které vítá chyby a nesnaží se dosáhnout perfekcionismu. Řada studentů má obavy svá portfolia sdílet s ostatními, ale mají zájem si prohlížet portfolia jiných.

Cílová skupina: Bakalářští a magisterští studenti KISKu, vyučující KISKu.

Cíl: Vytvořit osobitý vizuální styl a logo v křivkách pro stávající Scrapbook. V nové vizuální identitě reflektovat hravost, minimalismus a přátelskost. Pomoci studentům ulehčit proces sdílení portfolia. Toho dosáhnout pomocí hravého designu a evokovat v studentech chuť se zapojit a společně experimentovat.

Pomocí dat z výzkumné fáze jsem si si vytvořila mapu klíčových slov/témat. Na Pinterestu, Behance a Dribble jsem začala hledat inspiraci podobných projektů na základě klíčových slov a vytvořila si moodboard.

Moodboard a key-words pro nový design.

Analýzou stávající stránky jsem identifkovala problematická místa, na která jsem následně mohla směřovat změny v novém designu.

Problémová místa stávající stránky Scrapbooku.

Ideace

Hodiny projíždění inspirace se nakonec přetavily v hodiny kreslení všemožných návrhů, náčrtů a kresbiček. S Daliborem jsme si určili paletu barev, která vychází z KISKového loga, MUNI a Hack Clubu. Z ní jsem pak vycházela se svým návrhem loga.

První logo jsem konzultovala nejprve s Daliborem, který mi poskytnul zpětnou vazbu a následně jsme logo zveřejnili na Discordu. Sledovali jsem reakce studentů a jejich podněty. Tam jsem dostala hodnotné poznámky od studentů KISKu. Největším problém s prvním návrhem designu je nedostatečná propojenost na KISK. Nové logo v nich neevokuje KISK. Popisuje například studentka na Discordu:

„Vypadá to teda skvěle, ale mě osobně chybí hmatatelné propojení na KISK a logo KISKu které znám. Co tím chci asi říct je, že kdybych přišla na tuhle stránku a viděla tohle logo tak mi nedojde, že to vůbec KISKové…už jsem si asi nějak na ten celý KISKový brand zvykla a mám ho ráda.“

Dala jsem to všechno dohromady a začala pracovat no novém vizuálním designu, který by více reflektoval potřeby studentů. Nedostatek kiskového ducha jsem prozatím vyřešila přidáním typicky KISKového pixelového fontu do názvu stránky. Z čehož vznikly finální prototypy.

Low-fidelity prototyp:

Low-fi prototyp.

High-fidelity prototyp:

High-fi prototyp nového designu Scrapbooku.

Testování

Prototypy jsem konzultovala s nezasvěceným člověkem, který mi pomohl odhalit některá problematická místa, která jsem následně opravila. Finální design, který v tuto chvíli s Daliborem implementujeme a spouštíme, konzultujeme se studenty KISKu na Discordu.

Závěr procesu

Hlavní změny designu leží ve sjednocení barev, vytvoření loga, které lze nyní použít jako ikona stránky a k propagaci na sociálních sítích. Pokusila jsem se vložit KISKového ducha do vizuálu Scrapbooku, bez toho, aby Scrapbook zcela přebíral KISKovou identitu. Rozložení stránky jsem ponechala poměrně stejné, jelikož se zdá být přehledné a jednoduché, což je jedním z důležitých potřeb lidí na KISKu.

Osobně si myslím, že by bylo dobré příště do procesu zapojit i hluboký rozhovor s uživateli a následné vytvoření persony, která by pomohla lépe reflektovat jejich potřeby. Vytvoření informační architektury nebo user-flow by pomohlo v dalších krocích zlepšit celkové rozložení stránky. V tuto chvíli s Daliborem přemýšlíme o vytvoření landing page a větší propojení na stránku MUNI KISK, která na Scrapbook odkazuje. Designový proces není zatím u konce!

A to je vše — děkuju za přečtení a budu moc ráda, pokud se k nám připojíte právě skrze Scrapbook nebo třeba Discord! 🌞