Back
7 mins read

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.
By
L'ubomír Ruska
| Oct 30, 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 of PPC Bee
Start your 30-day free trial
Cancel anytime. No credit card required
Sign up with Google account
Or use your email
You're already signed in
Jump into PPC Bee

Related articles

Read more

FAQs – Summer Edition

or Answers to the questions you’ve been asking us most often lately.

By Michaela ZákopčaníkováJun 24, 2019 | 2 mins read

Read more

Capitalization in Ads

In the past, PPC Bee automatically changed your capitalized words. Because of them your ads can be rejected (primarily by AdWords). There are, however, several clients whose brand name is comprised of uppercase letters, and there was no way for them to keep this in their ads. Thus we have decided to meet their needs and now we have enabled capitalized words in ads.

By Michaela ZákopčaníkováSep 5, 2017 | 1 min read

Read more

Maximize the Return on Your Christmas Campaigns with PPC Bee

The fact that Christmas is one of the economically strongest parts of the whole year probably doesn’t need to be stressed. But what can you do to set your product or service apart from the huge amount of ads targeting customers wherever they look? In this article, we’ll give you a few tips on using PPC Bee to make your Christmas campaigns more effective, thus maximizing their return.

By Marie MajerováNov 24, 2020 | 4 mins read