As the Technical Product Designer, my role was to rebrand our design system, Cosmos, for ASI’s product, ESP+, a multidimensional platform that includes search and browse, collections, and order management.

How Cosmos became Prism. Visit Below

The Re-brand

Leadership at ASI—Advertising Specialty Institute—tasked the Product and UX team to rebrand our search and browse platform called ESP+.

Leadership discovered through focus groups that the ESP+ style guide and components felt outdated.“The colors seem dull,” said one candid participant.

In addition, the ASI wanted to appeal to a younger demographic. After weeks of research and exploration, they settled on the new name “Prism,” which felt more like a cool, new startup.

The Details

I began by auditing the current design system and searching for patterns from which to create components. I then created a style guide to help me organize and begin a design system for Prism.

Color

Since color is used to express style and communicate meaning, I began with a color scheme of primary, secondary, neutral, warning, and success colors that then expanded into tonal palettes with 10 tones. Specific tones from each tonal palette were assigned to color roles across a UI. 

Foundational colors were essential to creating a dynamic color scheme. With foundation colors established, the Shuddle design system had a full spectrum of colors needed for expressing interaction states, errors, and accessible contrast.  

The primary foundation color is used to derive roles for key components across the UI, such as the prominent buttons, active states, as well as the tint of elevated surfaces.

The secondary foundation color is used for less prominent components in the UI, such as tabs while expanding the opportunity for color expression.

Typography

The default typeface for Prism is IBM Plex which includes hundreds of glyphs and languages worldwide.

IBM Plex is an international typeface family designed by Mike Abbink, IBM BX&D, in collaboration with Bold Monday, an independent Dutch type foundry. Plex was intended to illustrate the unique relationship between mankind and machine. The result is a neutral yet friendly Grotesque style typeface with a Sans, Sans Condensed, Mono, and Serif. They all have excellent legibility in print, web, and mobile interfaces. Plex’s three designs work well independently and even better together.

Sans is a contemporary compadre, the Serif for editorial storytelling, or the Mono to show code snippets.

Buttons & Chips

Buttons were designed to be either high or medium emphasis for important or common actions on a page.

The primary buttons are high emphasis, and the main actions are to search, create, or compose.

The secondary buttons are medium emphasis, and the main actions are to not distract users from other onscreen elements.

Chips can show multiple interactive elements together in the same area, such as a list of selectable categories.

Cards

There are two main types of cards: Horizontal or Vertical. The cards are identifiable as a single, contained unit. They can hold anything from images to headlines, supporting text, buttons, body text, and other components. A card’s layout and dimensions depend on its contents. There is no one right way to make a card.

Cards are used to display content and actions on a single topic. They are designed to be easy to scan for relevant and actionable information. Elements like text and images are to be placed on cards in a way that clearly indicates hierarchy.

Documentation

Documentation is always included on the same page as the component this was to explain any use cases that were created. This consisted of:

• A clear explanation for what this element is and how it is typically used, occasionally accompanied by dos and don’ts for context and clarification.

• Picture examples so that it was clear what we were talking about

• Rules of when to use the component and how to use the component

Summary

After designing pages for ESP+ products and supporting the re-design to Prism, I identified patterns in the UI to create components and a style guide.

The style guide focuses on typography, colors, icons, and examples of components, while the component sheets explain the layout, spacing, properties, states, and anatomy of a component.

From these initial foundation steps, the design team can continue to scale and implement new components to the design system through continuous product auditing.