Developer Center Article

In March 2003 we released a major redesign of macromedia.com. That release involved a major visual redesign, a complete overhaul of the interaction design, and a total rebuild of the back-end systems that drive the site. Although we improved the site in many ways, we realized our work was not quite over. As we and our customers used the site daily, we identified areas that could use improvement. Because we made significant advances with our earlier launch, we consider this particular release to be an evolution, not a revolution.

The most notable change you probably see is the new visual redesign. It was driven in part by our Halo design, a new aesthetic and interaction design approach that we developed for HTML and Flash elements. Halo pervades the MX 2004 launch.

Another theme of this release involves increasing the information density on our portal pages. The earlier approach on macromedia.com stressed simplicity in design. The data suggested that increasing the amount of content on portal pages increases a user's understanding of the breadth of offerings within a section. It also means fewer links between the user and their goals. Harley Manning of Forrester Research calls this "broad flat navigational systems."

Notice examples of this philosophy on the home page, the Developer Center, and the newly architected product sections. The right navigational bars found in many areas of the site adhere to this approach as well. The new design exposes the links, allowing for quicker scanning.

Improving the User Experience

There are many barometers to gauge good user experience. Internally, we use analytics that point to objective measures such as page views, time on site, and click-throughs to a given goal. Externally, we often use surveys and harvest customer feedback for information. We decided to work with Forrester Research to provide expert heuristic testing for the prime customer paths.

After the March 2003 launch of macromedia.com, Forrester Research tested our site by looking at a number of user tasks based upon typical user profiles (called personas) and common user goals. They rated our site a 10, based on a scale from –50 to 50. Forrester has rated over 300 sites (including those of Staples, IBM, and Microsoft) and yet the best website in their universe rates only a 26. As you can imagine, the road to a perfect 50 is an incredibly challenging one, but we set this as our goal.

We received a wealth of feedback from Forrester, but here's how we addressed five of their main comments.

1. The home page should provide an in-depth display of site contents, and navigation throughout the site should expose subcategories.

We needed to expose more subcategories of navigation on the home page and throughout the site. Our previous home page featured a large area we call the FMA (Flexible Messaging Area), which we reserved for promotional graphics. In our new design we have reduced the height of this FMA, allowing more navigational links above the fold. We also listed our top products on the home page to provide one-click access to these important areas (see Figure 1).

Figure 1. We reduced the large promotional graphic (left) to expose more content on the new home page (right).

On our product pages we expanded the list of categories in the Flash navigation that you formerly had to click to show subcategories. Feedback from Forrester pointed out that we were hiding all that good content. We agreed and we fixed it (see Figure 2).

Figure 2. Information that was buried (left) is more visible in the new navigation (right).

2. Interface elements should be consistent.

Although our March launch of macromedia.com satisfied this requirement for the vast majority of the site, the Macromedia Worldwide Store did not. It used a different global navigation bar than the rest of the site. This discontinuity between the store and the rest of the site not only went against the notion of what a global navigation should be (namely global), it made the store look like a totally different site. Our store now shares the same navigation as the rest of macromedia.com (see Figure 3).

Figure 3. After the first redesign (top) the store's navigation didn't match it (middle). Now it carries the same global navigation that's across the site (bottom).

3. Keyword-based searches should be comprehensive and precise.

Forrester informed us, "While the site menus do a first-rate job of getting users to known products, neither menus nor search do an adequate job of helping users find solutions when they don't know the name of the right product." For example, typing "web publishing" brought up a list of partially relevant links that did not address the need that a non-technical person would need to publish to the web (see Figure 4).

Figure 4. Formerly our search yielded partially relevant results.

Because our search engine, Google, allows us to give certain search terms a preferred result, we fixed it so that typing "web publishing" now shows a link to the Contribute home page, which makes more sense (see Figure 5). We went through all the top searches and made sure they gave the right results.

Figure 5. Improving our search feature involved defining certain preferred results for popular search terms.

4. Customer service should be woven into the site.

Sometimes the most basic information is missing from where customers expect it to be. Take one of the most visited areas of our site: trial downloads. People going there might wonder, "How long is the free trial? Will the download be another ZIP file? Any advice on installation? Will this override an older version of the product I already have on my machine?" We addressed these questions by introducing a Help with Trial Downloads section (see Figure 6) containing links to information that answers these questions.

