In 2003, 3M began a large project to overhaul its 3M.com web site. 3M.com is actually a collection of hundreds of web sites: all 3M divisions in every country or region have their own web sites that they maintain under the 3M.com domain. Managing these sites at a corporate level has proven difficult, both from a marketing perspective and a technology perspective. This project will define design, architecture, and technology standards for the 3M.com sites that will be managed and enforced at a corporate level. To understand the goals and the details of this project, it is important to first look at 3M’s overall web site history.

Historical Background (1994-2002)

1994-1997: Grassroots

The 3M.com site officially launched in 1994. In the beginning, this was a grassroots movement, with individual divisions creating their own sites. On a corporate level, neither corporate marketing nor corporate IT had responsibility or ownership of these sites. There were no corporate design or architecture standards; divisional sites organized and presented their content as they thought best. A default information architecture emerged that resembled the company’s organizational chart: employees think it natural to organize a company in terms of divisions and direct-reports, but this structure is typically meaningless to users. Many sites and hundreds of web pages were built from 1994 to 1997 in this grassroots manner. As use of the Internet became more pervasive, companies began to realize that the web site was a direct link to its customers (at 3M, this includes many different levels and disciplines within manufacturers, distributors, professionals and even end-user consumers, across dozens of industries and hundreds of geographies). For 3M, it was time to step back and re-evaluate its overall web presence.

1998: Corporate-Level Planning

The head of corporate marketing in 1997 had the foresight to see where the Internet was headed and how important it was to align 3M’s web site with their corporate strategies and objectives. His vision was to “create and easily implement a world class Web presence that is accepted internally and positively impacts our customers and 3M’s bottom line.” He recognized that 3M.com should provide “one face, one voice” to their customers. He began a new 3M initiative, the Comparability and Consistency Initiative, whose goals were to bring these two characteristics to the 3M.com site.

He brought in a consulting team (let’s call them Consulting 1) to define enterprise-wide guidelines and identify the resources needed to bring about his vision. Consulting 1 conducted a site inventory to map out what existed at the time and what work needed to be done. They also measured the effectiveness of the site in accomplishing its business objectives and made a series of recommendations for the next generation of the site.

The main recommendation was to move to what they called a “Customer Center Architecture.” This type of architecture uses “view pages,” pages that summarize, aggregate, and contextualize information in a way that is relevant to a certain set of users. Instead of arranging the content around business units — where a given customer could have to navigate across numerous divisional sites to find all the products she needed — the new architecture would arrange the content on 3M.com around view pages called “Customer Centers.” For example, one customer center they proposed would be “Office and Education US.” Different content from across 3M business units and divisions would be presented on this Customer Center page; product marketers in a given division could include their products in multiple customer centers. A customer interested in 3M’s solutions for office and education in the US would visit this one customer center to see all the relevant content from across the entire company.

This new architecture called for a completely new perspective from business units and divisions. They were no longer to think of themselves as building web sites! Instead, they would be developing specific, focused content around a specific business or communication purpose. These individual pieces of content would then be used throughout the relevant customer centers. A Customer Center Owner (a new position to be created) would select the content to be displayed on this Customer Center view page. The view page would work almost as a filter, filtering through all of 3M.com’s content and showing customers only the content relevant to them.

Each customer center would have the same look and feel. Consulting 1 divided the customer center page into different zones, shown below.

Arranging the content in this manner across all the customer centers would provide 3M.com with the overall comparability and consistency that the head of corporate marketing was seeking. Not only would the heading and the navigation be the same, but the different content would be organized in the same basic manner. The schematics below provide a specific example of the proposed design and illustrates the flexibility that Customer Center Owners would have within the consistent design.

Design 1 proposed the following customer centers:

• Architecture and Construction
• Electronics and Communication
• Home and Leisure
• Graphic Arts
• Health Care
• Manufacturing and Services
• Office and Education
• Security
• Traffic and Transportation
• Utilities

Country customer centers (like “Office and Education US”) would constitute the lowest level of the information architecture. Consulting 1 mapped out the hierarchy from the 3M.com home page down to these country customer centers, which would include worldwide customer centers and country/region front pages.

