Navigation Refresh

Navigation Simplification

The simplification of life is one of the steps to inner peace. – Peace Pilgrim

One of CodeGuard’s main goals is to simplify the backup and restore process so that anyone could do it. With our website redesign, we aimed for just that. The biggest change we made to the app was to the navigation.

What’s different

Our top level navigation remains at the top of your screen, but we’ve combined some of the items making it simpler. The website-specific navigation has been moved just below the top level navbar. The less frequently used support and language option items were moved to the bottom of the screen to get them out of your way. We also put the On Demand Backup button right at the top of your screen to make requesting backups that much easier.

New top navigation with secondary navigation for your website.

 

New bottom navigation where you can log into the support center or change your language settings.

It’s all for you

Providing top of the line backups is our bread and butter, but it doesn’t do any good to our customers when they can’t find their way around our site. We are really excited for this change and think that it will help you find your way around our system easily and quickly.

Rolling out new themes

Here’s how we did it

When we began the making changes to our website’s look, we were faced with the question of how to make this transition seamless for our customers. We explored a few different options and ended up choosing one that involved splitting most of our views into two parts. One part contained all the code from our old theme, and the other contained the code from the new theme. Which code is served depends on the color_scheme attribute on the user viewing the page.

What worked well?

One great benefit of this method was that in order to switch between views, all you need to do was change the color scheme attribute on the user you are testing with from the back end. With this method, we were able to test on production without causing any problems for our existing users. Until we were ready to roll this out, no non-admin user had access to the new theme. Rolling the changes out was as simple as running a command to change all users’ color_scheme attributes to the new theme. We were able to do this in batches for a slow rollout until all users were using the new theme.

What was difficult?

We ran into a few instances where changes to the new theme would affect the old theme if the files weren’t properly split into new and old theme sections. It was important to test each change using the new and old themes to make sure that everything was still functional for the existing users. It was a bit more challenging to do code reviews on changes that other teammates made. When adding the new code to the file with the logic for displaying the right part, it made it look like the entire file changed, so using a tool like GitHub’s file comparison tool was unhelpful.

Is this how I should do it?

This was the method that we chose, but there are other methods out there for rolling out a website redesign. Some will create a separate development site to do all their testing and then simply replace the old site files with the new ones when they’re ready to launch. Another way is to slowly make changes to the site and roll them out to production until all changes have been made. Any way you do this will have its own benefits and challenges. I would suggest figuring out your goals for the roll out and weighing the pros and cons of your different options.

The Importance of Style Guides

Why should I use a style guide?

Style guides are a best practice for website design. They ensure that all aspects of the website are consistent by making sure that there are no questions on how to style any aspect of your site. This is especially important on websites that have a team of people working on it making sure that everyone is on the same page. This will keep your website from looking like a Picasso painting and more like the Vitruvian Man.

How did you do it?

We implemented our own style guide when the site was first built. During our recent interface changes to our app, we updated and improved our style guide. The CodeGuard style guide consists of a table of contents, a list of components, examples of these components with sample code, and any notes needed about each element. Our development team frequently references this guide anytime changes are being bade or new tools are being added.

Keep it consistent!

Keeping your website consistent is a key to a great user experience and a good looking site. You can make your style guide as simple or complex as you need it, but the more information available on it, the more benefit you will get out of it. For ideas on how to create an awesome style guide, check out these great examples:

Prioritizing Changes

 

The next part in our series of redesign tips and techniques is discussing the prioritization of the changes that you will be making to your website. There are three things to think about when going through the prioritization: Audience, Impact, and Difficulty. Taking these factors into account will help you quickly identify where to begin the actual redesign process.

Audience, Impact, Difficulty

Identifying the audience simply means asking “Who will be looking at this or interacting with this? Will it be all or most of your customers? A subset of customers? Admins only?” Once your audience is identified, what will the impact of this change be? Is it something that is related to the functionality of your product? Is it a page or tool that is used daily? Maybe it’s just a setting that doesn’t get used very often or only by a subset of customers. Lastly, consider the difficulty. How much time and resources will it take to complete this item? Is it something that can be done quickly in an hour, or will it take a week to finish?

How to prioritize

