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.

Announcing: Updated CodeGuard Dashboard Interface

CodeGuard just got a facelift!

We have been working hard over the last few months to update the look and feel of the CodeGuard dashboard and are excited to announce today that it is available for everyone! Our goals were to implement the best practices in user experience for SaaS applications and streamline customer interactions. We talked with experts in the field and performed many usability reviews using a great tool called FullStory. This new theme will still provide all the functionality you know and love about CodeGuard with a more minimal and functional interface.

Same features, new navigation

One of the most noticeable changes we made was to improve the navigation. We rethought our information hierarchy and the result was that many navigation items were moved to more appropriate, easy to find locations. We also took special care to ensure that these changes would allow us to provide a similarly functional experience on smaller screens like phones and tablets. This new aesthetic will also ease the process of white labeling the application for hosting providers and resellers so that our partners can provide a seamless and integrated experience for their customers.

A fresh start!

We are very excited to share this new look with all of you! Over the last several years we have dedicated a tremendous amount of time and effort to providing industry-leading levels of backup reliability (99.999+%). We have applied that same kind of focus and rigor to our recent front-end changes. In our testing, we found that this new interface has succeeded in our internal goal of getting out of the way and allowing our customers to do what they need to do quickly, but we’re not going to stop here.  Over the next several months we will be building on and extending this new interface as we add more features and functionality for all of you!

If you have any questions, comments or feedback we’d love to hear it! Please drop us a note in the Support Center.

File Change Detection and Remediation

Today we are going to talk about something a bit less technical than our last post, but also very important for anyone that manages a website: how to detect and address file changes. Why? Well, reviewing your file changes is one of the best ways to detect and prevent your website from infections and hacking. When your website is hacked, the attacker or the malware could either change original files on your website or add new ones. Checking and monitoring any file changes on your server will allow you to take action right away in case anything suspicious happens. We’ll discuss how exactly how we can do that with more details in this post and share with you some tips and tricks for staying on top of changing files.

Fortunately, we don’t have to do this manually. Today there are tools like CodeGuard and many plugins that can help you track file changes automatically for sites built with WordPress, Joomla, Drupal, or anything else.

A little bit about hashing

To explain how file monitoring software works I’d like to first talk about cryptographic hash functions a.k.a. hashing. You might not know what this is, but I can assure that you have used it at least once in your life. 

“A hash function is any function that can be used to map data of arbitrary size to data of fixed size” – Wikipedia

What a hash function does is produce a unique string of letters and numbers that represent the input file. If you’ve heard the terms checksum, digest or signature, the value that the hash function returns is similar. These functions are very common in the security world and they are used to validate integrity and authentication. The most common hashing algorithms are MD5 and SHA, which have many versions like SHA-1, SHA-2 and even SHA-3 which was released in 2015 by NIST. Although MD5 and SHA-1 are not considered safe anymore to be used as cryptographic hash functions, they are still widely used as a checksum to verify data integrity, which is exactly what we need here.

Read More “File Change Detection and Remediation”

WordPress Remote Code Execution Vulnerability – How It Works

Recently, security researcher Dawid Golunski released an advisory describing a remote code execution vulnerability in the core of WordPress version 4.6 affecting the PHPMailer library. The vulnerability was published under CVE-2016-10033 and could be used by unauthenticated remote attackers against servers running WordPress with default web server configurations. In this post, we will summarize this advisory and explain the technical aspects of the vulnerability. To start, here is a short video of the exploit being executed by the researcher.

According to the WordPress Foundation, more than 40% of WordPress installations are still using versions 4.6 or older and could be vulnerable to this attack. If you are using WordPress, you should make sure to update to the latest version (4.8 at this time) as soon as possible!

 

Read More “WordPress Remote Code Execution Vulnerability – How It Works”