“Don’t. Move. My. Stuff. Around”, — that’s what I imagine our users shout during our usability testing sessions.
Users hate when you move the controls they’re used to. We had to have a really good reason to do so. This article is a story behind the Icons8 redesign, our usability studies, iterations, and trade-offs.
You are also welcome to join the discussion on Product Hunt: we’ve just released the beta version for you to try.
I was looking at our stats. The question that popped in my head was: why do people browse 3 times fewer pages on Icons8 than on a competitor’s website?
I was puzzled. I mean, I had several explanations:
It was too good to believe.
First, we still send events to Google Analytics when people do clicks.
Second, my intuition forced me to look for a less pleasing explanation.
The idea came from our friends at Usethics. They explained it with something I shouldn’t have missed. Something that every UX designer should know for the sake of the job interviews.
Stripped from formulas, it says that the closer the objects are, the better. Our app forces users to switch attention from one place to another across the screen. It’s a heavy cognitive task that makes users leave.
The solution is straightforward. Open them close to the screen. Google Images does it for years.
The problem is that Google Images has a limited functionality, while Icons8 offers a bunch of stuff:
It’s always an option to move the functionality away:
The problem is that people don’t expect this functionality. So, they don’t look for it. Therefore, according to the information foraging theory, they ignore all “show more” controls.
We tried to hide this functionality before. I felt physical pain watching people struggle with it during the usability study. Users were striving to generate a font while it was just two clicks away.
Long story short, we have to show enough, but also hide enough.
Here’s the initial version of the redesign after a few iterations.
Apart from the new icon details, it features the new visual style.
After several usability sessions, we’ve discovered another problem. When we asked people to pick a few icons and create a collection, they picked the icons of different styles without giving a thought about it.
They liked the result. In contrast, we were horrified. It’s like writing a single word with various fonts.
That encouraged us to reinvent our collections.
The old design draws the icons of different styles in the same size making them look alike. Also, it splits a single collection into several lines, making them harder to compare.
Thus, we’ve made the collections horizontal.
Also, we’ve shown the icons in the original size.
A light-headed decision to make collections horizontal led to a massive redesign and re-coding of everything.
Here’s the icon details dialog.
It’s pretty! Moreover:
The only problem is it’s monstrous a bit. Once you open it, it occupies your whole screen.
We put it on diet, removing all the pretty white space. And decreasing the font size. And compacting the effects. But it was still big.
The breakthrough came from one of our usability study participants. She suggested that we need either other styles or similar icons, not both at the same time.
Indeed, if we have all styles on screen and search for a home icon, we have it in all styles.
If we have a single style selected, we have all similar icons on screen:
Thank you, dear user. Your observation allowed us to squeeze the icon details more than twice:
When we created our current design, we had four icon styles. We’ve got more than a dozen now. The worst part is the style name doesn’t suggest the visual style. Who knows what the style called “Dusk” looks like?
So far, we’ve grouped them.
We have a long story of searching for the perfect download control.
We had something that passed our usability tests before, more or less. We’ve started beautifying it.
The problem is you can only fit so many download options in there. Generating fonts is out of the question, for example.
So we gave up and created a dialog.
The last iteration looks this way:
As this article balances between “long read” and “boring”, please let me just list all other improvements we brainstormed and (at least partially) implemented.
Also, we’ve optimized the performance. This is maybe the first time I have seen the AAAA rating on WebPagetest.
We are holding the next round of usability tests at the moment, in particular about the following issues:
Working at Icons8 is special. The people who use Icons8 are designers themselves. Many improvements came from our community. Therefore, welcome to leave the comments and join in our forum.
Wanna try breaking stuff? Here’s our sketch file.
The redesigned Icons8 has just been released on Product Hunt, welcome to join the discussion – your feedback is precious for future updates!
About the author: Ivan Braun, UX designer, founder of Icons8
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
Each design has its own scale. It applies to elements size and like thickness. Now,…
This website uses cookies.