Once you’ve identified the three factors above, you will want to put each item in order of its prioritization level. The first items should be the ones that affect the most customers and have the highest impact and the lowest difficulty. These get you the most bang for your buck, so to say. Where you go from here might depend on your own situation. Below is a chart of how we prioritized our changes based on these factors:

Order Audience Impact Difficulty
1 Customer High Low
2 Admin High Low
3 Customer High High
4 Admin High High
5 Customer Low Low
6 Admin Low Low
7 Customer Low High
8 Admin Low High

The key to prioritization is to help you get the most important changes completed first. Those with the highest impact on the most customers that can be done the easiest are the best place to start. Creating your own chart like ours above and labeling your changes for the three factors will help tremendously. As new issues arise during the redesign process, having this system in place will keep you on track and let you know if this is something that should be addressed immediately or put off for later on in the project.

Breaking it down: Component Identification

What is Component Identification?

Component Identification is the process of locating, categorizing and documenting all aspects of a website. This is a helpful step in the initial work of designing or redesigning a website. Go through all views of the site, making sure to capture any alternative states (error notifications, disabled buttons, etc.) to ensure that all items are identified. Then, in a spreadsheet or document, categorize and list each of these items. The level of detail taken in this process may vary depending on the size of the site, but the deeper the dive, the more helpful the results.

 

What to look for

As previously mentioned, it is important to capture each component in all possible states. The best way to accomplish this is to generate a testing script that can be followed step-by-step to help hit each possible state. Below is a sample of our testing script:

  • Signup as a new ninja customer
  • Add a website using FTP or SFTP
  • (Connection Wizard)
  • (Watch Backup Progress Tracker) (hover over all tooltips)
  • Close Backup Progress Tracker
  • View all backups
  • View initial backup
  • Add a database
  • (Database howto page, wizard)
  • (Database Backup Progress Tracker) (hover over all tooltips)
  • Close Backup Progress Tracker
  • View all backups
  • Attempt to edit DB settings w/ bad creds and hostname

You will want to organize your components into categories. The categories needed will vary depending on the site. Our Component Identification categories were as follows:

  • Lists
  • Tables
  • Forms
  • Info Pages
  • File Pickers
  • Buttons/Links
  • Navigation
  • Pagination
  • Tooltips
  • Typography + Hierarchy
  • Unique Items

Why is this important?

There are many benefits of Component Identification. The first, and most obvious, benefit is that it helps you see every component on your site. This will give a good idea of what items need more attention than others helping to prioritize your next steps. The Component Identification document can be used as a roadmap for the actual implementation of the design or redesign. Following this will help ensure that the similar components are styled consistently throughout the site. If this is for a redesign, it will highlight where the previous design may have grown inconsistent. While it may seem like a tedious task during the process, the results will be well worth the time.

Drawing Inspiration For A Website Design

 Where do you start?

When redesigning a website or starting a new one from scratch, it might not always be easy to decide where to start. A great starting point is to take a look around to see what else is out there. Analyzing popular websites to see what they are doing well or where they can improve can be a terrific source of inspiration. Take that information to get those creative juices flowing. On our recent website redesign, we did just that.

 What to look for

It’s a good idea to focus on general aspects of a site, not on specific functionality. For instance, the three websites we drew most of our inspiration from are Dropbox, Harvest, and MailChimp, each for very different reasons. When we began our process of redesigning the CodeGuard web application, we knew we wanted a more modern, minimalist feel to our site. After looking around at other web applications, we really liked the way that Dropbox accomplished this. Their web interface is very clean and crisp making it easy to see and understand what you’re looking at.

 

One of the biggest changes to our application is to the navigation. Our basic navigation hierarchy calls for both a main navigation and a secondary navigation. Harvest, a time/project tracking service that we use has the same hierarchy. They have a main top navigation for their account-wide activities and a secondary navigation for section-specific activities. Navigating Harvest’s site is straightforward and simple which is exactly what we want in navigation.

The inspiration we took from MailChimp is their amazing style guide. It is super organized and takes out all the guesswork when implementing a new component. Check it out at ux.mailchimp.com.

Find your inspiration

With all the great content that’s out there, you are sure to find inspiration to help you on your journey for developing your design. Just be sure to keep in mind your core values and the needs of your customers, and you’ll be off to designing a top-notch website in no time.