UX Design Case Study: Icons8 Web App. Redesign Based on Usability Testing

This article is a story behind the Icons8 redesign: the case study to share our usability studies, iterations, and trade-offs. And the first thing that ruled all that case was a simple insight.

Users hate when you move the controls they’re used to.

We had to find solid reasons to do that. Check what it got us to. Or just try it live straightforward: the beta version is already open for everyone.

You are also welcome to join the discussion on Product Hunt: we’ve just released the beta version for you to try.

Quick Review: Then and Now

This is how the interface looks in the current version.

Previous (current) version on user interface

And this is a new look we’ve developed through the months of user testing, design iterations and coding sprints.

New UI Design; now open to use in Beta

The Problem to Solve: Few Clicks

Analyzing the stats and user testing sessions, we got the big issue to consider: why do people browse 3 times fewer pages on Icons8 than on a competitor’s website?

The idea came from our friends at Usethics. They explained it with something that every UX designer should know: Fitts’ Law.

Fitts’ Law

In short term, the law states that the closer the objects of manipulation are, the better. In its current version, our app forces users to switch attention from one place to another across the screen when they deal with a particular icons. It’s a heavy cognitive task that can make users annoyed and has a negative impact on user retention.

Our old app makes users switch between left and right sides of the screen. That’s a heavy cognitive task that gets users tired and makes them leave.

Solution

The global solution was simple. Open icons close to the screen. Google Images does it for years.

Google Images shows the larger version of the image much closer. I’d also suggest keeping the meta information closer to the large image.

Still, it isn’t that simple at the second glance. The problem is that Google Images has a limited functionality, while Icons8 offers a bunch of functions such as:

• Recoloring
• Applying boxes and circles
• Adding padding
• Adding text and overlays (like a small plus)
• Downloading in multiple formats (some behind the paywall)
• Resizing
• Similar icons (for example, variations of the home icon)
• The same icon in other styles (for example, a home icon in iOS style, Material style, etc.)
• Generating HTML
• Working with the collections
• Generating fonts.

Video tutorial showing how recoloring icons works in the current interface

Moving Stuff Away

There’s always an option to move the functionality away:

• Dialog boxes
• Expanding sections
• Accordion menus
• Burger menus, etc.

The problem is that people don’t expect this functionality. it means that they don’t look for it. So, according to the information foraging theory, they will probably ignore all “show more” controls.

We did try to hide this functionality before. Yet, it was physically painful to watch how people struggled with it during the usability study. Users had difficulty in generating a font while it was just two clicks away.

Long story short, we have to show enough, but also hide enough.

Redesign

So, this is the initial version of the UI redesign after a few iterations.

Icons8 app redesign, version 1. Screenshot from Sketch.

Apart from the new icon details, it changed its dress a bit and got a new stylistic concept.

New visual style features the new logo, new colors, new typography, and new almost everything.

Collections

After several usability sessions, we’ve discovered another problem.

Asked to pick a few icons and create a collection, users often picked the icons of different styles without a deep thought about it.

They liked the result. However, we were horrified: it’s like writing a single word with various fonts.

That was a big motive for us to reconsider 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.

First, we’ve made the collections horizontal.

A single line makes icons easier to compare

Also, we’ve shown the icons in the original size.

Small icons are small. Large icons are large.

A light-headed decision on making collections horizontal led to a massive redesign and re-coding.

One of the consequences of making the collections horizontal: redesigning the list. Users can drag the icons in any collection in the list.

Icon Details

Here’s how the icon details dialog looks.

Icon dialog window

It’s pretty! Even more:

• It showcases all the effects we have
• It has all styles (with a horizontal scroll)
• It shows similar icons
• It groups the controls and leaves some white space.

The only problem is it’s really monstrous. Once you open it, it occupies your whole screen. One more thing to reconsider.

Compacting

So, we put it on diet and removed all the pretty white space. And decreased the font size. And compacted the effects. But it was still big.

The breakthrough occured from one of our usability study participants. She suggested that we need to show either other styles or similar icons, not both at the same time.

So, if we have all styles on screen and search for a home icon, we have it in all styles.

All styles in the list.

If we have a single style selected, we have all similar icons on screen:

A single style is selected, similar icons are shown in the list.

Thank you, dear user.

Your observation let us squeeze the icon details more than twice:

New, compact version of the icon details popup.

Grouped Icon Styles

When we created our current design, we had four icon styles. Now, we’ve got more than a dozen. That’s a game changer.

And the worst part is that the style name doesn’t clarify the visual style at once. Using the app first time, who knows what the style called “Dusk” looks like?

So, we’ve grouped them.

Redesigning the list of styles. The newer ones are on the right.

Download

We have a long story of searching for the perfect download control.

We wanted it to be:

• Not a wizard that forces you to move forward each time you download another icon.
• Not a bulky form that eats away your screen.

We had something that passed our usability tests before, more or less, and decided to add it some beauty.

Our old download options control, beautified.

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.

Searching for a dialog

The final iteration looks this way:

Downloading PNGs

Paywall

Other Improvements

Not to get too deep into the process, here’s a brief list of other improvements we brainstormed and (at least partially) implemented.

• Removed the top menu
• Redesigned My Account menu
• Created the profile pictures
• Added the style previews on the home page instead of the new icons.

Also, we’ve optimized the performance. It was cool to see the all-A rating on WebPagetest.

Speed improvement. It’s not over: the whole new API is coming this fall.

Future Improvements

We are holding the next round of usability tests at the moment, in particular focusing on the following issues:

• Some users have trouble finding the search bar.
• Some people don’t understand our categories, mistaking them for the list of all the icons we have.
• Registration, login, and paywall are redesigned, but aren’t tested enough yet.

Your Turn

What makes working at Icons8 special is that people who use Icons8 are designers themselves. Many improvements have already come from our community — and more are on the way, for sure. So, feel free to leave the comments and join in our forum.

The redesigned Icons8 has just been released on Product Hunt, welcome to join the discussion — your feedback is precious for future updates!