Cooperative Design
Part 3: Decisions Behind the Design System

| By Gabe & the User Experience Team |

This is the third and final installment of the User Experience team’s Tech Tuesdays takeover. Previously, we established the need for creating a design system at Gale and explained how UX championed that cause. We also gave overviews of the tools and technology we used to implement the design system. Now we will examine the user interface (UI) elements we’ve designed and how they will contribute to a better user experience in our products. Finally, we’ll end with some insight into our future vision for the design system as it continues to evolve.

Components

Design systems consist of individual components that collectively make up the UI of a product or set of products. The purpose of creating components in accord with a design system is so that designers and developers have a common point of reference for how products should look and behave as well as the ability to ideate quickly on concepts by building early prototypes. Components consist of the elements of a UI that get used repeatedly throughout a product; things like buttons, search results and navigation bars.

Components in our design system fall into three categories: Interactive components, typography, and iconography. The total number of components in the Gale design system is too large to look at exhaustively in this article. However, we will highlight some of the most important and interesting components from each category.

Interactive Components

Interactive components are elements of the UI that users directly interact with by clicking, hovering, scrolling, and so forth. In this section, we will look at the thinking behind our design of blocks and cards, which are used to display and access content.

Blocks and cards are typically found on homepages and other content pages to highlight featured information, or on search results pages where users browse content. Currently, blocks and cards are designed differently across products, as shown below.

There are literally hundreds of thousands of individual publications across our products, all of which can be filtered, sorted and viewed in a multitude of ways, including by subject, category, content type, time period, and so forth. Over time, as users search our content more and encounter multiple Gale products, the lack of consistency in the design of how our content is displayed will be noticed. This leaves room for confusion about an already complex collection of content and ultimately makes it more difficult for users to make decisions about what actions they want to take in a product.

The complexity and potential confusion users face in our products told us that we needed to design a consistent way of displaying content that could at the same time be flexible enough to accommodate variety and change. In particular, we needed to account for certain realities about our content, such as lengthy publication titles and unpredictable image sizes, resolutions, and usage rights. With this in mind, we designed several changes to content blocks and cards.

We started at the collection level, where groups of publications appear adjacent to each other, because it’s more challenging to design scalably for many items than it is for a single item. The result is two different ways of displaying content in cards for groups of publications.

The cards on the left show the design for groups of content that have no image. They’re also useful for content with long publication titles and in cases where searching across different sets of content is required. In contrast, the cards on the right are primarily intended for grouping eBooks together because book cover images are always available for that content type, and viewing content with images is more engaging for users than only text.

Another card design we developed is intended for articles, a term we use internally to mean both periodical entries and chapters of eBooks. The primary difference we encountered in this design was that users typically expect more upfront context about periodical and chapter-level content to help them decide if an item is one they want to read more about. For this reason, we had to leave space for descriptions of the content. We also had to grapple with the fact that not all publications of this kind would have images available for use or, alternatively, would have more variation in image size and resolution compared to eBooks. For these reasons, we designed three variations of content cards for articles. One is square and divides vertically to display both image and text. Another is rectangular and about three times as wide as it is high, which creates a smaller space for an image and is better for images with lower resolution. The third design is simply a text card and eliminates the image altogether in order to account for cases where no image is available.

These designs account for both user needs discovered by research and limitations of the content we have available, but they make certain sacrifices as well. For example, this design creates constraints with respect to the layout of multiple article cards. Specifically, it prevents us from grouping cards of this type freely into a grid. Instead, we will have to form grids by placing square cards next to other square cards, rectangle cards next to other rectangle cards, and so forth. It’s not a perfect solution, but it’s one step forward that can be iterated on as we learn more.

Lastly, we designed a grid of cards to be used when multiple content types appear together. In this design, each card takes an image and a color banner overlaying the bottom to highlight the title and date of the publication. Inevitably, this design doesn’t get around cases where images are not available for a particular publication. What it does do, however, is allow us to use stock photos for publications without images because they would only be used sparingly when displayed among other publications that do have their own images. This design is also useful when multiple content types are shown together because more publications are shown per page and images will give users a quick way to visually differentiate content.

 