Figure 6. The new Help with Trial Downloads section answers many people's common questions about trial downloads.

5. The site should use graphics, icons, and symbols that users easily understand.

Forrester told us, "Many of the graphics were unhelpful." For example, on our old product pages we used small images as a visual anchor to links of interest. It turns out that those images didn't help users understand what they represented. We decided to not use images where they did not add appreciable value—and conversely, to find the right images for the content. Our product pages now use screenshots from the products or from sample sites created using the product to add value and interest to the page (see Figure 7).

Figure 7. Thumbnail graphics in our product pages (left) didn't convey the information that actual screen shots do in the redesign (right).

Streamlining the Site

Analyzing where customers go when they visit macromedia.com yields invaluable information that can aid a site redesign. We made extensive use of analytics to optimize various prime navigation paths. One interesting example pertains to people who want to download Macromedia Flash Player. After looking at the data, it turned out that much of the traffic to the Flash authoring tool section was, in fact, to search for the Flash Player download. We accounted for this fact in the new design by placing links to Flash Player in highly visible areas on the approach path to the Flash product page, as well as prominently on the home page (see Figure 8).

Figure 8. Shortcut links to popular areas (left) now appear more prominently than before. We also added a special graphical link to the Flash Player download (right).

Like any big site that's been around for some time, macromedia.com has accumulated many, many pages: 47,000 at last count. Did we really need to haul around all those pages when we redesigned the site? We looked at the traffic to the most "bloated" sections of our site—for example, the product sections. It turned out that 90 percent of the traffic was concentrated in the top 10–15 pages of each product section (Flash, Dreamweaver, ColdFusion, etc.). Before migrating our old pages to the new design, the producers of each product section went through their "kill lists" and made sure we only ported over pages that 90 percent of viewers actually visited. As a result each section shrank to about 5 percent of its original size.

Aligning the Site with New Product Launches

As we mentioned at the outset, the macromedia.com redesign was driven largely by the launch of the MX 2004 product family, which incorporates the Halo aesthetic and interaction design approach. We redesigned the product sections with a special eye towards the major goals of launching our new products: Educating users by surfacing the product-related information they're interested in and making it easy for them to buy or try our products.

This task required considerable coordination between the product teams, the marketing team, and the web team. We completed the new macromedia.com in only eight weeks to coincide with the MX 2004 product launch.

Despite the things we needed to improve after the March 2003 launch, Forrester assured us that our fundamental information architecture was sound. Because this current launch of the site coincides with the MX 2004 product line launch, we did not want to create a whole new site and risk introducing potential new problems. Instead we decided to refine and iterate, focusing on optimizing key user interaction areas.

Rundown of the Changes

Here's a rundown of where we made the most significant changes to macromedia.com.

Home Page

• Reduced height of promotional area to yield more space to important content but still retained enough space to create eye-catching graphics that tell visitors what's new at Macromedia.
• Increased subcategory exposure to provide better access to important areas of the site.
• Improved the visibility of the Developer Center, a rich area that contains many valuable tutorials and articles specific to our products, technologies, and other topics.

Product Pages

• Exposed key product information in the body of the page and included appropriate imagery such as screenshots to highlight new features.
• Increased the prominence of key calls to action, such as "Pre-order," "Notify me when available," and "Get a tour of the features."
• Exposed all important navigation.
• Maintained the right navigation bar so it stays with visitors as they travel throughout the product pages.
• Gave the navigation a visual hierarchy. Menu items in the darker gray (At a Glance, Features, Upgrade Guide, etc.) are the core product details, while the items below (Developer Center, Support and Training, Downloads, etc.) are ancillary to the core product information and usually link to different sections of the site.

Macromedia Worldwide Store

• Improved the design so it matches the rest of macromedia.com.
• Linked to all of our products on the store home page.
• Made the store-specific sidebar navigation consistent on every page.

---

About the authors

Tony Lopez has been part of the Macromedia family since his days as Director of Product and Executive Producer at Shockwave.com. He is now Executive Producer of macromedia.com where he leads the design, usability, producer, and production teams.

David Hatch has been with Macromedia for six years and has been involved with as many site redesigns. He is now Senior Information Architect for macromedia.com.