0
0

The Secret Life of a Navigation Bar

If you're a frequent visitor, you might have noticed our new look up top. We're constantly testing and tweaking our site, but adjusting the navigation bar is a pretty big deal. As the header of each page, it sets the graphic tone for every element that comes beneath it.

More importantly, as the way most people are going to find their way around a site, the nav-bar establishes the scope and hierarchy of all the pages it links to. The categories of the navigation bar tell the most basic story of your website, and even the smallest details deserve consideration. The purpose of this blog post is to give you a glimpse of some of the thinking that shaped our new look. So first things first, let's take a look at where we started.

If you've been in your account recently, you'll recognize that the 100px-or-so white bar and large logo mimic the design of the Wistia app itself. As a marketing tool for the product, it made sense for the style of the website to echo the look of the app.

As we began to offer more content and resources and as Wistia has become a household name (okay, that's a bit of a stretch), the visual analogy between product and website seemed less important. Instead, we tried to express the honest simplicity and intuitive functionality that lies at the core of our company culture, from our business decisions down to the code we write. Here's what we came up with, along with some notes on the details:

Color and Size

The toolbar is the same color as the background of the rest of the site (#f7f6f4, for the curious), and delineated only by a gradient on the bottom. This quieter style helps the nav-bar blend into the background, giving more focus to each page's actual content.

Buttons

Again, fewer and less-distracting graphic elements help emphasize what is most important: the content itself. As Dieter Rams put it, "Good design is as little design as possible."

Solutions Button (Removed, replaced with a Features section)

It turns out that there are a myriad of ways to use Wistia. Our old approach was to present a number of these different uses (marketing, training, collaboration, etc.), but we found that given the diversity of  needs and use-patterns, it was better to simply focus on the features themselves and let you decide what tools are relevant to your work.

Tour Button (Added to Features section)

This decision reflects the earlier point about "scope and hierarchy." Compared to the other main sections of the website, the Tour of the user interface is really very similar to some of the other feature pages. Grouping similar elements efficiently and minimizing the number of items on the nav-bar helps visitors understand the organization of the website quickly and easily.

Buzz (removed)

The video testimonials on this page were great, but it didn't seem appropriate to have an entire section of the website devoted to them compared to, say, Features and Support. After you've seen it once it's unlikely that you'd watch a testimonial video again, so we moved them to the Pricing page, where their influence will be more relevant.

Features Tab

Again, describing the product through its Features allows potential customers to focus on the parts of Wistia that will be especially useful to them. By making this a drop-down menu rather than a static page, the design encourages visitors to navigate through it (rather that simply to it), increasing the likelihood that they'll continue on and take a look at whatever feature catches their eye. To keep the whole navigation bar from looking too sleek and cold, we used colorful pictograms reminiscent of white-board drawings, which literally cover the walls here at Wistia.

Phone Number

Helpful and enthusiastic phone support has always been at the core of our customer service philosophy, so it makes sense that we had our phone number at the top of every page. By creating a full Support page, though, we'll be able to add more content and resources for anyone with questions. After all, not everybody likes talking on the phone as much as we do. Putting Support front-and-center on our navigation bar makes it easy for users to find the help they're looking for, but it also serves a marketing function by letting potential customers see what an important and fundamental part of our product it is.

Login Link

First of all, removing the phone number and the login link from above the buttons makes the whole navigation bar more legible. Adding Login to the row of buttons also hints that the content of the website is just as useful to returning account-users as it is to first-time visitors.

So that's the story of Wistia's new navigation bar! We'd love to hear your comments, and if you're embarking on a similar redesign, we hope this post inspires you to document and share your process.

Keep Learning
Here are some related guides and posts that you might enjoy next.