Don't Replace It, Grow It! How Forum One Refreshed Its Own Site

Forum One's Redesigned Website

You've probably heard the old adage, "The shoemaker’s children go without shoes." While we’ve been busy at Forum One designing and developing websites and online strategies for our clients, it’s been hard for us to find the time to refresh our own website, ForumOne.com.

However, a creative organization’s home page is its front door to the rest of the world, so it's important that it reflects quality of work that the organization is capable of creating.

When I joined Forum One last year, I knew that we needed to rethink our "front door." But our resources and staff were devoted to client projects, leaving us with limited time and staff available for our own redesign project. Instead of starting over and completely rebuilding our current website, we opted to recycle and reuse our valuable content and to evolve what was already in place by selecting the priority areas to focus on. This helped us reduce the overall resources needed to refresh our website. In this process, we were able to generate a fresh new look, highlight our most important content, and deliver a better user experience for our users.

We built the ForumOne.com website and Drupal content management system (CMS) which worked in our favor. Drupal is a robust CMS that allowed us to make changes rapidly and systematically. Additionally, we were able to partner with WebINK to power our new typography. Forum One is pushing the frontiers of web typography for our clients. However, most of our clients need reassurance when it comes to the reliability, scalability, and legality of any new technology. WebINK takes care of all of that while still giving us complete control over the code.

Forum One circa 2010

To make sure we achieved the design Forum One needed, I worked closely with Forum One's President, Chris Wolz, to identify several concerns with the current design, and then worked with a small design team in an agile fashion to quickly realize a fresh new design.

To ensure success in this phase we concentrated on five key goals:

1. Clearly define the services that Forum One provides. The original homepage highlighted three use cases, but didn't clearly state what Forum One does as a company. We added text outlining our four step process (plan, design, build, and grow) using these processes as on page navigation to show a use case illustrating each point.
    
2. Highlight Forum One's clients. One of the strengths of Forum One is the many diverse customers that we've worked with. To quickly illustrate this point and provide a link to further information about the services we've provided, we placed the customer logos across the page, with controls that can be used to view more logos.
    
3. Improve the visual design and typography. Independently of the site design, the Forum One Usability and Design team had also been developing new marketing materials for distribution at trade shows. It's vital to keep a consistent brand voice, so we took elements from the new marketing materials and integrated them into the home page, including the strong color palette and typography. For the improved typography, we turned to WebINK, who provided the typeface Alternate Gothic as a web-enabled font. We used this strong bold font to make our headlines and navigations stand out. For people used to always seeing Arial, Verdana, Trebuchet, Times New Roman, or Georgia in web design this should be a breath of fresh air.
    
4. Reorganized the blog, header, and footer. The Forum One blog was segregated by topic, and some topics were adopted regularly and others were not used as often. We wanted to demonstrate the breadth of what we know, so all of the blog entries are now together with a clear label next to the title showing the topic. Additionally, we wanted to simplify the header navigation and provide what is commonly referred to as a "fat footer" at the bottom so that if the viewer got to the bottom of the page and couldn't find what they are looking for, there are plenty of options for them to choose from.
    
5. Rework the copy to sound stronger and more immediate. We also felt that the words on the new page needed to reflect the new immediacy of the visual design. So, we discuss "Our Work," "Our Services," and the fact that we "We Design Web Solutions." We also originally wanted to use "Who We Do It For," but after several of the grammarians in the organization objected, we settled on "Our Featured Clients."

Another factor that allowed us to quickly implement the design was the use of the latest advances in web design, including CSS3 and web fonts. To do this we had to embrace the design philosophy of progressive enhancement, which is simply the belief that web pages do not have to look exactly the same in every browser, but should leverage web standards to allow the web browser to display pages to the best of its ability. This does not mean that content or functionality are ever sacrificed, only that visually there will be differences.

The image below is the new ForumOne.com in Internet Explorer 7. Notice that all of the content is there, but there are a few subtle changes in the overall design. Can you spot three of them?

 

The differences are:

1. The buttons corners are square, not rounded.
2. The text color for Plan, Design, Build, and Grow is gray rather than transparent.
3. There is no shadow at the bottom of the portfolio example screenshot.

None of these omissions make the site unusable. When present, these enhancements only add to the overall flavor.

Now that the new design has been launched, we are returning again to assess what the next round of changes that need to be made are. This is the strength of approaching a web site design using an agile philosophy, rather than trying to achieve everything at once. We do a few things well, and then build on that.