Jak postupovat při návrhu malého webu s omezeným rozpočtem?

V této případovce se nechceme jen pochlubit provedeným redesignem. Ale především vám chceme na konkrétním případě ukázat jednotlivé postupy při návrhu malého webu včetně všech průběžných výstupů (skicy, fotky, prezentace i wireframy).

Kdo je náš klient

Společnost ARCH consulting s.r.o. poskytuje poradenství a zastupování klienta v oblasti optimalizace a snížení nákladů prostřednictvím moderních nástrojů.

Jinak řečeno, svým zákazníkům prostřednictvím aukcí nabízí snížení výdajů za služby jako plyn,
elektřinu či telekomunikační služby. Podrobnější informace o tom, jak a proč dokáže ceny snížit, najdete na stránkách společnosti.

Firma se prezentuje na adrese aukcejinak.cz, což je v rámci obsahu opravdu malý web do 20 stránek. Hlavním účelem webu je zejména poskytnutí podrobnějších informací potenciálním zákazníkům a budování důvěry. Neslouží tedy primárně jako prodejní web.

 

Takto vypadal web ve své původní podobě.

První zadání od klienta

Pro hlubší vhled do celého procesu pro vás máme i detaily v podobě úplně první poptávky a zadání od našeho klienta:

Dobry den,   na zaklade naseho telefonu bych vas rad pozadal o nabidku formy spoluprace na prepracovani soucasneho webu www.aukcejinak.cz tak aby odpovidal dnesnim potrebam. Cilem by melo byt navrzeni vhodne struktury web, aby se zakaznik dobre orientoval a pomohl jim s vyberem nasich sluzeb. Zakladni rozdeleni je Verejna Sprava, Podnikatele, Domacnosti, Software, Firma. Vystupem by asi mohly byt wireframy s funkcnimy bloky (ponecham na Vas).   Vetsinu veci tam jiz v nejake podobe mame, neni tedy treba vymyslet kompletne novou funkcnost od nuly, ale spise se jedna o logicke usporadani, flow ucesani apod. Samozrejme si take radi nechame poradit ve vsem co uznate za vhodne. Potom bychom urcite mohli spolupracovat na medializaci a PPC pro domacnosti.   S pozdravem, Robert Smol

Řešení – postup návrhu webu

Součástí zadání byl i rozpočet, který se pohyboval v řádu desetitisíců na samotný návrh. I pro tak malý web byl poměrně omezující (například prozkoumání cílové skupiny už tam prakticky nebylo možné realizovat). Proto jsme se rozhodli získat maximum informací přímo od klienta. A to formou půldenního workshopu, během něhož nám klient vyšel vstříc perfektní spoluprací. Data z workshopu společně s analýzou klíčových slov se stala podkladem pro návrh obsahu, stránek a struktury nového webu.

Celý postup zakázky vypadal následovně:

1. Seznámení se s projektem
2. Workshop s klientem
3. Analýza klíčových slov
4. Návrh obsahu, stránek a struktury webu
5. Skici a wireramy
6. 1 iterace – konzultace k návrhům

Jak vypadal workshop s klientem

Workshop byl nejdůležitější částí celého návrhu, a proto jsme mu věnovali maximální pozornost. Nejprve bylo potřeba si definovat, co chceme získat za informace:

1. Role webu v dosahování cílů firmy
2. Kdo je uživatelem webu a jaké má potřeby

         

Brainstorming nad potřebami zákazníků.

3. Jak lze naplněním potřeb uživatelů dosáhnout cílů webu a firmy

Postup pro generování nápadů na obsah, který bude dosahovat stanovených cílů.

4. Jak se lze odlišit od konkurence

Takto vypadal naplánovaný harmonogram:

• 8:30 úvod
• 9:00 cíle firmy
• 9:15 cíle webu
• 9:30 kdo je uživatelem
• 9:45 seskupení
• 10:05 pauza – kafe + prioritizace
• 10:35 – obsah – jak cílů dosáhnout
• 11:15 – popsat každého lístečky
• 11:45 – konkurenční výhody
• 12:15 – diskuse
• 13:00 časová rezerva

 

