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.

New Management Portal for CodeGuard Partners

At CodeGuard, we have the privilege of partnering with some of the best hosting and web service providers in the business. Some of these partners refer customers to CodeGuard.com to sign up, but others offer our service to their customers through an API-driven integration. With this kind of arrangement, partners interact with CodeGuard through our REST APIs to create new customer accounts, configure backups, generate Single Sign-On links and more. This provides a great experience for customers and allows our partners to offer CodeGuard at scale.

One of the dashboards in the CodeGuard operations center

We do our best to make our backup solution as reliable as possible and integrated partners work hard to streamline the customer experience by automating the process of configuring websites and databases for backups on our platform. However, as the customer base grows, the partner platform is updated and customers make adjustments to their own accounts, issues affecting CodeGuard backups can arise.

Read More “New Management Portal for CodeGuard Partners”

MalwareGone Threat Analysis – WSO FilesMan Backdoor

Note: This is the first post in a series of in-depth investigations into threats that have been detected by the CodeGuard MalwareGone tool. In each post, we will pick a specific kind of malware, trojan, virus, backdoor, rootkit, etc. to dissect and discuss. We will also provide manual removal instructions at the end, just in case you’re not yet using CodeGuard.

For this inaugural post, we will be looking at a modified version of the WSO FilesMan backdoor, which is a PHP webshell designed to control the whole system. Here is just a piece of the PHP file that was named prbnts.php and located in the /wp-includes/js/jquery/ui/ folder, which usually only holds JavaScript files (.js):

<?php
eval(gzinflate(base64_decode("5b37W9tG0zD8c+7r6v8gVLeyG2NsQ9IUsBNCICEHSDkkaSCv
(...)
?>

As you can see, the file is encoded in base64 and compressed with the PHP core gzdeflate function. When we decode and decompress the file we get something more readable:

$color = "#df5";
$default_action = 'FilesMan';
$default_use_ajax = true;
$default_charset = 'Windows-1251';

if(!empty($_SERVER['HTTP_USER_AGENT'])) {
  $userAgents = array("nouseragenthere");
  if(preg_match('/' . implode('|', $userAgents) . '/i', $_SERVER['HTTP_USER_AGENT'])) {
    header('HTTP/1.0 404 Not Found');
    exit;
  }
}

 

This gives us some clues that file is malicious and shouldn’t be there. Even if you aren’t tech savvy, just searching for the first four lines on Google will show you some hints that this file is a backdoor and the first findings date back to the end of 2010. More specifically, the malicious file is a PHP Web Shell, or just PHP Shell, which is a shell wrapped in a PHP script and it uses built-in PHP functions to execute commands on the system. With it, we can do basically anything on the server where it is located like upload or download files, install, run or delete programs and sometimes even create or delete users, depending on the web server’s user permissions. It is a bit similar to having an SSH (Secure SHell) connection to the server. Can you imagine the damage this could do? If you have your web shell on a server you literally “own” it. Now you know why people say someone got owned when their site gets hacked!

Read More “MalwareGone Threat Analysis – WSO FilesMan Backdoor”