Back
9 mins read

PPC Bee 3.0

0 1*ltcjul5fhxfqd1wecfisua0 1*ltcjul5fhxfqd1wecfisua
PPC Bee is about to undergo a drastic change — a dramatic UI refresh, with a focus on better navigation. Let us tell you how we got to this point.
By
PPC Bee
| Jul 25, 2018
The story of a lost user

Say you’re creating your first campaign. You’ve set up your data source, carefully chosen your products, and are just now starting to write your keywords. The variable for your product name in your data source doesn’t always give you just the product, so you’d like to change it a bit. But where? You visit the data source page, click the Edit icon, but all you can get to is a screen for editing the source name and URL. Frustrated, you look through campaign settings, organization settings, and more, but to no avail.

Where were your variables hiding? They’re on the data source page but behind the source name, not the edit icon.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFFEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--da4b2b703e151d38d55338095bb85c8cc334f7c3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/1-0*U5Ch1tSNdbS6Kjlw.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFFEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--da4b2b703e151d38d55338095bb85c8cc334f7c3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/1-0*U5Ch1tSNdbS6Kjlw.png


Bugs were all around

There were navigation problems all throughout PPC Bee. On some pages, you would get lost completely: Where am I? How did I get here? How do I get back? Where did the tab bar go?

For those new to PPC Bee, the main navigation bar was hard to notice. And when it collapsed into a hamburger menu on smaller screens, it was cumbersome to use. Several people used the wizard as their main navigation instead.

Determined to solve your navigation problems, we dove in, conducting several user tests and sifting through the feedback we were given throughout the years.

Iterative fixes

We prioritized big problems and easy changes. Like the data source problem from earlier. Or the header of the Template page, which had nothing to do with the template page. Or adding a direct link to variable editing from the keyword generator, to make it easier to discover.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFVEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--201f4f5e7f67417bb080bf20ee1440c9fbe9fed3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/2-0*FP3U2QvVeVrmWtKS.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFVEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--201f4f5e7f67417bb080bf20ee1440c9fbe9fed3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/2-0*FP3U2QvVeVrmWtKS.png



The new navigation bar

When redesigning the main navigation, we knew we needed to make it:
  • more noticeable
  • usable on desktop screens of standard sizes
  • capable of carrying our current navigation items + a few more.

A horizontal bar couldn’t fit item labels at an easily legible size. A wider vertical sidebar could, but they would take away from the vertical screen real estate, which, on certain pages, would actually be a problem.

That’s why we decided on a vertical sidebar with on-hover labels. As hovering over every icon to see what they mean can be annoying, there’s a hamburger menu that shows all the items at once.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3b43aa40a221a7e13b644c5406e297f6c52501b7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/3-1*7YX26kIvuiLrMyC1TZpF8A.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3b43aa40a221a7e13b644c5406e297f6c52501b7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/3-1*7YX26kIvuiLrMyC1TZpF8A.png


Designing the title bar

In redesigning the navigation bar, we encountered some growing pains. For some users, organization names can be quite long and there was no way to fit them into a sidebar. If the names were shortened for the collapsed bar, they could fit, but that would take away an important indicator of which organization the user was currently using.

At the same time, we also knew we wanted to have a clear place for identifying the current page. Drawing inspiration from a range of web apps, we decided for a bar at the top, with a page title section on the left and application-wide commands on the right.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGNEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--65525ed391f6ddbff3aa34d132690bb7982b3bd3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/4-0*4UtDuMVbxs930Fxs.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGNEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--65525ed391f6ddbff3aa34d132690bb7982b3bd3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/4-0*4UtDuMVbxs930Fxs.png



https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGdEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--959022fcba5103216e03d42743d2f68eed800774/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/5-0*VEPMDTuxaSjB60IL.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGdEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--959022fcba5103216e03d42743d2f68eed800774/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/5-0*VEPMDTuxaSjB60IL.png


The idea behind the page title section is simple: it lets you know where you are and lets you navigate up to the parent page. And since you’re most likely to try editing the title on the title itself, there’s a handy edit function baked in as well.

