Proces tvorby webu od začátku do konce.

Tvorba webových stránek pro PPC specialistu | Honza Soukup

Tvorba webových stránek pro PPC specialistu

Michal Lysek je profesionál na volné noze, se kterým dlouhodobě spolupracuji. Jednou jsme se na schůzce bavili o webech a Michal se mě zeptal, jestli bych mu nepomohl postavit jeho web. Taková otázka vždycky potěší. Sestavili jsme konkrétní zadání pro web, odsouhlasili rozpočet a pustili se do práce.

## Moje role

Pomáhal jsem Michalovi s celým projektem

* Tvorba zadání
* Uživatelský výzkum
* Obsahová strategie
* Tvorba první verze textů
  * _Finální verzi nám udělala copywriterka Bára (Komuniké)_
* Wireframy
* Vizuální identita
* Focení
* Grafický návrh
* Kódování ve Webflow
* Uživatelské testování
* Nastavení měřících nástrojů

![Průběh tvorby webu](/media/progress.png)

## Uživatelský výzkum

V prvním řadě jsem potřeboval zjistit, více o Michalově podnikání a o jeho klientech. Definovali jsme si cílovou skupinu jako majitele rozběhnutých eshopů, kterým je 30-50 let (nevyrůstali s PC), jejich eshopy můžou mít certifikát "Ověřeno zákazníky" od Heureky.

Vyžádal jsem si od Michala kontakty na jeho současné klienty a zavolal jsem jim. Připravil jsem si na ně otázky a postupoval jsem podle STDC frameworku, abych zjistil, jak Michala vnímají a popisují v různých fázích spolupráce.

![Uživatelský výzkum - Detaily](/media/uzivatelsky-vyzkum.png)

Výstupem uživatelského výzkumu je tabulka s tím, co mi odpověděli jednotlivý klienti a klíčová zjištění.

_Výstup uživatelského výzkumu vypadal takto:_

![Ukázka výstupu z uživatelského výzkumu](/media/tabulka.png)

Klíčová zjištění:

* Zjistil jsem, že klientům záleží na tom, aby si spolupráci mohli vyzkoušet (ideálně zdarma) a až na základě výsledků se bavit o dlouhodobé spolupráci.
* Zjistil jsem, že pokud je první spolupráce úspěšná, tak nemají problém zaplatit si Michalovy služby, protože vydělají víc peněz, než kdyby ho neměli.
* Jedna z klíčových odpovědí z uživatelského výzkumu, která se opakovala: **"Pokud by nám nenabídl analýzu zdarma, tak bychom spolupráci pravděpodobně nenavázali.".**

Když jsem zjistil, na čem cílové skupině záleží, mohl jsem definovat obsah webu.

## Obsahová strategie

V obsahové strategii jsem vymodeloval ideální průchod návštěvníků webem. Definoval jsem jaké stránky, by měl web mít a jaké informace by měli na jednotlivých stránkách být.

### STDC framework pro Michala Lyska

**See** - Majitelé eshopu, kteří slyšeli o PPC, ale neumí si ho samy nastavit a nemají na to čas. Rádi by navýšili tržby.

**Think** - Majitelé eshopu, kteří ví, co jsou PPC a které kanály chtějí. Teď vybírají freelancery nebo agentury a porovnávají, co pro ně bude nejvhodnější.

**Do** - Majitelé eshopu, kteří chtějí Michala oslovit.

**Care** - Majitelé eshopu, kteří jsou Michalovi klienti více než 2 měsíce.

Zjistil jsem, že abychom mohli odpovědět na všechny otázky majitelů eshopů, ve všech 4 fázích STDC, tak budeme potřebovat 11 sekcí, které rozdělíme do 6 stránek.

_Výstup obsahové strategie vypadal takto:_

![Ukázka obsahové strategie](/media/obsahovastrategie.png)

Poté, co jsme si s Michalem odsouhlasili obsahovou strategii, tak jsem obsah vizualizoval pomocí wireframů.

_Wireframy:_

![Wireframy MichalLysek.cz](/media/wireframes.png)

Wireframy nám mimo jiné pomohli zjistit, kolik budeme potřebovat fotografií.

## Focení

Michal Lysek potřeboval pořídit fotografie. Definovali jsme si styl fotografií a jeden den jsme strávili focením v ateliéru Pod Vilami.

![Focení MichalLysek.cz](/media/foceni.png)

## Texty

První verzi textů jsme dali dohromady s Michalem, ale s finální podobou jsme se obrátili na Báru ( [https://komunike.cz/](https://komunike.cz/ "komunike.cz")).

## Grafický návrh webu

K tvorbě grafického návrhu webu jsem potřeboval definovat vizuální identitu. S Michalem jsme prošli několik možností a nakonec jsme se shodli na této.

![StyleGuide MichalLysek.cz](/media/brand.png)

Vytvořili jsme i vlastní ikonky.

![Ukázka vlastních ikonek](/media/icons.png)

_Grafický návrh webu:_

![Grafický návrh webu](/media/graficky-navrh.png)

V obsahové strategii jsme si definovali k čemu každá sekce webu má sloužit. Každá část webové stránky má svůj účel.

![](/media/sections.png)

## Animace

Abych zvýšit pravděpodobnost, že si návštěvník příspěvek otevře, přidal jsem animace při najetí myši.

![Ukázka animace](/media/michal-lysek-1.gif)

## Uživatelské testování

Uživatelské testování je nezbytnou součástí návrhu webu. Při testování jsme přišli na několik věcí, kterých jsem si při návrhu nevšiml. Například, že některé mezery mezi sekcemi jsou tak velké, že vytváří na mobilu dojem, že už tam stránka končí. Tyto chyby jsme opravili a web spustili. 🎉

Na výsledek se můžete podívat zde: [https://www.michallysek.cz/](https://www.michallysek.cz/ "www.michallysek.cz")

## Co na to říká klient?

Za první 2 měsíce po spuštění byla průměrná doba na stránce 1 minuta 49 vteřin a 1,29% návštěvníků webu si objednalo audit eshopu zdarma.

![Reference](/media/reference.png)

Zdravím! jsem UX designér na volné noze

Zdravím! jsem UX designér na volné noze

Pomáhám technologickým firmám a startupům vytvářet weby a aplikace s dobrým UX

Případové studie

Projekty na kterých jsem měl příležitost pracovat

Tvorba webových stránek pro PPC specialistu

Úvodní konzultace zdarma

Máte projekt se kterým potřebujete pomoct? Pojďme si zavolat

jsem@honzasoukup.cz

+420 702 390 021

IČO: 04694139