How we redesigned our app icon

12 Flares 12 Flares ×

How we designed the cloudmagic app icon

When we redesigned CloudMagic, an important task during the design cycle was to redesign our app icon (on both iOS and Android). A task we assumed was simple enough, took us weeks! During which, we argued, fought furiously, contemplated going back to the old icon, and finally arrived at a great new icon.

Here is a perspective as to why sometimes we have no choice but to reject great looking icons. Here is the design process from the old icon to our new one, and things we learned along the way:

The Old Icon

cloudmagic 1.0 old icon

What was wrong with the old icon?

  • Gave an impression of being faded when seen on devices, looked dull and dated.
  • We wanted to highlight search capabilities, not evident from the existing icon.
  • The gloss effect on icons is dying. Take a look at icons of popular apps – Facebook, LinkedIn, Flipboard, Instapaper, Instagram, Dropbox, clearly gloss had to go.
  • Creating a new icon for a redesigned app is advisable as users expect the redesign from the start of their experience.
  • Of course, all the above while retaining Apple’s iOS Icon Guidelines


The Redesign Begins

CloudMagic App icon design process

1. This one takes inspiration from the website and hence used the sunburst / rays. This also gave prominence to search. Wasn’t all that appealing though. 2. Although the icon had cloud search written all over it, we found it too obvious. The bevels and shadows also killed the icon.


CloudMagic App icon design process

3. A nicely designed icon, clearly indicated the multiple services which CloudMagic supports. But the faded icons looked like trash can when scaled down. 4. A colored variant of the previous logo. The idea was turned down due to legal reasons. Nice looking though!


how the cloudmagic app icon was designed

5. The designer took the angle of an index used in books and indices in CloudMagic and tried a mashup. A really attractive app icon but the book concept was not really relevant to the product.


Icon-ic frustration!

how the cloudmagic app icon was designed

6. This version was a hint that the designer needed a break. He came up with a simple cartoon inspired icon, the clouds looked like ice cream. We gave him a break and asked him to relax and come up with some fresh ideas. 7. This icon cleverly indicated the types of content in one app and there was no clutter in the main part of the icon. The side strip icons for contacts, messages etc. were too tiny to recognize when scaled down.



CloudMagic App icon design process

8. This indicated search prominently, used our existing branding but somehow wasn’t appealing enough. Though we did feel we’re getting somewhere finally. 9. This is the version we all liked. It was simple, clean, modern, indicated search and retained existing branding. We then created the Android icon, using the Android design spec.

Tips for (re)designing your app icon

  1. Dedicate some time to it, its not a trivial exercise, and an icon is the first impression users get and it’s used every single time to launch your app, it is important.
  2. Pick one platform to start with, and then ‘port’ the design to other platforms to retain consistency across platforms. We picked iOS to design the icon and then used the same design for Android.
  3. Sexy icons look good but die soon, so keep it simple and suited to your positioning. If we were a ‘fun’ app, we might have created a funky icon. Find your desired positioning and stick to it in all parts of design.
  4. Think about muscle memory – We included the magnifying glass into the icon because users associate it with search.
  5. While redesigning a new app icon, you might have to retain some elements of your old icon, just to make sure the users don’t get scared away by the new-ness.
  6. Useful links for app icon design -

So tell us what you think of the new app icon, we’d love to know!

12 Flares Twitter 11 Facebook 0 Google+ 0 Reddit 1 Buffer 0 LinkedIn 0 12 Flares ×