WordPress Hosting Comparison

Sarah Lewis of WP Moxie has developing WordPress themes, plugins, and tools for almost a decade. So you could say she knows a thing or two about making sure WordPress sites not only work, but kick some serious ass.

Slow page loads and site crashes can cripple a site, so sub-par hosts are a no-go. To make sure she was providing her clients with the best hosting recommendations she could, Sarah went out and tested… and tested… and tested.

WPHostComparison_SMALLER-01

The Challenge

Sarah wanted to visualize her testing results in an interesting and user-friendly way so that her designer clients could easily see the tradeoffs of cost vs. performance, and could quickly compare hosts and choose the one that best fit their needs. She approached me with her (slightly unwieldy) Excel comparison and asked if I could help.

The key information she wanted visualized included:

  • Whether it was a generic host or one that was optimized for WordPress.
  • Location of the host
  • Monthly cost for a basic hosting package.
  • Pingdom test results (page load speeds and an average rank)
  • Blitz.io test results (how the host responds to an increasing number of users: how long it took to respond, how many errors occurred, and how many users it maxed out at)
  • Load impact test results (how long it took to respond to some users making greater demands)
  • A summary of support services available (types, response times, etc.)

 

The Design

First, as with most data, I had to do some basic cleanup, including standardizing all of the test response time units into seconds and back-calculating some mins, maxes, and averages where they were missing. Once the cleanup was complete, I took a closer look at the types of data I was dealing with.

Some of the data was categorical (WP/non-WP, location, support types), and some was quantitative (speed, number of users, etc.). I decided to use color to differentiate between WordPress and general hosts, a map (naturally) to show location, and icons to illustrate the breadth of support options available for each host. Now… what to do with the other data? How could I create an easy comparison for the actual test data, which was numerical?

Since the visualization itself was more for comparison between hosts (individual test results would be illustrated in a table below the viz), I wanted something pretty intuitive, and which would summarize and show all or most of the variables at once. I settled on using a rose diagram in which each variable would be given an equally sized “petal”, with the amount of fill for each petal correlating to the value of the variable. The higher the value, the more of the petal was filled in.

Trouble was, some of the variables had “negative” connotations (where a higher value is considered bad – e.g. higher cost is seen as a negative) while others had “positive” connotations (where a higher value is considered good – e.g. the higher the max number of users a host can handle before crashing, the better). I wanted the rose diagrams to be easy to compare, and it seemed to me that mixing both types of variables would be confusing to a user. If they were all negative, a smaller rose would be a good thing (“good things come in small packages”). If they were all positive, a larger rose would be a good thing (“bigger is better”). Mixing the two would just be confusing and would make the charts harder to understand at a glance.

Now the challenge was which to go with: Good Things Come in Small Packages, or Bigger is Better? I let the data be my guide. The majority of the variables had the negative connotation, so I went with Good Things Come in Small Packages. I ended up using only the negatives for the rose diagram, and pulled the couple that were positive (Pingdom Test Score and No. of Max Users), which I summarized via a line of text below the actual roses.

The Brilliance of FF Chartwell

So normally executing this type of visual would be a pretty involved process, but I recently discovered the FFChartwell typeface by Travis Cochel, which made it a breeze. The typeface uses OpenType ligatures to transform strings of numbers automatically into charts. You simply type a series of numbers like: “10+13+37+40”, choose your typeface (in my case FF Chartwell Rose), turn on ligatures, and POOF: you have a fabulous chart.

The main challenge for me was that I was dealing with data on vastly different scales and with different units (cost in dollars, milliseconds of response time, error percentages, etc.), but the typeface needed values between 0-100 for each petal of the rose. I ended up normalizing all the variables against each other so that I could fit them into the 0-100 construct, which worked beautifully. The challenge from now on will be that if we decide to add new hosts to the comparison, I will need to re-normalize all of the values and recreate the graphs accordingly.

Thoughts?

Every project can be improved, and I’d appreciate your feedback on this one. How would you have visualized this data? Where can I improve? Let me know in the comments … I’d love to hear your thoughts!

Credits

Data and analysis by WP Moxie. Information design by Curious G Design.

Save