IxD/IA
Case Study: B2B Portal
By Cassie Carter, PhD

In mid-2000, Advanstar Communications launched Hive4.com to develop a suite of B2B portal sites centered on its trade shows and magazines. The concept was to create “hives” for B2B activity, where buyers and sellers come together, symbolized by the bee-to-bee logo. The sites would offer news and events, product and service listings, communication tools, and a wide range of other features.

Hive4.com hired an interactive agency to design and build a templated, database-driven website that maintained a unified “Hive4” brand while also being adaptable to Advanstar’s multiple verticals. The first site to be completed was MAGIConline.com, representing Advanstar’s fashion industry trade show, MAGIC. Next came Hive4Frontline.com (Frontline Solutions magazine), HotelMotel.com (Hotel & Motel Management magazine), and Hive4Telecom, which unified a broad range of Advanstar telecommunications publications.

As Hive4.com’s lead information architect, I was responsible for enhancing usability across all of the Hive4 portal sites as well as for designing features and applications.

The original portal design was attractive and innovative, but it had some seriously usability problems. Most notably, it had a great concept: a “work area” where buyers could request information and price quotes from sellers and service providers in a mutually protected environment and keep track of these exchanges in an area similar to an email inbox. However, these features were so difficult to use that I recommended “hiding” them until I could re-architect both them and other, more crucial features. For example, I revamped the entire “Help” section, defined data capture requirements for all of the sites, and developed specifications for search and glossary functionality.

For the purposes of this case study, I’d like to focus on two especially crucial components, registration and “request for information,” and offer some examples of new features I designed.

Problem Area: Registration
In order to access the “work area” or conduct business with others within the Hive4 sites, users were required to register as members.

• IA Audit (PDF): details the multitude of usability problems existing in the original registration process. After I presented this audit and talked with management and clients, it was clear most of the information required in the registration process was unnecessary. The design had been driven by marketing goals without sufficient consideration of usability. What was needed was a balance of both.
  
• Blueprint(PDF): following review of the audit, I developed a high-level, structural blueprint for a multiple-stage registration process. Here I employed permission marketing tenets to separate the information required for active participation in the “hive” from information users could offer voluntarily according to their interests. The goal was to give users a choice: they could complete a quick, one-page registration and get to work, and if they so desired, they could also fill out additional forms for “enhanced” membership. Enhanced membership options allowed users to customize the home page to feature news items tailored to their interests, connect with other businesses using Hive4’s matchmaking system, and send and receive requests for quotes, etc. If the user chose to complete only the basic registration, they could enhance their membership at any time in their account area.
  
• HTML Prototype (PDF): to present the new registration concept to management, clients, programmers, and designers, I developed an HTML prototype that allowed me to demonstrate the many different ways users could register. It was a hit, and it was implemented across all of the Hive4 sites.

Problem Area: Request for Information (RFI)
Advanstar is a leader in connecting businesses with suppliers, so it was crucial that the Hive4 sites succeed in this area. Since the “work area” was non-functional and there were other logistical problems, we needed a quick fix that bypassed the problem areas and made it easy for users to contact each other.

• User Flow & Requirements(PDF): I developed detailed functional requirements and user experience specifications, which provided a seamless solution to a big problem. In the end, management decided not to repair the “work area” and instead applied this solution across all of the Hive4 sites.
  
• Copy Deck (PDF): I have included a copy deck for the RFI process to illustrate one stage of how content is mapped to the information architecture requirements. In this case, the copy deck is for Hive4Telecom; each vertical in the portal would have its own copy deck based upon the same IA documents.
  
• Fine Tuning (PDF): as soon as the new RFI process was completed, I conducted a thorough review, identifying problems in implementation and offering solutions. The step after this “fine tuning” audit was to work closely with a graphic designer to finalize page designs.

New Feature: Decision Tree
The “decision tree” was initiated by the folks at Frontline Solutions magazine, which covers a vast array of IT-related issues. They wanted a tool that could help IT professionals choose the technologies they needed, connect them with suppliers, and also direct these professionals to sponsored and informational content (served by the magazine). New features had to be designed so they could be applicable across all verticals, if needed.

• Competitive Review (PDF): I started by researching different approaches to decision trees available online at the time, not limiting myself to technology sites in order to understand the options available. I presented the competitive review to the client in HTML format (although it could have been PowerPoint), so most of the presentation was ad libbed. I tried to make it amusing and provide enough detail in the visual presentation for the client to “take home.” The review examines five text/HTML approaches and three visual approaches, identifying potential pitfalls to avoid and good ideas to emulate, and selecting three “best practice” cases.
  
• Functional Requirements (PDF): geared towards developers, management, and the client, the functional requirements formalize the conclusions made in the competitive review and information from the client.
  
• Schematic Diagram (PDF): with the “decision tree,” the biggest concern was integration of the feature with existing structures and the logic of the programming, so I focused on these matters in my initial design work. Collaborating closely with the client, we selected a “pilot” decision tree project and identified 11 possible solutions, then worked backwards to create a decision tree. I printed it, pasted it together, and taped the completed diagram to the wall for the developers. It worked!

New Feature: Franchise Fee Calculator
The Hotel & Motel Management Franchise Fee Calculator is the only feature I designed for Hive4 that applied only to one vertical, and it was unique in that afforded the opportunity to do a complete IA process (a rarity). The calculator is still live, two years later, on www.hotelmotel.com.

• Requirements Definition (PDF): the process began with this document, an off the cuff analysis of requirements and a voluminous list of questions for the client. This document allowed me to narrow the scope of the project to a manageable size and develop the storyboards.
  
• Storyboards (PDF): the storyboards for the Franchise Fee Calculator include a high-level blueprint, page-level IA specifications, functional requirements, and content mapping. This document is the centerpiece of the Functional Design Document: the copy deck and screenshots map to content mapping in this document, and coding is determined by the functional requirements and page-level specifications.
  
• Copy Deck (PDF): all copy, provided by the editor of Hotel & Motel Management, maps to the numbering system in the storyboards.
  
• Mockup: the image below shows how the final graphic design applied the requirements of the storyboards. The "look and feel" was designed by Hive4's graphic artist, Crystal Tsay.