Digital Network Product Business: The Redesign

[ BY LORI PIQUET ] According to NPB's marketing communications manager, Susan Kenney, Digital NPB wants to revise the site about once every quarter, in order to keep the site fresh and to continually respond to the comments of its customers. The site underwent one such revision during our work on the site. This created a literally unseen challenge for our design team, the Melia Design Group of Atlanta, as the new site design was already begun when the modified site posted. The home page that Digital was using prior to this quarterly upgrade (the original one our redesign team set out to makeover) can be seen here.

SETTING THE GOALS : : An initial conversation between Digital and Melia revealed a dual goal for the makeover, explains Melia Group President Mike Melia, who headed up a team of five from his organization to give the NPB site an experimental facelift. First was a better navigational system. The second goal was the introduction of a strong marketing message. Through research that focused on Digital NPB's print marketing, Melia discovered that the company had established a strong corporate image that had not been carried over to its Website. "The thing that was lacking most from their original site was any kind of personality," says Melia. "There was nothing there but pure product information. We orchestrated it into an experience that includes additional marketing information, original content, and a little bit of entertainment, too. You not only get information about the product, but you're getting a feel for the people behind the site, as well."
The original site's home page was an image map that displayed the different vertical paths contained in the site. Kenney says many NPB customers felt that the home page lacked clarity. "Basically people felt it was too busy-too many icons that were of the same size, so it was hard to tell what was critical," she says.
"The original site was extremely deep with information," says Mike Melia. "Obviously, Digital [NPB] makes a lot of products, and we felt the site didn't have enough navigation in it."
Kenney concurs with that assessment, saying that much of the information in the site was buried. "People had trouble with the navigational aspects, in that they were required to click too many times to get to the information they wanted. It was a little too far down," she says.

RETOOLING THE NAVIGATION SYSTEM : : The Melia Group used a combination of frames and submenus in its design, which allowed the team to achieve both its main goals: stronger navigation and a stronger personality. The new site starts with a splash screen from which the user enters a more traditional home page. The left-hand side of the home page serves as a navigational control bar, with six different menus (vs. the original 13) that can be selected, depending on the viewer's informational needs.
When Digital NPB's quarterly modified site posted, we found that the company had improved navigation from the home page by using a vertical list of menus to select from. However, the revised page still focused on the same 13 internal paths. While it was easier to distinguish one path from another, there was still little to indicate to a visitor where critical information they might need would reside.
One of those original 13 paths, "What's New?", is an integrated part of the Melia Group's new home page. In other words, the "What's New?" content is now part of the main viewing frame on the home page. This way, Digital doesn't have to rely on users' discretion to get the most important messages of the day onto their screens. "It's a more editorial style home page," says Melia. "The way it evolved was to put the most popular sections in that area and navigate straight from there. It allows you to insert the hottest items that are getting the most hits up top," he says, adding that the area can be refreshed as often as the site administrator chooses.

