I redesigned the icons and upgraded the interface of the German iPhone app HandyEtat.

Developer Helmut Neumann from Neumannsapps contracted me to upgrade the interface and redesign the logo for the iPhone 4 release of his app HandyEtat. HandyEtat shows you everything you need to know about your cell phone subscription in a single integrated interface. The app is targeted at T-Mobile customers in Germany.

The new logo

My task was to create a new logo and icons for the app. I came up with several sketches, concentrating on the color bars, the most memorable elements of the app’s interface. Here are two screenshots of the interface:

All of my sketches were promptly rejected by Helmut, who stressed the need for a simple, striking icon instead of a complicated one. Here they are:

The first one couldn’t be used because it resembles an Apple product, the remaining ones were either too complex or had no direct relationship with the app’s functions and interface. You can see I tried to veer from the color bars after the first sketches. It was good to try, but ultimately these designs failed too. Helmut was very helpful, promptly pointing out where the sketches didn’t work. It’s important to have clients who know what they want from you.

After a few more steps we finally arrived at a working design. The new icon reprises the striped background and the color bars from the app’s interface and adds a recognizable pictogram (the phone receiver) at the bottom. As you can see from the image below, the icon looks simple enough not to lose any details, even at the smaller sizes.
I created 7 icon sizes in total:

• 512 px (iTunes artwork);
• 114 px (iPhone 4 home screen);
• 72 px (iPad home screen);
• 58 px (iPhone 4 settings/search results);
• 57 px (iPhone 3 home screen);
• 50 px (iPad settings);
• 29 px (iPhone 3 settings/search results).

The new icon looks great on the iPhone.

New interface and toolbar icons

The interface was upgraded for the iPhone 4′s retina display at double the resolution.
I rebuilt the interface from scratch with vectors, making future resizing easy. I also redesigned the toolbar icons, adding a few new ones. You can see them at the bottom of the next screenshot, taken from the iPhone 4:

The iPad version of HandyEtat is also in the works. The updated interface will be adjusted to the iPad’s resolution (1024×768 px) in both portrait and landscape orientations. As listed above, the icon is iPad-ready.

Client testimonial

Here’s what Helmut had to say about my work on this project:

I asked Andrea to create a new icon for HandyEtat, a well settled iPhone cost control app for T-Mobile. We had to find a unique and attractive new design to make users want to watch it and touch it. Andrea showed a great performance and presented new ideas which were all nice and beautiful. He was very constructive and technically brilliant in taking over my ideas for changes and new concepts and finally he presented one design that blew me away. The new icon is now rolled out for a few days and the user response is already overwhelming so I think I can say: we did it!
Andrea additionally worked over the interface of HandyEtat to push it to HD resolution. In every aspect of his work he was very professional, quick and precise, so it was easy for me to integrate his work into my application.
To conclude my testimonial: two thumbs up for Andrea!

Conclusions

I really enjoyed working with Helmut on this project. He proved to be a passionate developer and a helpful client. I learned a lot about simplicity and directness in icon design and I strained my eyes quite a bit while drawing those pinstriped backgrounds with closely spaced color values. Like others before me, I have to confirm that seeing high resolution graphics reduced to a 3,5″ screen on the iPhone 4 is quite odd. You really can’t judge an interface until you’ve seen it in action on the actual device. It’s a fun challenge.