Skip navigation
factory /><div class=
Steve Grothmann
Project Manager
A practicing musician and former English teacher at NC State, Steve will post to highlight SIMPLIFICATION, if at all possible.

Steve Grothmann's Blog


Subscribe to this blog
Click this link to view blog as XML.

View a list of all Newfangled blogs >>
Subscribe to all Newfangled blogs >>


Benefits of Peer Usability Reviews

November 17, 2009 at 8:00 am by Steve G

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.



 

A Home Page Redesign for DataSynapse

October 23, 2009 at 3:36 PM by Steve G

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.

 



 

Going live, servers and DNS for a Newfangled Site

October 2, 2009 at 11:00 am by Steve G

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.

A Newfangled site's server setup

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


 

Mood Boards

June 30, 2009 at 4:33 PM by Steve G

At Newfangled we recently began using Mood Boards as a first step in our design process to establish a site's branding, typography, imagery, color palette and other design elements.  Mood Boards have been compared to an interior designer's initial swatch panel showing the fabrics and colors that will be used to design a room; a mood board can set the aesthetic course of a site, but does not represent any actual architecture like a page design mockup does.

Once a look and feel has been established, we proceed to lay out the home page and a few key interior pages, applying the approved “mood”. The images in our mood boards are not necessarily ones that would be used on the site; they could be used, but they are meant to establish and support the visual feeling of each independent board.

Here is a moodboard approved by the client.


And here is a final, approved design.


Note that the design does not include all of the elements indicated in the mood board--those elements may be spread across the site, and the board is also a jumping off point for a few rounds of design, so naturally things change. But the board established a palette and type of imagery that gave the designer a clear direction.

Another thing I need to note is that it is essential to make sure the client is completely aware of the difference between the mood boards and the actual designs yet to come. In one instance a client responded very positively to the mood board, which was presented via a template full of straight lines and square-cornered elements. After delivering some more organic-looking actual designs, we realized that the client's team loved the mood boards in part because they felt the sharp corners and precise lines fit their brand, and our designs had to be adjusted in that direction.



 

 1 | 2   Next >>