Object Iconography for Jira — Atlassian

Year
2018

Problem and Opportunity
As I was maintaining Atlassian’s iconography component, there was a need to create a system around Jira’s object iconography. AsoObject icons are used specifically to represent an object across products. Please note that it is different from standard icons, and file type icons. It helps us extract a specific layer of information from the products, and quickly identify the content type. This creates consistency of representation for an individual product, as well as cross-product / platform. Objects icons will help us quickly identify a type of content, which reduces cognitive load and will help increase productivity. 

Criteria

Object icons contain meta information

• At minimum the Title, Creator

• It can appear in search

It is a link that people can visit and see

• A tangible link that users can click on

• It has a home (container)

It's not a static thing

• It helps progress work forward

• It always gets updated

• Actions can be performed on it

Color

Products are mostly concerned about having a sea of repetitive colors (2-3). The desire is to have an array of many colors as possible within the individual product. This rules out creating a semantic meaning for each color, because each product would then be limited to 1-3 colors. Some combinations turning out quite dull.

Respect storied history

• Object icons that have storied history will continue using those colors.

• E.G JIRA bugs, tasks and epics will inherit previous colors used

• This helps customer retain cognitive understanding

Apply industry standards

• Those with obvious color associations will have that color applied. (e.g bug = red)

• File types that have cognitive association as defined by industry (e.g docs = blue, spreadsheet = green).

Color with conscious

• Icons that are bespoke to Atlassian and have no storied history... pick any color!

• Try to look at the existing colors as a platform and individual product. You want to a good balance of various colors but remain thoughtful of where its makes sense to make it a certain color (e.g generic files = grey).

Scaling

Object icons also have its own scaling rules. Object icons comes in two sizes, 16px and 24px. Careful considerations have been put into scaling icons down from 24px to 16px.

Because there is significantly less space, we minimize elements. Such techniques include, simplifying the icon further, rearranging composition slightly, and filling in shapes. 

A lot of my original thinking and ideation was through Confluence and sharing back the Jira designers and the design system team.