Case Study: B2B Portal
Inc. is a worldwide business information company
serving specialized markets with high-quality information
resources and integrated marketing solutions. Advanstar
has 92 top business publications, 79 tradeshows
and conferences, and a wide range of direct marketing,
database and reference products and services. Advanstar
also offers Internet products that complement and
build on Advanstar's existing publications, tradeshows
and marketing services products. (from http://www.advanstar.com/index_about.html)
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
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.
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.
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
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.
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
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.
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.
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.
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.
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.
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!
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.
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.
(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
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,