How we re-designed icons in the Fyle app
How we re-designed icons in the Fyle app
Fyle’s web and mobile apps have snowballed in functionality over the last couple of years, and we accumulated some design debt in the process. This specifically stood true for the consistency of the icons we used across the app.
Another example of inconsistency was the usage of multiple characteristic cues. Characteristic cues are what users use to identify icons. For example, these were the icons for expense and analytics. These icons do not appear to belong to the same family/styling.
To come up with a solution, we first created a list of icons from the web and mobile, and there were approximately 70+ icons.
These are a few icons from the web and mobile.
One of the critical decisions we had to make was whether we should go with solid icons or outline icons or a mix of both. We did a bunch of research and found the following posts very valuable:
Master research paper (~ showed how fast people recognize solid icons, yet neutral view in conclusion )
Human interface guideline (~ prefers solid icons)
Material Design (~ in web app, prefers solid icons, Surprisingly on mobile, they go with outline icons)
UX Movement (~ conditionally prefers solid and outline icons in different contexts)
SAP user experience community (~ mixed approach solid+outline)
Medium article (~ conditionally prefers solid and outline icons in different context )
Our research suggested that solid icons were more attention-grabbing than outline icons, and we were biased pretty quickly. We wanted to go ahead with solid icons, and that decision had to go through a design review process.
Fyle has a comprehensive design review process (which deserves a separate post!) where we were asked for our preferences from popular software products. We then realized we had missed this in our research!
We went back into research mode and grouped software products into 4 groups:
B2C products: Zoom, Uber, Facebook, Pluralsight, Lasspass, Youtube, Netflix, Duda, G Drive, Whatsapp, Fiverr, Docusign, Twitter, Wix, McAfee, Dropbox, Skype, Vimeo, Amazon. Conclusion : 15% solid, 50% mixed, 35% outline
B2B products: Digital ocean, Zoho, Asana, AWS, Gitlab, Productfy, Whatfix, Twillo, Visa, Survey Monkey, Monday.com, Segment, Expensify, Stripe (online payment), Salesforce, Namely, Beekeeper, Birdeye, Prosperworks, Shopify, Slack. Conclusion: 20% solid, 25% mixed, 55% outline
Training products: (these products are used by a specialized audience) : Figma, Mixpanel, Bizzabo, Framer, Zeta, Adwords, Maze, Hot jar, Quick book, Portworx, Adbeat, Elastic NV, Docker, VWO, Chargebee, Datadog (Cloud monitoring). Conclusion: 11% solid, 22% mixed, 73% outline
Non-training products: (these products are used by a varied audience): Apple Mail, Kik, 9gag, Gmail, Telegram, Inky, Yandex, iTunes, Vimeo, Hulu, Snapchat, Outlook, Skype, Webex, Linkedin, Zoho mail, Instagram. Conclusion : 25% solid, 20% mixed, 55% outline
Interestingly, outline icons overwhelmingly won in this study. After some internal discussions, we decided to go with outline icons, except for the help, warning, and error icons.
Now that we had decided the approach, we were left with the actual creation of icons. We used Sketch and followed a grid structure for consistency.
We also created 3 variants for each icon so that we could compare and contrast them. For example, here are three options of an icon to help manage columns shown in a table view.
We used a 20x20 grid layout and used 18x18 pixels inside the grid. Here’s a little animation showing the actual creation of an icon.
We incorporated all of these icons in a Sketch library to be reused easily while designing specific feature screens. We also created developer-friendly SVGs that could be used by developers.
Here’s a before and after comparison of the side-navigation bar:
This was my first major design project at Fyle, and I learned quite a bit from this experience. I learned the importance of consistency in the iconset and that sometimes this may not be achieved by incremental changes.
I also learned the value of in-depth research - both theory and practice. It may not be advisable to get biased too quickly. Most importantly, I learned that with strong fundamentals, you can carve your own way.