Zpět
12 min čtení

Jak jsme redesignovali PPC Bee vol.1

Byl další produktový meeting, středa odpoledne, červen 2019. S Pavlem, mým UX kopilotem, jsme na sebe koukali a čekali, kdo z nás první řekne, že zase jdeme věšet atomovky na dvouplošník. Z plánu, že do aplikace přidáme facebookové kampaně, editor obrázků a další funkce, jsme byli nadšení. Vrásky nám dělalo to, že už při stávající funkcionalitě bylo rozhraní aplikace nepřehledné a bylo stále čím dál náročnější nasměrovat uživatele tak, aby našli funkce, které potřebují.
Od
L'ubomír Ruska
| 27. 10. 2020
Naší snahou bylo protlačit alespoň několik vylepšení, která by použitelnost aplikace pozvedla. Nečekali jsme, že se z těchto několika vylepšení díky nadšení a podpoře vývojového týmu, stane kompletní redesign a jak moc to aplikaci zlepší. Přečtěte si, jak to celé probíhalo...


Orientace je základ

Již delší dobu jsme nosili v hlavě nápad, jakým způsobem pomoci uživatelům se v aplikaci lépe orientovat a rychle se přesouvat mezi kampaněmi a datovými zdroji. Představte si situaci, že upravujete klíčová slova ve své probíhající podzimní kampani a následně chcete upravit klíčová slova také ve své zimní kampani, kterou chystáte. Možná by vám teď pomohlo, kdyby jste se hodně rychle dokázali přepnout do zimní kampaně bez nutnosti vracet se na výpis všech kampaní. Takto zjednodušeně zněla hypotéza, kterou jsme potřebovali ověřit. 

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaElHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a9c1855b4510429010040b66b6d1b87dc0fac2eb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%201.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaElHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a9c1855b4510429010040b66b6d1b87dc0fac2eb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%201.png

Návrhem řešení bylo přidat do aplikace chytrou drobečkovku (drobečkovou navigaci). Ve standardní drobečkovce byste měli název aktuálně otevřené kampaně, který by vás po kliknutí odvedl na její hlavní stránku. V našem konceptu jste kliknutím otevřeli dropdown menu s odkazy na další kampaně. Jednoduše a rychle.

Nejnáročnější bylo nastavit, které úrovně se v drobečkovce zobrazí. Po několika iteracích a návrzích jsme dospěli ke dvěma úrovním: Přepínání organizace a přepínání kampaní a datových zdrojů

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaE1HIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--17ee8dfb503f9b9661a505d47bf94b002301ab9b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%202.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaE1HIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--17ee8dfb503f9b9661a505d47bf94b002301ab9b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%202.png

Pro testování nebylo nic jednoduššího, než připravit interaktivní prototyp. Dosud jsem pro pokročilé prototypování neobjevil lepší nástroj než Axure. Díky němu jsem už po několika hodinách práce seděl na videochatu s našimi klienty a testoval, jak s novou drobečkovkou pracují a jestli je pro ně navržené řešení přínosné.


Testování odhalilo několik nedostatků návrhu, které naštěstí šly jednoduše odstranit. Celý koncept se ale ukázal být přínosný a zlepšoval použitelnost celé aplikace. Hlavní nedostatek spočíval v jedné chybějící úrovni drobečkovky, která ztěžovala orientaci a zpětně vůbec nevím, z jakého důvodu jsme ji zprvu vynechali :) Aktualizovaná verze nalezené problémy vyřešila. A je to právě ta, kterou najdete zapracovanou v aplikaci. V hlavě už teď nosíme další plány, jak ji ještě vylepšit.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2b0f3a9f4d6a344c65403f33a476a7a60d4f8dc1/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%203.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2b0f3a9f4d6a344c65403f33a476a7a60d4f8dc1/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%203.png


Pokud byste očekávali, že jsme novou a skvělou drobečkovku po vyladění hned implementovali do aplikace, zůstali byste zklamaní, protože musela na delší dobu do šuplíku. Už od začátku návrhu jsme věděli, že její nasazení blokují jiné problémy aplikace, hlavně její nekonzistentní struktura. Ta se ukázala být celkem oříškem.

Struktura aplikace

Problémů se strukturou jsme si byli vědomi už delší dobu. Řešení ale vyžadovalo tak radikální zásah do aplikace, že jsme museli počkat na vhodnou dobu, kdy k tomu bude dostatek prostoru. Vhodná chvíle nastala, když jsme se s vývojovým oddělením dohodli na úpravě rozložení stránek.

Naštěstí jsme nečekali se založenýma rukama a nástřel nové struktury jsme už měli připravený. Proces, jak jsme k ní došli, vypadal nějak takto.

Prvním krokem bylo zmapovat stávající strukturu aplikace. Vždy, když toto mapování u nějaké aplikace dělám, překvapí mě, kolik se objeví stránek nebo modálů, o kterých skoro nikdo neví, že v aplikaci vůbec jsou.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFVHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bd7b055986bd21aea52900eb54ba3f3dbd99a6cf/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%204.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFVHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bd7b055986bd21aea52900eb54ba3f3dbd99a6cf/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%204.png

Dalším krokem bylo v myšlenkové mapě vyznačit problémová místa, nekonzistence a možná zjednodušení. Pro myšlenkové mapy jsem dlouhou dobu využíval extrémně jednoduchý nástroj Xmind zen. Během tohoto projektu jsem začal používat Whimsical, který má obrovskou výhodu v možné kooperaci a sdílení návrhů.