Consulting 1 also designed the home page to provide access to these different levels and to guide customers to the correct area.

The top-left section (marked as #1) of the home page would contain links to Worldwide Customer Centers and Country/Region front pages. Customers who did not already know exactly what they were looking for would be directed to the appropriate path. A dentist from Canada looking for information about a new 3M product might visit the worldwide Health Care customer center; this would provide him content that was relevant to health care at a worldwide level and direct him to more relevant content at the Health Care customer center for Canada. He might also visit the Canada country page; this would provide him content that was relevant in Canada across all of 3M and direct him to more relevant content at the Canada customer center for Health Care. Customers who knew exactly what they were looking for would continue looking on the home page: across the bottom section (marked as #5) they could jump right to the Health Care in Canada customer center. They could also browse and search for specific content from the top-right section (marked as #2 and #3), without having the content filtered through a customer center.

Consulting 1 delivered their study in 1998. This study provided a detailed road map for 3M.com to move forward at that time. During the study, less than a hundred new web pages were built; all 3M’s web energy revolved around laying out this road map. With this new road map in place, site building could begin again in 1999.

1999-2002: Replication

Site building began in great mass. Many new sites came online and over twenty thousand new web pages were built from 1999 to 2002. These new sites incorporated the new design, while sites built with the old design had to be redone to fit the new standards. In the early stages of this phase, the new sites being built were still divisional sites and the overall architecture still resembled the organizational chart. The head of corporate marketing had emphasized that 3M.com should affect 3M’s bottom line; with more sites coming online and more business units contributing to 3M’s web presence, it became more important to emphasize business value to these new sites. In Fall 2002, corporate marketing lauched a campaign called “Now What?” (from the fuller slogan, “So you have a web site. Now What?”) to educate business units about how to measure web traffic, identify users, measure effectiveness of different marketing strategies, etc., in order to improve the content, generate web traffic, meet customer needs, and increase sales. The country customer centers and country/region pages proposed by Consulting 1 launched in October 2001. These country customer centers were named “Solutions For” pages. As Consulting 1 recommended, the user could select their country from the 3M.com home page and move to a page with links to the different customer center areas.

But not everything proposed by Consulting 1 was implemented. Corporate IT created one application for creating web sites, and corporate marketing created another. These technologies created sites with different designs. Other divisions used the software or platform they were already using in their other application development to build their web sites. The number of different designs on 3M.com decreased to only a handful, but the initiative fell short of its goal of one consistent look. The roadmap laid out in the study called for more ambitious changes than just design. Content and presentation from existing sites, which were deeply embedded, had to be separated out; the content would then be available for the different customer centers to use and reuse across 3M.com. Instead of reusing content from the divisional web sites, the Solutions For pages merely copied content or provided links to the divisional web sites. Content from the divisional web sites was duplicated and incorporated on the Solutions For pages, and divisions still maintained their own web sites with their content/presentation mix. 3M did not have the technology to support a complete separation.

3M also did not implement the worldwide customer centers. Although easy to understand in theory, the idea of a worldwide customer center was very difficult to implement. What content is relevant on a worldwide level? All 3M products and services are not available in all of the 200 countries in which they sell, and many of 3M’s divisions are concerned with regulations that are only relevant on a regional level (like OSHA). Who would own the content and who would maintain the pages? (3M’s organizational chart did not contain a worldwide divisional level where these roles would fit.) In what language would the content be presented and how would it need to be translated? Corporate marketing did not work on worldwide customer centers during the period from 1999 to 2002, but in 2001 the 3M Dental division undertook a project to create its own version of a worldwide customer center. The 3M Dental site did not achieve all of the goals of a worldwide customer center: the site contained very little content at the worldwide level, and the little content it contained had to be duplicated. Even so, it provided a unified worldwide browse path and design. As the 3M.com overhaul project began in 2003, the 3M Dental site project was held up as an example of how to start thinking globally and to implement a worldwide customer center. Worldwide customer centers would have to wait for technology that enforced the strict content and presentation separation.

Project Details (2003)

At the beginning of 2003, 3M revisited the concepts from the Consulting 1 study that were not successfully implemented. 3M has undertaken a project to overhaul the 3M.com site again. This project really consists of multiple projects with different stakeholders. Corporate IT is implementing a new platform that will lower support costs and increase component reuse. Corporate marketing is implementing a new site-wide design and a new information architecture that will improve usability, enable content reuse, and support the company’s overall marketing and branding goals. A corporate mandate will require individual business units to use the new platform and new design and to fit their site into the overall information architecture; these business units are participating with corporate IT and marketing to make sure that the new platform and architecture align with their business needs and that the new applications will be easy to use for non-technical employees.

Consistency/Branding

As in the original Comparability and Consistency Initiative, consistency is still an important part of the web site strategy. 3M.com is 3M’s link to its customers, and 3M still believes that this link should be “one face, one voice.” A major part of this project is the new site-wide design; a site-wide design promotes consistency. The new design consists of a “C-shell” — the header, the footer, and the left-hand navigation area that are shaped like the letter ‘C’. This C-shell is shown in the screenshot below (I will reference the circled numbers on this screenshot to illustrate the different aspects of the site overhaul project):

When visitors move from page to page, from site to site, within 3M.com, they should feel as if they are experiencing the same company. The 3M logo (1), the Search box (2), and the 3M Corporate Links (News, Careers, etc.) (3) will be the same across all the sites. Other features will change but will always look similar, such as the site-specific navigation (4) and the site-specific external links (5). This consistency also enables 3M to accomplish some of its wider marketing and branding goals. In 2002, Corporate Marketing conducted a branding study that asked such questions as the following: “What do people think of when they think of 3M?” “What does 3M want people to think of when they think of 3M?” “How strongly are the ‘power-brands’ (Post-It, Scotch, etc.) associated with the 3M brand?”

The goals from this study are being incorporated into the web site and the new design. 3M wants people to think of 3M as a “diversified technology company” that delivers “innovative and practical solutions.” 3M also wants to leverage the individual brand-recognition of their ‘power-brands’ to create stronger brand-recognition for the 3M brand.

The site-wide navigation contains a Technologies link (6) to a page that discusses the innovative ways that 3M uses technology. Having that information just one click away from every page will likely strengthen the association of technology with the 3M brand. The site-wide navigation also contains a Brands link (7) to a page with information about all the brands beneath the 3M brand. Having that information just one click away from every page will likely strengthen the association between all the 3M brands. The power-brand sites will contain a brand identifier (8) that will help strengthen the correlation between the 3M and power-brands; when people visit the Post-It site, for example, they will see the Post-It and the 3M logos/brand identifiers in the same location on the site.

Information Architecture/Framework

Corporate marketing is working to redefine the information architecture for the site. In the design, the main information architecture sections are identified in the black bar across the top (9). Some of the information architecture sections, Brands and Technologies, contribute to 3M’s branding strategy. The bulk of 3M’s content will be located under the Products & Services section. The Consulting 1 information architecture had the country customer centers at the bottom-most level, such as “Health Care Customer Center in Canada.” There was only one-step between the home page and the bottom most level. This one step consisted of just two different types of intermediate pages, depending on the browse path: the overall country page or the worldwide customer center page. In the new 3M information architecture, the divisional web sites will be at the bottom-most level, such as the “Dental Care in Canada Division.” Deepening the architecture in this way adds numerous steps and numerous types of intermediate pages. These intermediate pages make up what 3M calls the ‘framework’. Corporate marketing will be responsible for building the framework pages.

There are now many different browse paths for a customer to take from the 3M.com home page, through the framework, to the divisional sites. A customer trying to get to 3M Dental in Canada could take either of the following two paths, plus a few others:

• From the 3M.com home page, select ‘Canada’. Then select ‘Products & Services in Canada’. Then select ‘Health Care Solutions in Canada’. Then select ‘Dental Division in Canada’.
• From the 3M.com home page, select ‘Worldwide Products & Services’. Then select ‘Worldwide Health Care Solutions’. Then select ‘Worldwide Dental’. Then select ‘Dental in Canada’.

There will be three levels between the home page and the divisional pages, and each of these levels must have a directory or navigation page. Corporate marketing is working to define the different types of framework pages, define corporate and customer expectations for these pages, develop page schematics, and develop metrics. Two examples of framework pages should make the goals of this part of the project clear.

• The Worldwide Products & Services page (one step below the 3M.com home page), is a primary navigation page. This page should contain content relevant worldwide, such as new product news from around the world. It should also contain links to the different Solutions For pages, such as Health Care Solutions. What other links should it contain? How should the different content on this page be laid out? Here’s part of a screenshot for this page that was used in a prototype.

  

  The bold links take the user to one of the Worldwide Solutions For pages, while the unbold links below them go to the Worldwide Divisional pages.

• The Health Care Solutions in Canada page (two steps below the 3M.com home page), is currently defined as a directory page. The purpose of a directory page is simply to provide the user with links to the pages at the next level down in the architecture, in this case the divisional Canada sites under Health Care solutions. This page serves the same purpose as the country customer center pages in the proposed Consulting 1. Is a list of links to divisional sites sufficient here? Is there industry-wide content to be reused from the divisional sites? How should the different content on this page be laid out?

With this new information architecture, 3M will implement the Worldwide Customer Centers concept proposed in the Consulting 1 study. The 3M Worldwide Dental site has been held up as the example site for this model. Early sites will simply have a landing page with links to the country divisional sites without any worldwide content, but the new platform (discussed below) will make it possible to reuse content across the worldwide pages and the country pages.

Usability

There has been a lot of research in web design and usability in recent years. 3M wanted to create a new design that took advantage of this research. 3M contracted a number of consultant groups to develop new designs independently. 3M provided these groups with a set of guidelines, derived from 3M’s goals described above. Here are some screenshots of the work these groups provided: notice that these designs contain many of the same elements as the new design shown above (site-wide navigation bar, breadcrumb, links to Solutions For pages and divisional web sites, etc.) and yet the designs are incredibly different.

3M corporate marketing incorporated a number of elements from these different designs into a prototype design; this design drew heavily from the third design shown above. 3M built out this design into a prototype site, containing sample content and links through all the framework pages and the 3M Dental in Canada site. They hired an additional firm, Usability 5, to conduct a usability study on this prototype site.

This usability study was designed to test the functionality of key objects of the user interface: the framework pages and multiple browse paths, the main site navigation, and the local site navigation. They wanted to know how users would work their way through the site to get to specific information. They were prepared to modify and enhance these user interface objects in a redesign after the test and to incorporate the results into the overall information architecture and framework design. The focus of this study was not on content but on user interface.

One part of the study gave users a specific scenario. You are a dentist in Canada, and you read about a new 3M dental product a few days previously. You now want to find out more information about that product. Starting from the 3M.com home page, what do you do? Different users went about finding the information a different way, using all the available browse paths. The multiple browse paths were designed for different users, and the study validated the necessity of these. Some users first went to Canada, and then to Products & Services, and then on down to Dental Care. Others went straight to the Search box. Others went to Worldwide Products & Services. All the paricipants successfully found what they wanted; the user comments helped provide some direction for modifications.

One of the user interface objects being tested was the local site navigation (4). This navigation appears once the user reaches a divisional web site (the framework pages do not have this navigation); it lists all the content pages inside that site. The study generated a lot of feedback about the navigation. When a user clicks on an item with a plus, the navigation expands to reveal the contents below. If one of those items has a plus, the user can expand it to see the items below that. This eliminates the need to navigate to landing page after landing page before finally getting to the real content, especially for users that know exactly what they want. For some users, it took a moment to realize how the +’s and -’s worked, but most got it: it made the site extremely more usable for those that got it. Users said such things as, “It cuts out the reading when you’re looking for something; it’s the keywords that jump out at you” and “I like all my options out there and I think most consumers do.”

The prototype of the new design has undergone much revision since this usability study. Different issues have been raised by the different stakeholders within 3M and additional external studies. The Search box (3) was moved out of the header and into the body of the page for technical reasons; business unit feedback and further marketing studies indicated it should go back in the header but that the layout of it needed to be changed. The exact appearance of the ‘breadcrumb’ (10), the line of links that show you where you are and how to get back to where you have been, was changed. (It is an interesting side note that in the Hansel and Gretel story, from which the term ‘breadcrumb’ is derived, the trail of breadcrumbs did not actually work.) Many little changes were made to colors, labels, and other things based on the findings of these studies.

Common Platform

Corporate IT is implementing a new platform for web development. 3M has named this new platform “Enterprise WebSite Creation and Delivery” (EWCD, comically pronounced “E-wicked”). This platform uses Divine’s Content Server content management system and IBM’s WebSphere Portal delivery system. 3M IT is developing an API that will allow these two applications to communicate so that Portal can surface Content Server content assets. There are two main reasons behind moving to this platform.

First, the new platform allows content/presentation separation. This separation makes possible the sharing of content across multiple divisional sites. For example, content for the dental site can be put into one content area; this content can then be surfaced in multiple country dental sites. This eliminates rework; currently many sites, especially similar divisional sites in different countries, duplicate similar content. The content assets can even have translations, which becomes more important as 3M and the marketplace become more integrated globally. The Germany Dental site can surface the German version of a particular asset on their site and the UK Dental site can surface the English version. For countries that have multiple languages, like Canada or Belgium, this is essential. Web designers will configure the Belgium Dental site to surface a particular piece of content, and the user will be able to select whether the Dutch or French version of that piece of content is displayed. This content/presentation separation also makes possible the Worldwide Customer Centers proposed in the Consulting 1 study. Instead of simply providing links to the country divisional sites, the Worldwide Dental page could contain pieces of content that are relevant at a worldwide level — and display it in whatever language the user chooses. The content/presentation separation allows more central control over the design of the site. WebSphere Portal will be configured to add the standard heading, footer, and navigation to the site automatically; divisions will not have the ability to deviate from these standards.

Secondly, the new platform will be a single platform: corporate IT will not support any other platforms after a certain date. 3M IT has recognized the importance of supporting only one platform: recently, 3M undertook a project to identify a single platform to use company-wide for application development. The project team selected the J2EE standard and the WebSphere environment for application development; new applications are being built in this new environment and old applications are being transitioned over. A single platform reduces support costs. It also makes IT personnel more portable across the different divisions; a web developer from one division could easily work temporarily in another division as workload fluctuates between the divisions. A single platform also promotes component reuse and reduces rework. IT is developing common components for use in WebSphere Portal that surface certain pieces of content in certain ways. These components are called “portlets” in the portal environment. For example, IT is developing a “News” portlet. This portlet will surface all the news articles that match a specified criteria; these articles can then be displayed in numerous ways. One way is to list the title of the article with a twenty-word abstract and a link to the full-story. (Content Server feeds the assets in XML markup, and the portlets in Portal use XSLT to determine how to display this content.) This portlet can be used across all the business units without the business units having to do any development. Another portlet is the “Contact Us” portlet. This portlet does not surface any content, but it provides the business units with a means of easily adding a contact form to their site. The business units can select different fields for the form, and the portlet generates the form. The contact forms across the site will then have a consistent look and feel, but they can be configured to meet the needs of the individual business units.

Status (End of 2003)

Corporate IT had selected five pilot sites to transition into the new platform. These sites were called ‘Trailblazer’ sites. These sites were different country sites for the same division: Occupational Health and Environmental Safety (OH&ES). Each country was chosen for different reasons (for example, the Greece OH&ES site was used to test the new platform with double-byte characters). The five sites would be transitioned to the new platform, given the new design, and placed inside the new information architecture; a new Worldwide OH&ES landing page would be created. The original launch date for these Trailblazer sites was August 2003. The various parts of the project experienced delays. The EWCD releases have been delayed, and the scope for these releases scaled back. Most of the content for the Trailblazer sites has been entered into the content management system; the Trailblazer teams are now waiting for the next release of EWCD to build the web pages that surface this content. This release is scheduled for January 2004.