Anti-Authoritarian Icon
May 10, 2023
Overview
The cherished icons we've embraced since our beginning of smart joruney have faithfully accompanied us on our journey. However, as our visual language evolves, we've recognized the necessity to refresh them, aligning them with the unfolding chapters of our narrative and evolution.
My Role
UX Research Lead, Icon design
Team
Sweta bhardwaj, Lead visual designer
Viraj Patil, Visual Designer
Shreya Diwakar, Intern
Timeline & Status
5 Weeks, Launched in May 2021.
Start
During the “Design Funnel”, our team delved into a comprehensive exploration of interconnected concepts and unique product attributes in the design funnel. This phase enabled us to meticulously examine diverse brand development approaches, weighing the merits and drawbacks of each proposed option. Eventually, we crafted several designs, culminating in the impactful moment of choosing a design—a decision akin to the precise and deliberate fall a cheerful signature communication.
In essence, our team poured an abundance of time and care into crafting the identity of the a cheerful signature communication, with a dedicated emphasis on showcasing the product with meticulous precision and solidifying the company's stance. The outcome left both our team and the stakeholders exhilarated, as we witnessed outstanding results for the digital solution.
The thickness of the strokes fell short of our vision, from the previous set
Our quest to redefine the weight of our icons was spurred by several factors:
1. In the dynamic transformation of our visual language in recent years, we've transitioned significantly from text-based buttons to more prominently featured icons in our UI which also goes well with smaller real estate.
2. Simultaneously, the augmentation of both the size and boldness in our typography accentuated the disparity, making thin icons seem somewhat out of picture.
3. Crucially, we recognized a pivotal chance to increase the legibility of icons, especially when they find themselves atop diverse backgrounds.
The endeavor of crafting and overseeing icons proved to be more challenging than anticipated
Recognizing a universal need for simplicity among our teams, we embarked on a mission. First and foremost, we sought to enhance accessibility by seamlessly integrating our icon design source files and creation flows into Figma, building upon our recent transition. Additionally, we aimed to alleviate the burden by streamlining the myriad of icon sizes required for each new addition to the system, which also works well with varying third party vendors for whom english wasn't necessarily the first language.
Facilitating a smooth transition for all
Our aspiration was to update with a sense of effortless continuity for end-users. To achieve this, we consciously retained the idea and followed the principle of Jakob's law for the majority of icons, ensuring that users could navigate familiar territory while relishing a rejuvenated icon style.
Weight
A pivotal phase in this journey involved determining the weight of our icons moving forward. Starting with a 2px stroke weight, the question lingered: how much of a leap should we take? Experimenting with various options, we discovered that the bolder the stroke, the more pronounced the enhancement. Through multiple rounds of refinement, we arrived at our decision on the two new weights, driven by two crucial considerations.
Future/Optimising the icon creation process with figma
A significant priority for us was to integrate as much of the icon contribution process into Figma, which has become the go-to tool at Titan Design. This involved several key initiatives:
1. The entire process for adding icons is meticulously documented within Figma.
2. Comprehensive guidelines on adhering to the new structure and visual style are readily available in Figma.
3. Encouraging teams to not only submit their final designs but also share the creative explorations that led to their decisions. This fosters a collective history of icon-focused explorations closely linked to the repository of all production icons.
4. Making both editable source vectors and optimized versions used in production accessible for all icons. This ensures that everyone can seamlessly build upon existing icons when proposing additions or edits to the icon system.
5. Through a collaborative effort with our developers, vendors, product and marketing team we successfully automated nearly every aspect of generating the required code and diverse output assets essential for our various platforms. This streamlining enhances efficiency across the board.
Conclusion
Our journey through the "Design Funnel" marked a meticulous exploration of diverse brand development approaches, culminating in a significant decision reminiscent of a deliberate signature. Despite initial challenges, our team's dedication to forging a unique identity for cheerful signature communication yielded exceptional digital results.
Driven by the evolving visual language, typography shifts, and a pursuit of enhanced legibility, redefining icon weight became imperative. Navigating this transition, we embraced simplicity, seamlessly integrating icon creation into Figma and streamlining sizing processes to alleviate the contributor's burden.
Maintaining effortless continuity for end-users, we retained familiar metaphors while infusing the icon style with two new weights. The decision-making journey involved experimentation and refinement, driven by the pursuit of enhancement and cohesion.
Looking ahead, our commitment to excellence involves optimizing the icon creation process with Figma. Meticulous documentation, comprehensive guidelines, encouragement of creative exploration, and automation underscore our streamlined approach, enhancing efficiency across teams and platforms. This marks not merely a design evolution but a steadfast commitment to iconic excellence at Titan Design.
Other Projects
