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.
Michaela Zákopčaníková
| 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.*U5Ch1tSNdbS6Kjlw.png*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.*FP3U2QvVeVrmWtKS.png*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.*7YX26kIvuiLrMyC1TZpF8A.png*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.*4UtDuMVbxs930Fxs.png*4UtDuMVbxs930Fxs.png*VEPMDTuxaSjB60IL.png*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.*u_NGdiem52Z0RGJ7.png*u_NGdiem52Z0RGJ7.png*VfuqBQmuBdZE-0CE.png*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.*er4HPCm1teeCxVc4.png*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.*ui-3AIQoBn89k7ic.png*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:*LqQqHr7Ni_25NX_6.png*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!

Start your 30-day free trial
Cancel anytime. No credit card required
Sign up by Google account
Or use your email

Related articles

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

Responsive Search Ads Now in PPC Bee

Last year, Google Ads introduced the option of posting a new type of text ads - responsive search ads. And now you can create these in PPC Bee, too! What do they look like? How can you create them? Keep reading.

By Adam VašendaDec 12, 2019 | 4 mins read

Read more

Why PPC Bee? Because you have to think Bing!

PPC Bee, a unique tool for managing and automating product campaigns in the world of e-commerce, has once again sprung with an innovation. This time a long-awaited and in practice tested connection with the Bing platform.

By Michaela ZákopčaníkováDec 5, 2017 | 6 mins read