USING FRAMES TO AVOID USER "BACK- PEDALING : : Overuse of frames has made them an oft-maligned component of Web pages recently. When used properly, however, frames are a powerful tool for creating parallel navigation, as this site demonstrates. As you can see from the previous link, despite the fact that the user has begun to drill down into the lower levels of the Products submenu, the navigational control bar on the left remains visible, giving viewers a one-click exit route, in case they decide to move their search elsewhere.
"There's much less confusion and backpedaling," says Melia. With this construction, users only need to "back" out of a page (using the Back button on their browsers' toolbars) when they've reached the very lowest level of information. Even here, it's still only a two-click operation to get back to the home page. Most importantly, users retain navigational control throughout the site.

CREATING A STRONGER MARKETING PERSONALITY : : With a much-improved navigational structure now mapped out, the Melia Group began to consider ways to incorporate the site's strong new marketing-based personality. Starting with the splash screen, the Melia Group began to infuse all of the higher-layer pages with strong marketing/advertising slogans and displaying them on backdrops of vividly colored illustrations (by illustrator Ron Chan). This is obvious on the home page in the top right-hand side of the largest frame.
At the next layer, the Melia Group uses the slogans as a sort of placeholder for the main viewing frame while the user selects his or her next move from the submenus in the navigational frame, an idea that drew mixed reviews from NPB. While generally pleased with the new "personality" garnered from the short messages, Kenney says they were displeased with the size of the slogan area in the second layer (Figure 4). "Our viewers and customers tell us over and over that they really want content. So when they look at that page we want to give them content-useful information."
Overall, however, the slogan areas present a twofold advantage for Digital NPB, which can use it both to advance an advertising message and to help infuse personality into this information-heavy site.
"I like the fact that they've incorporated some advertising statements, and they've done it in a nonobtrusive way," says Kenney. What makes the slogan areas especially valuable is that the Melia Group has designed them to be dynamic, creating a subtly new experience for Digital NPB customers with each visit. "We have the technology to change that banner," explains Kenney. "You might come in and see the hub ad and come in tomorrow and see a switching ad with different information." In fact, NPB can configure the slogan areas to change as often as they wish them to. And the use of illustration, as it ties in with the submenu icons on the left, helps create visual cohesion.

CHALLENGES OF WORKING WITH LARGER COMPANIES : : Working with a large company, even a division of a large company, such as Digital NPB, adds certain challenges. Not the least of which is working around what parent company Digital has established as its corporate identity standards. Design elements such as the color palette, use of the logo, header space, typeface for the header space, etc. are all strictly defined for use within the corporation and its divisions. Because it was important that the new design be practical and conform to real-world demands, the Melia Group did its best to incorporate Digital's identity standards despite the limiting effects.
The worst offender from a design standpoint, according to Mike Melia, was the header space. Digital, he says, insists that the full horizontal space across the top of each page include the Digital logo and the two lines of text below the logo rendered in precisely defined colors and typefaces on a white background. Furthermore, no added content is allowed to appear in the header space.
"It didn't handcuff us," says Melia, "but we thought there could have been a better way to get corporate image across." Melia explained that beyond the challenge of incorporating the header into the design, he felt that the header space would gobble up much of the screen for users with 13-inch monitors, estimating that as much as one-third of their screen would be filled with the Digital header. "To create a different look we would suggest repositioning the type and cutting down on the amount of header space they had or putting more content on the header space. [The header] doesn't hurt the overall site, but it could have been a little better," says Melia.
Graphically, the design team watched its download times carefully. "I feel we were successful in creating much more graphic appeal without increasing download time." Melia explains that while the original site used 8-bit graphics, they used more 1-bit graphics to give the site a lot more graphic attention while keeping the download time comparable to what it had been.

KEEPING AN EYE ON SITE MANAGEMENT : : With 500,000 hits and growing, our seventh criterion, site management, was of particular interest for this makeover. According to Steven Redfern, NPB's Internet/Web Program Manager, the site launched last year with a clustered configuration that includes dual Alpha 2100 machines. It's enough horsepower to keep NPB comfortably accommodating its audience for a long time to come, explains Redfern; "We haven't begun to tax the performance of the machines." The one thing they have had to upgrade to keep their site performing up to par was their mass storage capacity, which Redfern says they've quadrupled in the space of a year by adding Digital's Array controllers. "We discovered there was a tremendous mass storage increase required for our online search capabilities," he says.
And, of course, if you're doing quarterly upgrades of your site, as Digital is, polling traffic is an important part of site management. Redfern says the Digital network has a shareware program available that collects and analyzes traffic patterns from the regular traffic log. The data is analyzed once a month to determine the areas of highest growth. Redfern says that using this information he has determined that at least one area, press releases, is receiving high traffic, and the company will enhance navigation and content in this area to improve traffic flow.

THE PROJECT'S TOOLS : : The Melia Group used Adobe products Photoshop and Illustrator to create the designs for the new site. The HTML was written from scratch by Melia Group programmer Nicholas Williams.

KEEPING UP WITH TECHNOLOGY : : The new site successfully addresses all of the areas that were identified. While Digital NPB hasn't made a firm commitment to implement the new design, the people we worked with during the project seemed very happy to see the potential of their site played out with professional design and planning. Says Internet product marketing manager at NPB Nancy Capuccio: "[The new site has] a more contemporary, updated flashy kind of look, indicating to our customers that we're involved in changing technology and trying to keep up to date with the whole Internet trend."

Email: zdimag@zd.com
www.zdimag.com