Typography

Typography in the design system deals with the style and appearance of every piece of text in a product. Since Gale is a digital publisher of text-rich content, typography plays an important role in the work we produce. It can a create clear, strong understanding for readers about what they are reading. It can convey style and personality, remove the labor from reading, and even fill it with a sense of delight. For this reason, we will be focusing on typography a lot more as we progress with our design system.

There are many decisions that have to be made about type components in our products, some of which are complex and require the input of other teams. We have started that process, but we have not yet defined what the stylistic appearance of text will be. For that reason we aren’t able to show what type design will look like here, but we will outline our general thinking behind it. To start, let’s look at some examples of how typeface is treated in Gale products currently.

As is suggested by these two samples, typeface is relatively uniform in our products. We currently use a single, sans-serif typeface called Open Sans, and then we adjust the size and weight to differentiate between the many types of text used in a publication, such as title, subtitle, headings, body text, and so forth. In varying the size and weight of text, we are complying with the findings of a theory called the Von Restorff Effect. Also called the Isolation Effect, this theory predicts that when multiple similar objects are present, the one that differs from the rest is more likely to be remembered. When applied to design, the implication is simply that important information should be visually distinctive. Looking at other digital reading experiences, however, there is more visual distinction between important text elements than we ourselves employ. Consider the following examples from Oxford Academic and the open access journal resource, Frontiers.

In these examples, the publication titles stand out by virtue of using a large, bold typeface from a different font family. Some digital publications go even further with this kind of visual variation. Take for example the following examples from Bloomberg, where important paragraphs are differentiated with an enlarged initial character, and key points are called out in large, italic block quotes.

Looking at the world of type design for inspiration, our way forward will begin by analyzing our various publication types and examining their textual structures to create an inventory of all the text element categories that exist in these publications. Finally, we will experiment with different typeface styles on these different text elements until we have a well organized structure and a clearer, more stylistic differentiation between these elements.

Iconography

Icons are a common way to articulate complex information succinctly through illustrations. Creating icons is one of the more enjoyable tasks for designers to take on, but also one of the more challenging. Generally speaking, icons are used as visual labels for important categories of information, critical features, and key actions that users can take in a product. This is difficult because the challenge often consists of visualizing very specific concepts and actions within a 24-pixel area and in a stylistically consistent way.

After carefully examining the makeup of our products, we settled on icons for the following categories: Account, search, navigation, tools, image viewer, content types, and subjects. Here are several examples of icons in these categories:

ACCOUNT

 

SEARCH

 

NAVIGATION

 

 

TOOLS

 

 

IMAGE VIEWER

 

 

CONTENT TYPES

 

 

SUBJECTS

 

 

 

Our collection of content is vast and there are so many ways our users can interact with this content. The goal of using icons is to help users more easily identify and remember what’s available to them in our products.

What’s Ahead

The design system is well underway and will continue to take shape as time goes on. In the months ahead, we will regularly design, test and iterate on new and existing components. We will also be taking steps to use the design system to improve our team’s prototyping efforts. As we discussed in our last post, we have already seized the benefits of the React JavaScript library in an effort to improve handoffs from design to development. What we intend to do next is develop a system to rapidly prototype with the components we’ve designed. For this, we envision an environment where we can grab components and quickly piece together an interactive prototype to test with users, before any software development work is needed. Before the design system, we built prototypes mostly from scratch, so having a system in place to speed that process up will allow us to try out more designs before handing off prototypes to developers.

It has been an exciting challenge to bring a design system to life at Gale, and we hope it’s been an equally exciting experience for our readers to learn more about. Down the road, when the design system is fully stood up, we hope to give another update. In the meantime, keep an eye on our products and you will experience firsthand the design changes we are beginning to implement.

 NIKE AIR JORDAN 1 MID GS EDGE GLOW CRIMSON PINK NEON 4Y-7Y BASKETBALL CV4611 100