Bliss Design System - Iconsets

The redesign and creation of a new icon system that now gets used across all BRYTER products.

Overview

As for most interfaces, icons play a huge role in the interface of BRYTER. Consolidating and systemizing the iconset we use at BRYTER was the goal of this redesign project. Based on our previous iconset and the general brand direction of BRYTER, we decided to create a system to create a harmonious icon style across our product and brand.

While the focus at the beginning of this project was on the actual icon system and design of the individual icons, we later also developed toolkits for developers to consume these new icons in a more straightforward way.

My role during this project was to lead the overall initiative, co-create the system behind our new icon style and manage stakeholders and feedback sessions. While this project was a huge team effort across different teams at BRYTER, I want to highlight the key collaborators Nina König, Bozana Bozic and Gabrielle von Koss.

To see all icons from the Bliss Iconset, please visit the documentation.

Inventory meets Exploration

As with most redesigns, they often start with a detailed inventory of the current state. We not only went through the current set of icons in use, but also compiled a huge set of examples inside our production application for later comparison.

One of the most prominent subjects we surfaced was the amount of different icon sizes we used. Across the BRYTER application, we used over 15 different sizes - ranging from 9px to 30px. Additionally, not all icon frames had the same aspect ratio. Some icon frames were squares, some were rectangles. This was something we set out to simplify with the redesign.

After the foundational inventory Bozana, Nina and I did different exploration rounds followed by feedback sessions with different teams and designers at BRYTER. While Nina did most of the actual icon creation work, I tried to keep an overview over the process and systematic approach behind the creation of the different icons and how it all might come together in the end.

Some early explorations from different icons we needed for the iconset

Creation and Testing

The actual creation of the new icons was a lot of trial and error. We tried to keep a close communication channel to different stakeholders and also encouraged designers to play around with different icons we already created.

This collaboration helped us immensely in finding different stress cases for our new icon system. We also created all kinds of different "Before vs. After" screens to discussion and analyze our overall direction.

Before vs. After example we used to showcase the difference of prominent interface elements inside BRYTER

After all the design focused work and the initial release of the design source of the new icons as a Figma library, the design systems team around Bliss needed to come up with a solution to make the usage of these new icons more straightforward for developers. We've decided to create two solutions that would make the usage of our iconset unequivocal - most of the technical implementation was done by Gabi.

Bliss Iconsets Toolkit

The single source of truth for the Bliss Iconset. It's composed of all available icons and will add all the icons (SVG) inside the toolkit to your web page automatically.

Bliss Icon Component

The Bliss icon component renders an icon to the page. It's designed to render the icons from the Bliss Iconsets toolkit.

Documentation

After the initial release of our icons, designers at BRYTER were keen on using the new shiny iconset. To document our new process and also enable everybody to actively contribute to our new iconset, we published guidelines around our new icon design language.

One key aspect of the icon system is the difference between the bounding box and the icon content. While the bounding box describes the absolute size of every icon, the icon content focuses on the actual drawn icon itself and its ideal size based on its proportions. This means that designers and developers always plan with an icon size of 24x24 and don't need to care about the actual size of the drawn icon - which could be 14x14, 16x16 or some "one-off stress case" depending on different factors like visual weight.

The sizing rule and our straightforward icon grid makes the usage of these icons predictable and produces more consistent results during the creation of new icons.

Documentation with all the guidelines we established for creating icon

Learnings

While the initial push for the big icon redesign project came from the product teams, the icons are now used across the company at BRYTER (some examples can be found on the BRYTER website). Besides that positive side effect, I also learned once again that you don't have to have all the answers, but you need to always improve and listen to potential pain-points of the people you're supporting.

Additionally, it became clear to us that the source of truth of the Iconset needs to be inside the codebase. That's why we decided to base our source of truth on the Bliss Iconsets Toolkit. If something exists in Figma, but isn't available inside our toolkit, it doesn't exist for us.

Position

Product Designer

Company

BRYTER

Year

2021

Responsibilities

  • Project Lead
  • Design Direction
  • Product Management