Náš klient během workshopu.

Předem připravená prezentace pak moderátorovi pomohla účastníky workshopu všemi kroky hladce provést a zajistit informace, které pro nás byly důležité. Pokud se chcete seznámit s podrobnějším průběhem workshopu, stáhněte si celou původní prezentaci.

 

Poznámky s postřehy z workshopu.

Co pro vás bylo z workshopu nejzajímavější?

Obsah a struktura webu

Nejprve jsme začali uvažovat nad obsahem webu, kdy jsme primárně vycházeli z informací získaných na workshopu a z analýzy klíčových slov. Obsah jsme vhodně seskupili do logických celků. U každého obsahového bloku jsme brali v potaz přemýšlení návštěvníka a jeho průchod webem. Zaměřili jsme se na to, co mají návštěvníci v danou chvíli udělat, jaké informace mají vidět, kam chceme, aby následně pokračovali. Soustředili jsme se i na to, jaká je jejich motivace a jak ji můžeme využít či podpořit. Z těchto poznatků jsme vytvořili návrh struktury webu.

 

První návrh struktury – díky malému rozsahu probíhala práce s obsahem na jednom papíře.

 

 

Takto vypadala finální struktura v Excelu.

Návrh jednotlivých stránek webu

Nakonec nás čekalo navržení jednotlivých stránek webu. Na tom, zda umíte, nebo neumíte kreslit, příliš nezáleží. Jak ostatně můžete vidět z následujících stránek. Důležité je zachycení myšlenky v jejím vývoji.

 

Průběžné nápady jsme si zaznamenávali na papír formou skic.

Už v průběhu předchozích prací jsme skicovali různé nápady. Měli jsme tak představu o ztvárnění jednotlivých částí obsahu a dosažení požadovaných cílů. Díky tomu jsme si vystačili jenom s drobnými skicami stránek a následným podrobnějším rozkreslením úvodní stránky.  

 

Hrubé skici několika stránek a rozmístění obsahu.

 

Podrobnější skica úvodní stránky.

Ke všem důležitým nebo typově specifickým stránkám webu se ze skic nakreslily wireframy.

 

Nad wireframy následně proběhla iterace formou diskuze s klientem. A navrhované úpravy se zapracovaly. Hotové wireframy si můžete prohlédnout na této adrese: klien­t.h1.cz/aukce­jinak/whsk.

Finální web

Vytvoření grafického návrhu a programování webu se ujala firma Giant interactive s.r.o.. Výsledek si můžete proklikat přímo na webu aukcejinak.cz.

 

Takto vypadá nový web.

Pro srovnání si můžete prohlédnout i vývoj, kterým prošla úvodní stránka.

Vlevo je úvodní stránka původního webu a zcela napravo pak její nová verze.

A jak po osmi měsících od dokončení návrhu hodnotí výsledek náš klient ARCH consulting s. r. o.?

S Vaší prací jsme byli velmi spokojeni, ne nadarmo jste jednička na trhu! A rádi se novým webem chlubíme. Moje osobní očekávání byla překonána, web je perfektní a dokážeme ho využívat pro svou propagaci.  Online klientů moc nemáme a nejspíše mít nebudeme, naše cílová skupina jsou a budou spíše města a podnikatelé, které hledáme přes vlastní call centrum a pomocí mailové komunikace, web nám ale neocenitelně pomáhá, aby si klienti mohli ověřit všechny informace a jít do detailu. Hodně nám záleží na tom, aby klienti získali jistotu, že i my jsme jednička, rozumíme tomu, co děláme a umíme to i přehledně vysvětlit. A náš web je toho nejlepším důkazem. Je přehledný, stručný, ale informační a výborně vypadá.   Ing. Aleš Choutka ARCH consulting s. r. o. Jednatel

Nevíte si rady s informačním webem? Přečtěte si článek o úpravě a vylepšení webu Plzeňskéých městských dopravních podniků.

Autorem článku je Jan Hlaváč aka Ošklivý sup.