Design and deliver icons to +8m users
Designing icons for millions of users is no small feat. In this article, we explore the process behind creating and delivering a cohesive icon pack for blu Bank, Iran’s largest neobank. From unifying the visual language to overcoming design challenges, discover how our team crafted icons that are not only visually consistent but also user-friendly and scalable. Learn about the collaboration, design guidelines, and tools we used to ensure a seamless handoff from design to development, all while maintaining the integrity of blu’s brand identity.
Icon design is becoming both easier and more challenging day by day. On one hand, numerous designers release a plethora of free icons almost daily, leading to a saturation where distinguishing styles become increasingly difficult. On the other hand, the philosophy behind using icons in user interfaces lies in conveying concepts swiftly and beautifully, allowing for creative expression within certain bounds. In this article, I intend to narrate the story behind designing the blu Bank’s icon pack, detailing the decision-making process and the journey from ideation to implementation in our user interface.
Since early 2021, we aimed to unify the visual language of blu — the biggest neobank in Iran with more than 7 millions users. This necessitated a comprehensive review and redesign of all graphical and visual elements used in the app, establishing standards and rules to guide our redesign process. One of the categories we focused on for redesign was the icons used throughout the app. As blu evolved with new features, the existing icon pack no longer met our needs. We required an icon pack that was not only aesthetically pleasing and aligned with blu’s signature style but also scalable to accommodate future additions. Additionally, we needed to establish a system that facilitated the delivery and modification of icons in the shortest time possible.
Readability
One of the fundamental considerations in icon design is readability. We must recognize that users interact with icons not only within our service but across various applications. For commonly understood concepts such as settings or profiles, excessive creativity might hinder rather than aid comprehension. Users have grown accustomed to associating certain icons directly with specific actions, such as finding a gear icon for settings or a trash can for deletion. ↓
However, there are concepts where conveying the intended message solely through an icon appears challenging due to their complexity. Unique metaphors that users might not have encountered before could impede understanding. For such cases, we aimed to draw inspiration from real-world analogies, designing icons that resonate with concepts familiar to users. Simultaneously, we ensured that these icons were accompanied by text in the user interface, eliminating the need for users to decipher their meaning solely through visual cues. ↓
blu’s signature
Simultaneously with the progression of icon design, we embarked on designing visual illustrations, leveraging the blu logo as a signature element. Integrating the dot in blu’s logo into icons posed initial challenges due to their small design space. However, through various placement tests, we devised a model where incorporating the dot into icons remained feasible without compromising their intended meaning. ↓
Some icons inherently required the inclusion of the dot in their design, which posed no issue and allowed us to maintain both the icon’s concept and blu’s signature. ↓
Some icons inherently did not require a dot in their design. However, with a slight modification, the dot could be incorporated in a way that did not complicate their concept transmission. ↓
However, there were a few icons where adding anything to them only caused distraction, not only failing to aid in their readability but also making them more complicated, requiring users to spend more time understanding them. For these cases, we decided never to make any changes to the original icon and disregarded any additions. ↓
Continuous design
The design of icons used in the blu app was never intended to be a short-term project but rather an ongoing endeavor. While all existing icons were redesigned during the initial overhaul, blu product designers continually engage in designing and adding new features. To ensure visual consistency over time, a well-defined icon design process was essential. During the design of product pages and visual components, designers collaborate closely with visual designers to incorporate icons where necessary. This collaborative effort involves selecting icons from various icon packs proposed by the product designer, with the visual designer then implementing the chosen icons into the blu visual kit. If the need arises for new icon design, the visual designer provides suggestions, and through collaboration with the research team, the usability of these newly designed icons is tested. Ultimately, with input from both the designer and the product manager, the best icon is presented to our service users. ↓
This meticulously engineered process applies to the design of each individual blu icon to ensure the best possible outcome for our users. But what if there’s a change in the visual design team or an urgent task requires the product designer to deliver an icon to the engineering team?
Design Guidelines
The design guidelines for the blu icon pack empower each team member to take responsibility for visual design tasks, enabling them to swiftly and accurately design icons that align with existing ones. blu Bank icons are designed within a 24 by 24-pixel canvas. Designing within these dimensions helps us avoid unnecessary details and ensures simplicity. A 2-pixel internal padding around each icon ensures sufficient spacing between icons, even when placed adjacent to each other. The 1.5-pixel stroke width of the icons is selected based on the font sizes used in blu and other elements. Lastly, grid alignment of icons maintains uniform surface area to uphold visual consistency. ↓
Additionally, most icons are designed using simple and basic shapes like circles and squares, with lines at 90 or 45-degree angles. However, preserving the icon’s concept takes precedence, and minimal changes can be made if necessary.
Armed with this knowledge, designers can collaborate on icon design, and in special circumstances, take the lead themselves.
Make it BOLD
blu icons are designed in two styles: linear and filled. If necessary (and within the component standards), designers can use either style. ↓
From Visual Kit to Design System and Git Repository
blu icons are designed within an isolated environment called the visual kit. This environment allows us to view all icons simultaneously and provide test screens for other designers. Once an icon is finalized, it is transferred to another kit with the help of the design system manager. After proper naming and tagging, it is published and made available to all designers. In the final step, necessary outputs for the engineering team are placed in the Git repository. While we’ll delve into the Git repository and the importance of this method in detail later, it’s essential to understand that almost no files are transferred between design and engineering teams outside of the Git repository (result-driven collaboration always takes precedence. Therefore, in urgent situations where Git access is unavailable, the designer directly communicates with the engineering team to transfer files). Finally, in communication channels, we share the icon image, link to the blu kit, and link to the engineering Git to inform all product, design, and engineering teams, and then proceed to the next icon. ↓
We talked about this process deeper in the article below:
Conclusion
Icon design at blu is a thoroughly engineered process. It was designed to meet the needs of the blu design and engineering teams for years to come, minimizing the concerns of designing and delivering icons to users.
Icon design at blu continues, and we are always improving existing icons and eager for your feedback. Your feedback can enhance the experience of millions of users. So, we look forward to your comments.
