One good day when I did not have a whole lot to do (OK, I always have work to do, but I reserved some little time for myself) I took on the small project to redesign Windows Phone’s Whatsapp to make it look less… sucky. Now If you’re a Windows Phone user you already know how simplistic and bland the app currently looks:
And Don’t even get me started on the Convo view. It looks really unpolished compared to the native messaging app for Windows Phone. (Here’s how the native app looks in comparison)
My main gripe against the current looks of the app is that it makes no effort to use the Metro/Modern/whateverthefuckyouwannacallit UI language to create an unique looking experience for Whatsapp. I want to feel I’m using Whatsapp and not some cheap and unpolished knockoff of the original messaging app.
Here’s my concept:
The ‘Chats’ list:
- If you are into WP app design you already know where I stole the style from the topbar. I think this style looks really good (especially on high resolution phones like the Lumia 920). It saves space, and honestly, we don’t need pivots THAT huge.
- I decided to add the nice little background with the doodles Whatsapp likes so much to put everywhere. Hey, I don’t blame them, it actually looks kinda nice.
- I made the app white. Why? Well, some insist that apps with black backgrounds are the design signature of Metro UI but I disagree. We have TOO many apps looking all the same. White themed apps on Windows Phone look gorgeous and take for account that the most important and best apps are using white themes.
- Taking advantage of the saved space above, I made the profile images slightly bigger than what they currently are, and I did this for two reasons: One, Everyone LOVES LOOKING AT PROFILE PICS (no, seriously), and two, it allows me to align Last Message and the time/date to the same side so that Names don’t get cut off by the Date that is currently aligned towards the right.
- In addition as a nice touch, I put the new message count in a little square on top of the profile picture.
- The search, new and status buttons in the app bar stay the same.
The Conversation view:
Bu-But!! You said!! You didn’t want a messaging app knock-off!! I did. But I can’t blame devs for trying to emulate it, it is pretty good. I took the messaging app’s default font size and padding because I think it looks really nice and clean. If you noticed, I made the images sent fill up the entire speech bubble, much like in iOS and Android because this offers a much nicer preview than what it currently looks like. I made the name on top MUCH smaller and added the contact’s profile picture; all this wrapped in the same grayish top bar that should nicely collapse like this when you start typing a message:
The other parts of the app I don’t have any particular gripes against, so I haven’t come up with a design for them YET (Plus I am very busy all the time as I first said, but maybe one of these days… when I get a little more time….!).
Now, I am by no means a programmer. I’ve had a little experience designing UIs for a couple of short-lived WP apps in Expression Blend. And if you’re one of those dudes that works in the WP app for Whatsapp, hi! If you liked this you are free to use these concepts whichever way you like, I won’t even ask for a little recognition at all :D.
Since some of you were asking for it in the Reddit thread, I decided to try and make a dark version of the mockup to see what it would look like:
Plus have another part of the app redesigned, the ‘favorites’ screen: