PPC Bee 3.0

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.

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.

These two used to navigate to different places

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 the big problems and the 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.

New link for variable editing

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.

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.

A simple title bar of a first-level page
A more complex title bar, showing the context, editing, and a way to the parent page

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.

Keyword generator overview
A specific keyword generator, with the same header as its parent

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.

The new header on the campaign page

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.

An empty keyword overview

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:

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!