Six of the best takes on the worst-looking messenger
Almost two months after the public release of iOS 7 most developers have updated their apps to match the new visual style... except the one app you use a lot. Yesterday I was talking with a bunch of friends about WhatsApp Messenger and how it's becoming the MSN Messenger of the 2010s: the service everyone uses although everybody finds it very ugly. Since I have no idea when WhatsApp is going to update its interface to blend with the new operating system on your iPhone and iPad, let's imagine what could it be.
Lorenz Wöhr takes the conservative route and updates WhatsApp look with a free navigation bar in green that reaches the status bar — I love this idea — and a card style navigation system to browse conversations. The hidden menu accessible via a hamburger button (because that's how it's called) keeps the bottom menubar hidden from the main view, which would arguably lead to more taps in favour of a cleaner chat window. I like the fact he doesn't go terribly overboard with the font thinness although the rounded avatars are a little predictable. Nice concept, nice shade of green, can please someone get anyone at WhatsApp in touch with Wöhr?
Second on our WhatsApp redesign tour is none other than Carl Hauser, who manages to make some good points on UI on his redesign. Even if he uses some odd sizing for his buttons and profile pictures, there are some great ideas all around. See how the avatar changes to green displaying a number when new messages are available? Group chats are represented by something resembling a deck of discs, which is a good concept. Hauser prefers to move the navigation items to the top, probably accessible only if you pull the list down, as you would do with the 'pull to refresh' gesture.
On a September revision he returns to the chat widow to experiment with blurs and profile pictures on the top navigation bar. Then he elaborates more on idea of the 'deck of discs', showing the profile pictures properly swiping to the right.
Also diverting from iOS 7 standard interface elements is Guillaume Marc and his attempt to simplify navigation. The idea is to place the two most used areas at the top: contacts, chats and settings. I can imagine you use this to drill down and return using the swipe to right gesture tapping anywhere on the screen. As we saw on our previous round of mock-ups, Marc decides to use custom typography and a translucent bar in a shade of green — soothing minty tones for the bright iOS 7 greens you see in apps like Messages.
Even more radical and inspired by system blurs is Gian Di Serafino ditches white backgrounds and presents a recent chat window dominated by profile pics. Using the omnipresent circled avatars, the pictures are used as background for each contact adding a layer of blur on top. I'm not too sure the legibility is too good for the message, as we have commented before. What I like are the action arrows adding green contrast and making the app a bit more recognisable.
On the opposite side is Bart Berden, who comes up with a very conservative take that I find very realistic of what the next WhatsApp would end up looking like. Apart from the rounded avatars and full opaque green navigation bar everyone has used, I really like the proportions and alignment on the recent chat window. Chat bubbled look more square that the ones in Messages, resembling the old WhatsApp and helping you to know the app you are using. The group chat is solved overlaying the participant's avatars on a translucent white pane and a notification badge to indicate their contribution.
And as Bart mentions, his design is a rebound of Davey Heuser take on WhatsApp's redesign. This concept is full of clever details and slight changes to the current app. The hamburger button at the top left integrates a badge to indicate the amount of unread messages. This reveals a separate menu where you can see the open chats (recent updates) followed by the contact list. If you use WhatsApp a lot you will understand how he is actually merging two views in one. While typography is unconventional, the use of colours is really good, going through the trouble of creating his own default chat background inspired by the official one. This has to be one of my favourites of the list.
To finish with this second roundup of redesigns I'm also selecting the icon drawn by Connor Hasson using the iOS7 grid. You see? You don't need superfluous background textures to make some decent-looking icon with strong branding.