Zpět
8 min čtení

Jak jsme redesignovali PPC Bee vol.2

Aplikace PPC Bee potřebovala nový design jako sůl. To, co původně bylo zamýšleno jako přidání pár nových funkcí, se změnilo na velký projekt redesignu. Vymysleli jsme novou chytrou drobečkovku, která měla zlepšit orientaci, navrhli novou strukturu a hierarchii a vytvořili nové menu. Pokud vás první půlka příběhu o novém designu PPC Bee minula, určitě si ji přečtěte. Zde se budeme věnovat tomu, jak nový design aplikace začal mít reálné tvary a jak to celé nakonec dopadlo.
Od
L'ubomír Ruska
| 29. 10. 2020

Rozložení a obsah - Děláme desktopovou aplikaci


Hned na začátku nás překvapila nevídaná shoda napříč celým týmem týkající se optimalizace pro mobilní zařízení. Žádnou dělat nebudeme. Pohlídáme si, aby se aplikace na malých displejích nerozpadla a zobrazila se jako zmenšenina desktopové verze, a to je celé úsilí které věnujeme mobilům. V tomto rozhodnutí nás podpořila data z Google Analytics, která ukazují, že naši uživatelé pracují s aplikací výhradně na desktopech. 

PPC specialistům, kteří si nosí práci v kapse, v budoucnu možná nadělíme dárek v podobě mobilní aplikace.

Ale zpátky k desktopu. Pro něj jsme potřebovali navrhnout co nejmenší možné množství rozložení stránek (layoutů), kterými by bylo možné zobrazit všechny stránky aplikace. Následovaly týdny skicování, přesouvání položek a testování. V této fázi nám hodně pomohlo, že jsme měli přesně definovanou strukturu a hierarchii aplikace. Věděli jsme tak, které části mají být vizuálně propojené a které mají vypadat, že jsou na vyšší nebo nižší úrovni.


https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDRHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0eed55340c7e92bb5e15df73ed207cd91fd5aea3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%209.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDRHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0eed55340c7e92bb5e15df73ed207cd91fd5aea3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%209.png

Výsledkem byla dvě základní rozložení, která je možné modulárně upravovat:

1. Levé menu a obsah roztažený na zbytek obrazovky.
2. Centrovaný obsah, ke kterému je možné doplnit pravý nebo levý sidebar.

Obě varianty je možné kombinovat s jedním nebo dvěma řádky hlavičky, podle toho, v jaké úrovni aplikace se zrovna uživatel nachází.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDhHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e4eee746239333ec50a240ec4f3a18874951acee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%2010.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDhHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e4eee746239333ec50a240ec4f3a18874951acee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%2010.png

Pro vizuální zobrazení stránek jsme se rozhodli využívat 8pixelovou mřížku a doteď to považuji za jedno z nejlepších rozhodnutí, které jsme udělali. Použití mřížky znamená, že všechny karty, tlačítka, formulářové prvky, nebo například hlavička, mají velikost v násobku čísla 8. Například tlačítka používáme ve 3 velikostech: 24, 32 a 40 pixelů. Také mezery mezi objekty (horizontální i vertikální) jsou vždy násobkem čísla 8. 

Proč zrovna 8? Násobky tohoto čísla nám umožňují ideální variabilitu. To znamená dostatečné, ale ne tak velké množství velikostí, které by bránilo přehlednosti. Také se velikosti dobře počítají z hlavy a jsou jednoduché na zapamatování.


https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e5bf5776e7268db558f0ca41dfef13e9f751dbe3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%2011.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e5bf5776e7268db558f0ca41dfef13e9f751dbe3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%2011.png

Barvy a emoce

Když jsme měli navržené rozložení, kompletní navigaci, celku chyběl jenom grafický kabát. Úkol to nebyl vůbec snadný. Navrhnout novou barevnou paletu tak, aby jsme se drželi našich firemních barev a zároveň je zmodernizovali a doplnili pro použití v aplikaci. Nejtěžší bylo neudělat aplikaci vizuálně příliš "divokou" a zároveň ji mít moderní a svěží. Vzniklo několik barevných variant, některé hodně odvážné. Jak ale vybrat tu správnou?


https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ace3434aad507c5ff383763a294fb1cc8d532aa3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%2012.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ace3434aad507c5ff383763a294fb1cc8d532aa3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%2012.png


