During my work as UX Researcher at pixiv, I had the opportunity to join Charcoal's design system team as a Visual Designer (while still keeping up with research projects). The existing icons shared inconsistencies, setting our goal to create a new family of icons aligned with pixiv's product vision.
The Charcoal Icons 2.0 has been released on Figma's Community⁺
Key Results
Over 200+ icons integrated into Charcoal Design System
The newly released "Pastela" app rank #1 within a week.
Role & Timeline
Design Systems Designer
June 2023 - November 2023
Skills Applied
Iconography, Visual Design, User-Centric Design, Collaboration
Our goal was to create a cohesive, user-friendly visual language that would enhance the overall user experience across all pixiv digital products, our challenge, to create iconography that could achieve these goals in an expressive and functional way.
Identifying Core Issues
Among the main problems identified within the current icons:
Style
Inconsistent styles and stroke weights
Clarity
Unclear metaphors, affecting comprehension and inclusivity
Scalability
Mixed usage among platforms, brands, limiting versatility
Core issues within the previous icon set.
Laying the Groundwork
To kickstart the project and lay the groundwork for Charcoal icons, we drew inspiration from similar design systems and icon families. As a result, Charcoal icons were designed to align with Charcoal's foundation and its needs, striking a balance between beauty and ease of implementation. We leveraged Figma's component functionality to maximize reusability and ease of management, incorporating a modifier approach similar to other modern design systems, ensuring our principles were achieved while delivering the icons to life.
Defining Principles
Simple
Economy of form, basic shapes, clear contrast.
Consistent
Unified style, visually balanced.
Scalable
Universally usable, expandable
Introducing Modifiers
An icon modifier is a small additional icon that is placed to a base icon to change or enhance its meaning, for example, in user interfaces, you might see a paper icon with a small arrow added to indicate an uploaded file. These modifiers help convey additional information quickly and visually.
To ensure consistency and simplicity, we developed a grid system over the traditional icon grid, as an additional grid for modifiers alignment. This approach facilitated the alignment and proportion of icons and their modifiers, ensuring a uniform look and feel.
One of the main challenges was defining how the modifiers should work within the grid system. "Where they should be placed? Filled or line? How to ensure clarity on small sizes?" were our questions, and after several iterations and feedback sessions, we successfully integrated the modifiers, ensuring they were both functional and visually consistent.
Custom grid applied to the icons.
From Concept to Completion, Review & Iterate
The icon design process was divided into several sprints, during which I designed the icons and gathered feedback from designers across different teams. This iterative approach allowed for continuous improvement and alignment with the project's goals.
Icons evolution through each iteration.
The Impact of Our Icon Redesign
The final set comprised over 200 icons, which were integrated into pixiv's Charcoal design system and used at pixiv's newly launched illustration app Pastela. This app launched on the App Store and reached the 1st rank within a week, receiving positive feedback from users about the icon designs. The icons were also showcased during the pixiv's meetup event, highlighting their scalability among the company's teams.
Snapshot of Charcoal icons complete family.
Closing & Lessons Learned
The icon design project at pixiv was a significant success, resolving existing inconsistencies and enhancing user experience through a cohesive and scalable icon family.
Designing icons requires consideration of not only visual aspects, but also technical development, and accessibility considerations as the family scales in enterprise scenarios.
Designers need to put themselves in the shoes of users and leverage design, development and business knowledge to convey meaning for such a wide public in a small square of pixels; working as a team fosters new ideas and helps tackle these challenges effectively.
If I had the time and chance to keep working on other parts of the icon family, I would extend my scope to the entire process and measure the impact of my work in more depth. Possible metrics I would use include:
Design consistency: Are the icons being used consistently? Are teams using the right icon for the right situation?
Scalability: Did the number of icons increase after the project? Are other designers able to create icons following our principles?
Usage across platforms: Are the icons being used? Which ones are the most used? On how many platforms?
Pixiv's newly released app "Pastela" and "Pixiv Meetup 2023" presentation highlight.