Začal také vznikat návrh nové struktury aplikace. Vycházel ze staré podoby, ale byl vylepšený o data z Google Analytics, dlouhodobě sbírané požadavky klientů a také požadavky od produktového týmu. Po několika sezeních, během kterých jsme strukturu ladili formou card sortingu, jsme byli konečné spokojení a nová podoba aplikace se začala rýsovat.  

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--68292da11a03e1a1ce85133dba0de8b043599a31/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%205.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--68292da11a03e1a1ce85133dba0de8b043599a31/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%205.png

Připravenou strukturu jsme se rozhodli netestovat samostatně, ale až v rámci interaktivního prototypu aplikace, kde je možné ji lépe vizualizovat.


Menu

Jsou věci, které když řešíte moc dlouho a díváte se na ně moc často, tak se vám začnou protivit. A pak jsou věci, které nesnášíte hned od začátku. A přesně takový vztah jsem měl s podobou menu v aplikaci. Levé menu samo o sobě nebylo špatné, ale obsahovalo položky, které nikdo moc nevyužíval a hlavně kvůli tomu, že zobrazovalo pouze ikony, a tak příliš nepomáhalo s orientací v aplikaci. O poznání hůře na tom bylo sekundární menu v podobě záložek. Nepřehledné, horizontální, rozdělené na dvě části s třešničkou v podobě velkého množství položek, které se nevešly na řádek. Prostoru pro zlepšení jsme měli hodně.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGNHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2e0cfa9ad5f81112034cafe8d0c9b52adaec720d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%206.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGNHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2e0cfa9ad5f81112034cafe8d0c9b52adaec720d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%206.png


S jedním z hlavních předpokladů přišel šéf vývoje Ondra, který řekl, že záložky v aplikaci k navigaci vůbec používat nebudeme. Dali jsme mu za pravdu a tento striktní předpoklad nás ve finále přinutil navrhnout jednodušší strukturu aplikace i samotného menu. 

Dalším z předpokladů bylo, že půjdeme proti trendům minimalistických menu v aplikacích a naopak levé menu doplníme o názvy sekcí. Důvodem bylo zlepšení orientace v aplikaci a použitelnost menu.

Třetí hlavní předpoklad byl používat maximálně 7 položek na jedné úrovni. Zde jsme si občas pomohli menší berličkou v podobě rozdělení menu pomocí nadpisů do více logických celků. Výsledek se ukázal být příjemně přehledný.

Návrh menu byl hodně provázán s návrhem struktury aplikace a při uspořádávání stránek jsme museli stále přemýšlet nad tím, jak to budeme vizualizovat v menu a drobečkovce. Prvním krokem bylo určit hierarchii v aplikaci. Ta vypadá následovně:
1. Uživatel a jeho organizace
2. Organizace a její nastavení
3. Kampaně a datové zdroje
4. Prvky nastavení kampaní a datových zdrojů

Z hierarchie vyplynulo, že menu potřebujeme jenom na dvou úrovních. Na úrovni organizace zobrazíme hlavní menu. A po otevření kampaně nahradíme položky hlavního menu nastaveními kampaně. Stejně to funguje u datového zdroje nebo nastavení organizace. Menu jsme doplnili o návratové tlačítko na vyšší úroveň.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGdHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e63b8ae3d9b8e9028e2e4935e58de96d87467d43/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%207.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGdHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e63b8ae3d9b8e9028e2e4935e58de96d87467d43/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%207.png


Výsledkem snahy o zjednodušení menu a také nezahlcování uživatele množstvím málo využívaných funkcí bylo schování sekundárních položek nastavení kampaně. Výběru těchto položek předcházela analýza dat z Google Analytics a konzultace s klienty a uživateli aplikace.

Položky nastavení v rámci celé organizace jsme vytáhli z menu a spojili je do jednoho balíku nastavení. Zde jsme měli dvě možné varianty umístění. Do hlavičky vpravo, nebo do drobečkovky vedle výběru organizace, což nám dávalo větší smysl v rámci logiky umístění. Obě varianty jsme testovali s uživateli. Ukázalo se, že všichni očekávali nastavení organizace v pravém horním rohu, i když je volba organizace na opačné straně obrazovky a vizuálně je k pravému rohu blíž volba kampaně i nastavení uživatele. 

Tento výsledek ukázal, že někdy může být i méně logické řešení pro uživatele lepší, protože jsou na něj zvyklí.
https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGtHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2c6589d95ceb14e7c062531425fb57d9df5ae2a1/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%208.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGtHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2c6589d95ceb14e7c062531425fb57d9df5ae2a1/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%208.png


Navržená struktura a vizualizace se v testování ukázala být mnohem použitelnější oproti starší verzi. Radost mi nové menu dělá hlavně z toho důvodu, že je mnohem lépe škálovatelné a připravené na nové typy kampaní a funkce.

Layouty, grafické návrhy a testování

Nejnáročnější část byla stále ještě před námi. Všechno to, na čem jsme doteď pracovali, jsme potřebovali vizualizovat. Museli jsme navrhnout nová rozložení stránky (layouty), upravit grafickou paletu aplikace a otestovat, jaké emoce nový návrh v uživatelích vyvolává. Pak všechno spojit dohromady a provést finální testování, které nám teprve mělo ukázat, jestli celé naše snažení bylo úspěšné. 

Jak se nám to povedlo a jestli jsme byli úspěšní si přečtěte v druhé půlce příběhu o novém designu PPC Bee.





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í