18 Nov

Measuring Design Changes

Screen-shot-2010-11-18-at-4.48.22-PM.png

A website update doesn’t always have to be a major departure from an existing website. If the site is functioning well across most of the important communication your organization requires, the site may benefit from some thoughtful updates in order to make sure that it meets its’ goals. This is the approach we took to the latest stressdesign update, which is now live at stressdesign.com. In addition to overall content updates, a few important changes to the site structure and design were considered to improve site performance. In this article we walk through the steps and discuss why we made the changes on the primary marketing and communication tool for our company.

 

 

Motivation and Goals

The website at stressdesign.com serves the company well and averages 600-1000 unique hits/month. These are good readership statistics for a professional service firm. Like many professional services, a more important measure than unique hits is the quality of the visit. We’ve been tracking this by monitoring two primary metrics: number of pages per visit and overall time spent on site. In August 2010 we looked at areas of the front-end and the back-end of the site that we could change to increase these metrics and overall performance of the site. Visits to a professional service firm  website aren’t about quantity, we need to have the right visitors stick around and see more of the site. To use an adage, a bird in the hand is worth two in the bush. Being able to engage one new meaningful contact is far more valuable than having site vistors that never interact with the studio. In website development parlance, this is called conversion. We present more detail about additional goals and how we achieved results later in the article.

Navigation

Over the previous 12 months, we were noticing that our bounce rate was increasing dramatically on the site. At one point, bounce rate spiked at ~80%. That means that more than three-quarters of our visitors viewed one page and then left the site.

stressdesign_siteupdate_review_navigation.jpg

We realized that while our navigation elements were intuitive to us, by reviewing our site statistics, we saw that our visitors didn’t know where to go, and worse, didn’t seem to want to explore to find out. We changed our main navigation items by very simply changing the titles to be more clearly about stressdesign. In the following months, we’ve seen our bounce rate reduce dramatically to below 40% and lower. Overall page views/visit and time-on-site improved similarly. Considering that the site is not an e-commerce, news site or information portal, this is a huge improvement.

Front Page and Overall Page Height

With monitor sizes trending toward wider letterbox style displays, we were seeing that our site page-layout was a bit too tall to be optimized for viewing. Subsequently, the footer on our website was not being seen by more than 50% of our site visitors. This was a missed opportunity for capturing mailing list subscribers, and on the front page, some viewers weren’t seeing below the sliding feature.

stressdesign_siteupdate_review_pageheight_1.jpg

 

We’ve reduced some of the whitespace in the page layout of the front page and throughout the site. The site requires less scrolling and is more compatible with a wider range of viewers, especially those who use laptop computers to view stressdesign.com. This is especially important on the front page to allow first time visitors to see the front page as designed.

 

Organization

 

Following the changes we made to the main site navigation, we reviewed site statistics further to find an opportunity to update sitewide organization. The biggest change is the separation of our portfolio and blog. Since launching the current evolution of site in 2006, and following a design update in 2008, our blog — known as Current — was intertwined with examples of our latest work. The result was, this approach diluted both sections of the site. Through talking with our site readers, this type organization was confusing as visitors weren’t clear about what we were presenting. With this update, we’ve drawn a line between our blog, and the portfolio section of our website. Our Work, the stressdesign portfolio, now includes an expanded testimonial section and an updated and improved case studies section. For the Case studies, the biggest improvements are on the back-end. The code that powers the Case Study has been improved to decrease loading time, and improve the rendering of the AJAX feature.

 

Contact

 

The Contact page had become a mish-mosh of information and the general page layout was poorly used. We re-organized the page and place the most important contact information on a single page. All of the primary information now is “above the fold” for more than 95% of site viewers. This allows our contact information to be displayed in a single glance. Refinements to the layout on this page make this information easier to find and read, and also serve an added benefit for mobile users. Site visitors viewing on tablets or smart phones will be able to click phone numbers to place a call. With the use mobile browsers on the rise, it’s important to consider how to make the mobile viewing experience useful.

 

Footer

 

As website design has matured over the past decade, site footers has become an increasingly useful and usable part of a website. We wanted a common place to list our growing suite of products and services as well as a centralized location for our social-media outlets.

stressdesign_siteupdate_review_footer.jpg

The icons for each are presented in monochrome. On roll-over we used CSS sprites to signal functionality and provide user interface feedback. We also added a row of additional text links out side of the page footer. These serve to improve SEO and to allow visitors additional ways to find frequently used content on the site. The result is a drastically improved use of space in the lower 1/3 of the site layout and provides additional promotion of items we want our visitors to see. This is the most recent change on the site and we’re still waiting to see results.

Content

All of the design updates are important to allow us to present new information and to allow site visitors to easily find what they’re looking for. We’ve updated the home-page banner feature, added 5 new case studies, and a dozen samples of recent work. Back-end updates that we’ve made including improvements in our content management system will allow the team at stressdesign to keep the site content more up-to-date with less effort. This is important to allow us to easily communicate new information and publish more content to our blog with less effort. Accomplishing this will encourage more updates more often. The same is true of any website.

Additional Details

Because a considerable portion of our contacts coming from outside Eastern Standard Time, we wanted to provide a way for those that found us from other time zones to clearly share local time.

stressdesign_siteupdate_review_timezone.jpg

To solve this, we added a 4-zone clock to the very head of the site. With our efforts to make the site fit in the most screens possible, it was important that this be legible and also that it doesn’t consume too much vertical space. At approximately 10px high, the time-zone clock fits nicely, remains legible and because it’s presented in HTML, is accessible. This feature has an added benefit for internal use, allowing us to easily schedule meetings with our clients across the country without having to load a separate desktop application or website.

In addition to these design changes, we regularly optimize and maintain our back-end code for improved loading speed and search engine optimization (SEO) to improve stressdesign’s appearance in organic and paid search engine results. Stressdesign.com is frequently displayed on the first page and is the first result in local design firm searches.

stressdesign_siteupdate_review_googlesearch.jpg

While these organic results change day-to-day we feel confident that when other organizations are trying to find a design company similar to stressdesign that we show up with relevance and frequency that helps make more viewer impressions.

Results

For this update, we had a number of SEO, content and usability goals in mind when we drafted our plan for this initiative including

  • Decrease site bounce rate
  • Improve site load times
  • Make it easier to update content
  • Promote stressdesign services and business units
  • Improve site usability

stressdesign_siteupdate_review_stats.jpg

 

At the time of this writing, most of the changes for the update program have been online for the past two months. By all counts the update that we did for stressdesign.com have exceeded all of our goals by double-digit improvements. The above graphic compares site usage from October 2009 through November 2010. Even though over all unique visits have decreased, pageviews have stayed consistent. Pages per Visit and Bounce rate have improved by ~20%, and our visitors are spending a whopping 49% more time on the site. From a maintenance perspective, site updates that used to take 2-4 hours can now be completed in half the time. Site code optimization has improved load times on all platforms by more than 50%. As mentioned earlier, while our overall unique visits have decreased by about 20%, page views have stayed consistent while pages/visit have increased 22%.

 

We think that these small layout and interface changes go a long way to improving the presentation and utility of the website. Comparing this with the information we’ve gleaned from our website analytics, we’ve got the proof to confirm our instincts.




Add Pingback