Zpět
7 min čtení

Redesigning PPC Bee, Vol.2

PPC Bee needed a new design and it needed it bad. What was originally supposed to be only a few new functions turned into a giant project of redesigning the whole thing. We figured out a new smart breadcrumb navigation to make the app clearer, designed a new structure and hierarchy, and created a new menu. If you missed the first half of our story of how we redesigned PPC Bee, definitely give it a read. In this article, we’ll talk about how the new app design took shape and how it all turned out.
Od
L'ubomír Ruska
| 30. 10. 2020

Layout and Content—Creating a Desktop App


Right from the get-go, we were surprised to see that the whole team agreed on the optimization for mobile devices—there wouldn’t be any. We’d take care to make sure that the app didn’t fall apart on small screens and would be shown as a miniature of the desktop version, and that was about as far as we were going to go in terms of mobile phones. Our decision was supported by data from Google Analytics which showed that our users work with the app on desktop computers exclusively.

PPC specialists who carry their workaround in their pocket might receive a gift in the future—a mobile app.

But back to the desktop version. We needed to design as few layouts as possible to show all app pages. This was followed by weeks of sketching, moving items, and testing. What really helped at this stage was that we had a precisely defined app structure and hierarchy. Thanks to this, we knew which parts needed to be linked visually and which had to look like they were on a higher or lower level.
https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBakVHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0c750b6b784b0fc5b890f9fea3068e500c474e99/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%209.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBakVHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0c750b6b784b0fc5b890f9fea3068e500c474e99/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%209.png


The result? Two basic layouts which could be edited modularly:
1. Left-side menu and content stretched across the rest of the screen;
2. Centered content with the option to add a left or right sidebar.

Both versions can be combined with one or two header lines, depending on which level users currently find themselves.

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

We decided to display pages using an 8-pixel grid, and still believe it’s one of the best decisions we’ve ever made. The grid makes sure that the size of all tabs, buttons, form elements or the header are a multiple of the number 8. For example, buttons are used in 3 sizes: 24, 32, and 40 pixels. By the same token, spaces between objects (horizontal and vertical) are also always a multiple of 8. 

Why 8, exactly? Because multiples of this number give us the ideal variability. That means a sufficient amount of sizes, but not big enough to make the app difficult to navigate. The sizes are also easy to calculate mentally and remember.



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

Colors and emotions

Once we designed layouts and a complete navigation, graphics were the only thing left that was missing. The task wasn’t easy by any means. Designing a new color palette so that we’d stick by our company colors and at the same time modernize and add them to be used in the app? Forget it. The hardest thing was to refrain from making the app seem too “wild”, but also keep it modern and fresh. There have been many colorful versions, some of them pretty bold. But which was the correct one?


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


The answer came to us in the form of an emotional card test—a process of selecting words from a list depending on which emotions the app evokes in you. The test went something like this: first, we took a standard list of 90 words and simplified it a bit as some of them weren’t relevant to our test at all. Each member of the product, business, and marketing team chose three words they hoped would define the app in the eyes of our clients. And the result? A set of words prioritized by frequency.

Then, we presented clients with draft designs and the identical list of words. They picked those which best captured their feelings. In this way, we got information on which emotions a particular design evoked in our clients and were able to confront it with our expectations. The winning version was clearly in line with our own list of most frequent words. For that reason, it became our choice and you can now see it in the app.


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


Final testing

Once the app’s coloring was done, we began the process of final testing. A prototype created by Axure gave us the very first look at the redesigned functional app. 
Our testing scenario included the most important interface features, such as a navigation menu, settings, changes in organization and campaigns, or campaign filtering. When it came to subsequent user testing, Covid taught us that when necessary, testing can be done remotely just as well as in person.
Thanks to continuous testing, among other things, we found no significant faults in the design and the current app is 95% the tested prototype. The remaining 5% consist of subsequent improvements we figured out throughout the development.


At the finish line after a year

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBalFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--5e1cd47c3d7bc885f9a2a2cfe9899c64c22ef795/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/Obrazek%2014.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBalFHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--5e1cd47c3d7bc885f9a2a2cfe9899c64c22ef795/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/Obrazek%2014.png
It’s been a few months since we launched the redesigned app, and we’ve been fine-tuning it and launching new improvements every single day. We’ve also been getting feedback and evaluating whether the redesign was successful. The feedback from our clients has been overwhelmingly positive. Users appreciate mostly that we didn’t experiment too much and didn’t try to be excessively trendy. Instead, we identified issues and removed them.
Most importantly, we got the app ready for the new developments in the campaign and data types we’re planning. Now we don’t have to worry that our clients might not be able to find or understand how to use them.


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

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í

Další články

Google Digital Marketing Transformation 2021: Situační leadership

Další rok pod hlavičkou Google Digital Marketing Transformation 2021 odstartoval workshopem na téma Situační leadership v podání psychologa a lektora Martina Konečného. Živá diskuse, praktická doporučení, spousta příkladů z praxe, sdílení s ostatními účastníky workshopu z řad CZ/SK agentur, hromada inspirace pro naši každodenní práci s týmem, ale i v osobním životě. To byl kick off Googe DMT 2021!

Od Hanka Habermannová25. 3. 2021 | 9 min čtení

Další články

Vzdělávání v roce 2020 aneb když udeří Covid

Témata spojená s epidemií Covid 19 nás provází téměř celým rokem 2020 a není divu, že jich máme občas už plné zuby. Proto se v dnešním článku nechceme zaměřit na výčet situací, v nichž nám nastalá situace ublížila. Naopak bychom se s vámi rádi podělili o to, jak nás nepříznivé okolnosti donutily přemýšlet nad věcmi jinak, podívat se na ně z jiného úhlu a začít s aktivitami, k nimž bychom se v běžném režimu zřejmě nedostali, ale které nám toho tolik daly. Možná, že i vy najdete v následujících řádcích nějakou inspiraci.

Od Marie Majerová29. 12. 2020 | 4 min čtení