As often as possible Newfangled holds professional development sessions for the Project Management teams to focus for an afternoon on a single area of web development. These valuable sessions have allowed us to step out of the workflow and exchange ideas about different aspects of our roles here at Newfangled. During a discussion about web usability I was struck by the variety of my coworkers' impressions about any given site's usability. As project managers we agreed on general practices, but as users, some individual preferences stood out. Sometime after this session my colleague Katie Jamison suggested that she and Jason Adams and I meet weekly to pass around our current prototypes and trade ideas about information architecture and usability.  These meetings have proven so valuable that I now consider them a necessary part of every site-building process. In even a fifteen minute review, two new sets of eyes clicking through a prototype can pinpoint usability issues that those closely involved might miss. It is surprisingly easy for simple efficiencies to be invisible, and since there is not usually time to leave a project and return with an objective eye, usability review sessions are an efficient way to get fresh ideas.

A Recent Example

On a current project for SteriPEN that is now in the whitescreen phase, the client's marketing team and I discussed how to display external links to online retailers that may carry different combinations of SteriPEN products. Before two internal review sessions, on the Product pages, links from sidebar widgets went to a Buy Online page where users could filter the online retailers by the category and product.

Here is a Product page at that stage of the prototype, with Buy Online in the sidebar...

...linking to this page, where the correct retailers were to be pre-filtered.

It took a fresh reviewer to suggest pulling the filtered retailer links right into the sidebar of each product page.

In a third review, another set of fresh eyes suggested that the retailers maybe should not be placed in the sidebar, since the sidebars could be reserved for more universal callouts rather than the page-specific function of displaying retailers for this individual product. So we placed the retailer links across the bottom of the page.

It's no news that objective critique can aid any creative process, but I am still amazed by how little time it takes a short review session to produce significant ideas for improvement.

DataSynapse will soon roll out this new homepage design, which began in the need to focus attention on four of the business's strategic areas. Our designer Justin's work was well received, and I think we really pulled off a focused upgrade that refreshes the look and meets practical needs (see the scrolling customer feature strip below.) 

Here are some before and after screenshots showing how this site met the strategic goal of highlighting four specific aspects of this business while also updating the look and general usability of the homepage.

Here is a before shot of the top of the homepage. The various features were all still serving their purposes; customer quotes were rotating through, the most recent news releases were being featured, etc, but four specific business-areas needed emphasis and it simply seemed like time for a new look, without undertaking a total site redesign. Also, some rebranding was required due to a recent administrative change.

Here is an after shot of the top of the homepage. Users now change the top marquee message by simply mousing over the four large buttons that signal a new strategic initiative for the company. The buttons click through to the appropriate pages.  This feature is very easily controllable in the back end; slides are simply uploaded and destination urls typed in.

Here is a before shot of the bottom of the homepage.

Here is an after shot of the bottom of the homepage. DataSynapse customers are now featured in a strip along the bottom that scrolls left and right, while each customer box clicks through to a case study that is already part of the site's content. On mouseover, customer quotes popup, with the "More" link also clicking to the case study. The open content area, great for a general positioning statement not covered in the top marquee, is still prominent, to the left and under the new stategy buttons. Resources of various types can be picked to become homepage features to the right. 

Note that some resizing of images will be necessary for the customers strip below, but all in all this upgrade does not require much content entry at all, since the features in this bottom part of the page all draw on content types that already exist on the site. The new homepage offers a fresh design to better use the site's existing resources.

While building a Newfangled site, the team has been looking at first the prototype and then the actual site on our development server, housed here at Newfangled Web Factory. When we go live, we will move the complete site and all the content to two servers (one webserver, one for the databases) dedicated to us at Rackspace. We've contracted with Rackspace for its Zero-Downtime Network™ and Tier 1, SAS70-certified data centers. We also use Rackspace's premium Rackwatch system to monitor all of the major systems running on the server. If our servers have an issue with one of these systems at 3 a.m. on December 25th, for example, someone from Rackspace will be physically present to immediately notify us and remedy the situation.

With Newfangled sites the DNS settings are typically left to the control of the client. Each domain (or url, like www.yoursite.com) that a client has registered has an "A record" that will need to be pointed to the Newfangled Live Server's IP address AFTER we have moved the dev site to the live server. Before going live, the Project Management Team always makes sure that the right person on the client's side has access to the DNS administration account and is ready for the call to change the A record.

The staging site will remain on our server here at Newfangled, and we will use it to preview any work that we do on the site. Note that as soon as you make a content change on the live site, the live and staging sites' content will not be the same again. When we make an upgrade, only the functionality will be transferred over from the staging site to the live site, not content- so after going live the content on the live site is the only content that matters.

Below is a diagram to clarify.

Below are some specifications for our hosting setup.

Hosting
Newfangled hosts it's customer's sites on shared servers and networking equipment that is managed by Rackspace. Newfangled handles the day-to-day operations and Rackspace is responsible for all the hardware and network connections. Rackspace guarentees 100% uptime on the network and 1 hour hardware replacement for the server.
For more details:
http://www.rackspace.com/solutions/managed_hosting/index.php

Backups
Daily backups are done using a third party system from i365.com ( formerly evault.com ). The i365 system remotely backs up the Newfangled web server to their remote storage facility and using AES-256 encryption end to end. Seven days of backups of the site's files and database are kept.

Platform
We are using two server's to host Newfangled sites: dedicated web and database servers.

Web Server Specs

• HP DL585 G2
• Quad Socket Dual Core Opteron 8216 2.4 GHz
• 8 GB memory
• Raid 1 - 2x10Krpm, 73GB, OS
• Raid 5 - 3x10Krpm, 270GB, Sites
• Red Hat Linux ES 4
• PHP 5.2.8
• Apache 2.0.52

Database Server Specs

• HP DL585 G2
• Dual Socket Dual Core Opteron 8216 2.4 GHz
• 4 GB HP RAM
• Raid 5 - 4x10Krpm, 400GB, database
• Red Hat Linux ES 4
• Mysql 4.1.22

Server Networking

• Cisco 2960 Gigabit switch
• Cisco PIX 506e Firewall