The right-hand section includes global commands that pertain to the app as a whole. It includes items that you’re used to from the previous design — your organization, app news, your account, and a button for the wizard.

Consistent navigation

Next, we set out to stick to a consistent navigation scheme.

The old scheme was particularly confusing with regard to certain subpages and their headers. Some pages on the same level included tabs, some didn’t. Sometimes, a child page would display its parent’s header, making it unclear whether you’re on the child page or on the parent page.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGtEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--621112ad8b6e797b0dabf8e96ec4205a5fd61128/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/6-0*u_NGdiem52Z0RGJ7.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGtEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--621112ad8b6e797b0dabf8e96ec4205a5fd61128/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/6-0*u_NGdiem52Z0RGJ7.png


https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG9EIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ec2d40017e4429dff654fd8f47f9a19414edfa7d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/7-0*VfuqBQmuBdZE-0CE.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG9EIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ec2d40017e4429dff654fd8f47f9a19414edfa7d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/7-0*VfuqBQmuBdZE-0CE.png


So we removed the tab bar from child pages, like keyword and ad text generators. We also made sure that the tab bar includes all pages that are on the same level.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDREIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--800488cc0c43f25293ed7e031235a587abbfd05f/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/8-0*er4HPCm1teeCxVc4.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDREIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--800488cc0c43f25293ed7e031235a587abbfd05f/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/8-0*er4HPCm1teeCxVc4.png



Empty states

Whenever you had no item in a list, PPC Bee would display the page for creating a new item rather than the empty list. Even though this page was a level below the overview, it kept the same header as its parent, along with a tab bar.

Removing the tab bar from child pages meant we now couldn’t jump straight to creating a new item. We needed to show an empty list instead. To avoid a blank page, we added some beautiful illustrations.

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--60e2a920b7be9b6c504a4e36e01e9a4a9dc601d2/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/9-0*ui-3AIQoBn89k7ic.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--60e2a920b7be9b6c504a4e36e01e9a4a9dc601d2/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/9-0*ui-3AIQoBn89k7ic.png


New wizard

Also related to navigation, we shrunk our wizard to give you more space on the page and fixed two important bugs:
  1. We made the video tutorials discoverable
  2. The wizard now always pertains to the campaign you’re currently visiting.

Here’s the new look:

https://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUFEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c0d9ca72ddd21f9d2274833a8c3425da47543c2f/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWxnQ2FRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--b1b529f8dfa4cfc5545b605b986d2f12cc3d32fa/10-0*LqQqHr7Ni_25NX_6.pnghttps://blogadmin.ppcbee.com/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUFEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c0d9ca72ddd21f9d2274833a8c3425da47543c2f/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQXJBRWFRT2doZ0U9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--21b5f9fec4a1a26d9fca8e4bc575ac97c48ec932/10-0*LqQqHr7Ni_25NX_6.png

We want feedback!

We’re excited to share these changes with you. However, as with any big change, we know there will be problems and we need you to tell us about them. Give it a spin and then let us know your experience in the comments below or via our contact form!

1 tdlzzyv7s4agz9u 1 bxta
PPC Bee
Editor of PPC Bee

Related articles

Read more

PPC Bee Partner Talks with Heureka.cz

Last week, we and our clients held the very first meeting from a planned series of events—PPC Bee Partner Talks. The pros running Heureka.cz were invited to the first Partner Talk which offered an interesting program spanning an entire afternoon.

By Adam VašendaOct 18, 2019 | 4 mins read

Read more

Data feed as a basis for product campaigns

Do you need to create PPC campaigns for searches that involve a large number of product or service variations? You can with PPC Bee — but you need to have a data feed at the ready. You’re in luck as data feeds are the subject of this article. We often encounter clients who’d like to use PPC Bee but don’t have any such data feed or aren’t even aware what it even is.

By Michaela ZákopčaníkováSep 3, 2018 | 4 mins read

Read more

A little throwback to 2018

How many lines of source code does PPC Bee consist of? How many new partners have joined our team? And how many pounds of honey have made the day of our clients and others?

By Michaela ZákopčaníkováJun 5, 2019 | 1 min read