WillieWeir.com Site Redesign

Willie Weir is an accomplished travel writer, author, photographer, public performer and bicycle tourist. He has published a book titled Spokesongs, and books public performances.

Willie had developed a Web site himself, and had been using the site for some time. While moderately successful, Willie thought that a new look with more targeted pages would improve both book sales and the number of bookings for his performances.

This case study lists the goals of the redesign project, shows before and after pictures of the site, discusses internal changes that were made to the underlying architecture, and draws some conclusions to the project.

Goals

The Red Arrow Group undertook a site redesign of WillieWeir.com in July of 2001. We had a number of goals for the site that were accomplished during this redesign project:

• Convert from frames to tables. Tables are supported equally in all browsers, and they print correctly too!
• Enhance the navigation menu. Change the fonts and colors to make the choices stand out more. The tips that appear when you hover over a menu item are nice, but unfortunately, they aren’t as obvious as they should be.
• Add a new home page. The current home page is the description of Spokesongs, but there isn’t a page that says what Willie is all about. Let’s put one there – that will also be a great place for announcements, and for a larger description of each of the navigation menu choices.
• Add consistency to the inner pages by creating a new top banner and adding it to the top of all of the pages.
• Make sure that Willie's photographic talents are highlighted by adding at least one picture to each page. In the future, we'd like to add a photo gallery to the Web site.
• Make sure that we pop a new browser window on all links off of the site. That way, we’ll keep the visitors on the site while allowing them to see the links that Willie recommends.
• Add updated speaking engagements … or if there aren’t any coming up, let’s put some links to your book (can’t see Willie in person? Buy the book!) and to the “programs” page.
• Add some audio to the speaking engagements and programs page.
• Convert the Programs page into a “features and benefits” straight marketing page. It wasn’t clear until the very bottom of the page that Willie is available for speaking engagements.
• Continue linking to the articles that Willie has published in Adventure Cyclist magazine.

Before and After Pages

Let's take a look at the old pages, and then the new pages.

WillieWeir.com Original Home Page

Note that the original home page is in frames, with the navigation frame located on the left side in black with red text, and the content frame with the white background. All of the text does not fit "above the fold," and the user must scroll down to see all of the features and Willie's book. Below is the second half of the home page.

Second half of WillieWeir.com original home page

Also note that the content portion of the page has a lot of white space.

WillieWeir.com redesigned home page

We decided to contain the entire home page in the "above the fold" area of the page, so that the user can immediately see everything that is available on the page. Our design breaks the page up into five different areas:

• Top banner: Willie's name, and what he does.
• Bottom navigation area: Contains a list of areas of the Web site. Each of these choices can be clicked, and takes the user to a new page.
• Right hand area: Contains links to the Spokesongs page, and to Willie's speaking engagement page.
• Left hand area: A place for Willie to highlight special things he is doing. At the moment, he has two programs in this area: Letters to Bob, and Travels in Cuba.
• Center area: Beautiful pictures showing Willie in his adventure travel mode, and some pictures of his travels. This montage is designed to tie together a number of aspects of the site, and also set the proper mood for the site.

This page, and all of the redesigned site pages, is implemented using tables. No frames are used.

Note that the background of this page is a solid color, which sets off the content and allows it to "float" in the browser window.

Inner page format of the original WillieWeir.com

Above is an example of the inner page format of the original WillieWeir.com Web site.

New inner page for WillieWeir.com

The new inner page design carries over the color scheme that was developed for the home page. The page is broken up into four different areas:

• Top banner: Willie's name, and what he does.
• Bottom navigation area: Contains a list of areas of the Web site. Each of these choices can be clicked, and takes the user to a new page.
• Right hand area: Contains links to the Spokesongs page, and to Willie's speaking engagement page. This is how Willie makes his living, and we wanted to make sure that it was available on every page.
• Center area: Another great picture showing some of the people Willie met on his travels. The picture has been moved to the right side of the page, and the list of programs offered is on the left. This adds prominence to the programs, and should drive more clicks on the programs.

Each page has a subject, which is shown as the top line of the content area. Also, we set off the quote with ruling lines rather than a colored box. This technique maintains interest without adding a potentially distracting color.

Internals

One of the things that always happens to a Web site is this: as more and more pages are added, page elements get copied from one page to another, and the same element may end up existing on many different pages. This makes it very difficult to maintain the site, and also to keep any sort of consistency between the pages.

During the site redesign, we took the opportunity to impose a certain architecture on the site's pages - so, when you see the top banner of a page, that element exists in only one place (page, or file) in the Web site. This makes it very easy to maintain a consistent look, as the element is in just one place. It also makes it simple to propagate changes throughout the site, as we only have to change the site in one place to have it changed everywhere. The Red Arrow Group uses a similar architecture on all of its sites, making it easy to maintain the site over time.

Conclusion

The new Web site is attractive, consistent, and easy to use. The redesigned internal architecture will make the site easier and less expensive to maintain over time.

The site has been well-received by visitors, and Willie should achieve a few more book sales and speaking engagements from the new site.