22 DEC 2014

The Goldman Sachs Web UI Toolkit

The Web UI Toolkit provides a foundation for producing a cohesive user experience across all of our web-based desktop, tablet and smartphone applications.

Derived from Twitter Bootstrap and customized to incorporate GS visual design and interaction behavior standards, this online system delivers rich, reusable components through an intuitive interface, not only providing development assets that redefine how Goldman Sachs applications look and perform, but increasing developer efficiency and reducing time to market.

Goldman Sachs Engineering has developed more than 5,000 applications in-house, many originally to support our businesses internally, but now increasingly serving as platforms for our external clients. Like the rest of the industry, we also have seen a greater demand for solutions that scale across a wide range of devices and display types, and a growing trend toward responsive designs that promote reuse. For our User Experience (UX) Team, the challenge was to create a system of components that would deliver rich, consistent, GS-branded offerings across desktop, tablet and smartphone, with styling and behavior automatically enforced out of the box, and at the same time provide developers with easy-to-use assets that solve common problems, increasing their efficiency so they can focus on delivering innovative, business-specific solutions.

The Toolkit was delivered via a rich website—built with the Toolkit itself—intended to serve as an engaging, highly interactive model for good design.  The site frames the Toolkit within the larger context of design best practices and user-centered design methodology, including extensive design references, links to online learning resources, and a social forum for developers. The delivery mechanism not only makes the Toolkit’s components and best practices easy for non-designers to use, but raises awareness of design within the wider Technology organization.

The team looked to the Open Source community and adopted Twitter’s Bootstrap, a popular HTML, CSS and JS framework. This allowed them to tap into industry best practices, and participate in an active and thriving external community. The team then customized Bootstrap to incorporate GS visual design and interaction behavior standards and, in October, 2014, deployed the online Web UI Toolkit across the firm, along with extensive documentation, working samples, an accessibility plug-in, a social space for exchange of ideas, live training and other resources. Shortly after the release, Goldman Sachs CIO Martin Chavez made the Web UI Toolkit the firm’s default UX framework. During the next month, over 200 applications were registered and more than 1,400 developers attended the global workshops and orientation sessions delivered by the UX Team.

The Web UI Toolkit leverages Bootstrap’s most important and powerful feature: a responsive, fluid grid system that creates page layouts through a series of rows and columns, using predefined classes for easy layout options. The Toolkit adopts a 12-column layout to present content for various devices depending on their screen size, with the layouts reorganizing automatically as the viewport size changes. Individual elements leverage utility classes to react to breakpoints, allowing content to be organized around what can be hidden, and how it can be discovered, across each device.

The Toolkit uses a number of common open source libraries, including jQuery, Modernizr, Respond.js, Timeago, Lo-dash.js and Holder.js. It contains HTML and CSS-based design templates, enhanced with the SASS extension language, for typography, forms, buttons, navigation and other interface components, and icons from FontAwesome. It also includes modified versions of Bootstrap’s extensive set of UI controls, panels, and navigation components, and PayPal’s Bootstrap accessibility plug-in.

The UX Team developed the Toolkit to provide visually branded UI components as well as higher level interaction patterns that encapsulate the most common, needs and usages of the firm’s specific businesses. Each pattern comes with a working demo, explanations of underlying design principles, specific do’s and don’ts, and links to additional information on individual components.

As Sushant, the product manager for the Web UI Toolkit, explained, “The fastest way to achieve uniformity and increased end-user productivity was to implement common business patterns that application teams could simply reuse. Providing macro-level solutions in addition to micro-level assets saves weeks of project design and development time. Multiplied by the scale at which Goldman Sachs develops applications, we are realizing tremendous efficiency with the Toolkit.”

The initial release of the Toolkit included patterns specific to front office lines of business, as well as more common patterns used by teams building enterprise applications around the firm. These patterns, built with Toolkit components which developers can download and adapt, include:

  • A Starter Kit: a basic example put together to demonstrate how to start building a page. This pattern contains the basic scaffolding needed to build a page using the Toolkit, including the required <meta> tags, and links to required CSS and JavaScript resources.
  • The Landing Page: an example of a content-heavy and more traditional website or portal. This pattern makes use of alternating primary and secondary content areas, to help break up content into more easily scanned sections that fit well with the way users typically scan such pages.
  • Master-Detail: a layout that presents users with a list of items, each having further details or associated content, in a way that makes it easy for users to keep track of the overall list while viewing individual details. This pattern is useful for workflow and productivity-oriented applications, where the user needs to scan and interact with a large number of objects that have a common theme or use case.
  • Dashboards, which surface data, notifications, and other information that can be scanned quickly, providing an overall picture to the user at a glance. The dashboard is a common pattern used for visualizing large data sets that can be explored and drilled into interactively.
  • Filters, which provide users with a mechanism to refine a large set of data or search results down to a more specific subset, making it easier for them to find what they are interested in. Extensive filter sets are common for querying large data sets, such as trade history—a common use case at financial institutions.
  • Forms, which gather user input—with several variations to capture the diverse use cases the UX Team was designing for, ranging from data-dense trade forms for rapid execution to longer multi-step forms, edited by multiple users over a period of time. Wizards are a long-form variant appropriate for guiding novice users through form sections, enforcing the order in which the sections are filled.

Over time, these existing examples will be augmented and new examples will be added, making the Toolkit even more business-specific. The Toolkit also offers a sandbox where developers can test out concepts without the need to register an application. Eventually, developers will even be able to contribute their own components and patterns back to a shared library.

While increased developer productivity and end-user satisfaction were immediate goals, the Toolkit is best understood as part of an overall effort to infuse the firm’s development culture with user-centered design practices, and showcase how good design matters. “No matter how well-styled, reusable components alone do not guarantee usable applications,” noted Debra, global head of the UX Team. “That’s where design comes in.” The Toolkit itself includes an extensive online library of UX design resources, but the UX Team also sponsors user groups, workshops and boot camps to promote user-centric methodologies within our extensive developer population—creating, in effect, an internal community for the exchange of ideas and solutions. The long-term goal is informed by the strategy described in Small Team, Big Impact: building a community which contributes back to the Toolkit so it thrives as a living repository, continually growing and evolving over time.

.