Odpověď nám poskytl test formou emočních karet. Jde o výběr slov ze seznamu podle toho, jak na vás aplikace působí. Test probíhal následovně. Nejdřív jsme si standardní seznam 90slov trochu zjednodušili. Některá slova pro náš test totiž nebyla vůbec relevantní. Každý člen z produktového, obchodního a marketingového týmu vybral ze seznamu tři slova, u kterých by chtěl, aby pro naše klienty definovala PPC Bee aplikaci. Výstupem byla množina slov s prioritou podle četnosti.


Následně jsme prezentovali klientům návrhy designu a nabídli jim stejný seznam slov. Z něj vybrali ty výrazy, které pro ně nejlépe vystihují jejich pocity.  Získali jsme tak informace o tom, jaké emoce konkrétní návrh v našich klientech vyvolává a mohli jej konfrontovat s naší představou. Výherní varianta celkem jednoznačně kopírovala nejčastější slova z našeho seznamu. Stala se tak pro nás ideální volbou a aktuálně ji můžete vidět použitou v aplikaci.


https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUlHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7626cb56adfb6ab777e52958bc860ea265650c1b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%2013.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUlHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7626cb56adfb6ab777e52958bc860ea265650c1b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%2013.png


Finální testování


Ve chvíli, kdy byla aplikace obarvená, pustili jsme se do závěrečného testování. Prototyp z nástroje Axure i nám samotným poprvé poskytl pohled na funkční aplikaci v novém designu. 

Scénář pro testování zahrnoval ty nejdůležitější části rozhraní jako orientace v menu, nastavení, změna organizace a kampaně, filtrování kampaní. Při následném uživatelském testování nás Covid naučil, že když se musí, tak jde testovat stejně dobře na dálku jako osobně
I díky průběžnému testování jsme žádné větší nedostatky v návrhu neobjevili a aktuální podoba aplikace je z 95 % stejná, jako testovaný prototyp. Zbylých 5 % jsou následná vylepšení, která jsme vymýšleli v průběhu vývoje.


Po roce jsme v cíli


https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaVFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--73a892ac62d1fec69f374fabd06db0587c525287/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%2014.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaVFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--73a892ac62d1fec69f374fabd06db0587c525287/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%2014.png

Je to už pár měsíců, co jsme nový design aplikace spustili a každým dnem doděláváme a spouštíme další vylepšení. Sbíráme zpětnou vazbu a vyhodnocujeme, jak se redesign povedl. Zpětná vazba od klientů je veskrze pozitivní. Oceňuji hlavně, že jsme se nepouštěli do žádných experimentů ani se nesnažili být přehnaně trendy. Identifikovali jsme problémy a odstranili je. 

Co je nejdůležitější, připravili jsme naši aplikaci na velké novinky týkající se typů kampaní a dat, které chystáme. A nemusíme se bát, že by je klienti nenalezli, nebo nevěděli, jak je použít.


L'ubomír Ruska
Editor PPC Bee
Zkuste trial na 30 dní zdarma
Zrušit lze kdykoliv. Platební karta není potřeba.
Registrace pomocí Google účtu
Jste již přihlášení
Přejít do PPC Bee

Související články

Další články

Data enrichment

Cílem PPC Bee je poskytnout uživatelům prostor, v němž mohou co nejefektivněji a plně automatizovaně spravovat své on-line kampaně. Společně s PPC specialisty víme, že základem pro jakoukoliv kampaň jsou kvalitní vstupní data. A proto vznikla také funkce data enrichmentu, tedy možnost obohatit původní datové zdroje o data, která v sobě původní feed zatím neobsahuje.

Od Marie Majerová19. 8. 2021 | 5 min čtení

Další články

Jak jsme se kvůli covidu museli přestěhovat

V kancelářích na Smíchově jsme působili od založení naší firmy před 6 lety. Posledních několik let jsme si užívali luxusu v podobě téměř 500 m2 industriálního open spacu. Než nám do toho covid hodil vidle ...

Od Hanka Habermannová22. 6. 2021 | 12 min čtení

Další články

K čemu je firmě vlastní psycholog?

E-commerce je prostředí, které se hýbe kupředu mílovými kroky. Potřeba být agilní tu má své fixní místo. Covid celou situaci ještě umocnil. Na všechny jsou kladeny obrovské nároky v kontextu pracovního výkonu, osobního nasazení a rozvoje. Do toho je potřeba tak nějak žít, věnovat se rodině, osobním zájmům, pečovat o svoje zdraví a občas taky najít čas na odpočinek a regeneraci.

Od Hanka Habermannová 8. 4. 2021 | 8 min čtení