Using the Building Blocks: Evolution of a Portal Suite

The Usa Dashboard: Patient Zero

Like many inventions, the Building Blocks were born as the most expedient solution to a pressing problem, when I joined a struggling design effort for an overdue new portal. The design of what I’ll refer to as the USA Dashboard (for confidentiality) was supposed to be a quick and easy ‘tweaking’ of its predecessor, the prototype Global Executive Dashboard. Since the audiences for the two portals were very different, however, nearly every aspect of the existing Executive Dashboard from content, structure and information design, to security model and data update schedule required revisiting.

Our team needed a way to quickly accommodate many new assets into an existing portal structure, define and iterate multiple content placement options, abstract repeated elements for code reuse, coordinate the interaction design of a rapidly growing library of functionality, and resolve a collection of information design challenges. We also had to create a system that could allow for unforeseeable future changes and expansions without disrupting the user experience.

To meet these ambitious goals, we needed a new design language for the portal environment. This new language needed to be internally consistent, flexible, and simple enough for clients to understand.

Relying on lessons learned from the design of the prototype dashboard, the Building Blocks simplified and standardized the components and relationships that could be used to build a portal. The first version of the Building Blocks included only three Containers, the Tile, Tile Group, and Page; three Connectors; the Control Bar, the Crosswalk Connector, and the Section Connector; and an initial set of Convenience Functionality. At the time, we did not identify the Blocks as a framework, or even label the different kinds of blocks as Containers or Connectors.

The most immediate benefit of introducing the Building Blocks into the design effort was to help the clients move beyond an all-or-nothing style of decision making that relied on large numbers expensive, hard to create, full-color mockups of interfaces populated by live data.