iPhone Prototype

PROJECT DETAILS     

     Project Name: Re-Designing WhatsApp Messanger
     Focus: Information Architecture & Navigation
     Full Creative Project: Behance
     Inspiration: My lady.)

About 6 months ago I started to pursue a friendship with a lady… In the beginning, the only common ground we could find that felt safe, was WhatsApp. What started out as single chat bubbles, got multiplied and ended up in streams and streams of chat bubbles traversing between casual conversations about the normal “how was your day” to deeper, “what do you fear” conversations…

As the chat bubbles streamed in and out over time, WA created the space for us to go out in groups. But in between, we continued to spend countless hours on WhatsApp, chatting to each other.

These countless streams of chat bubbles somehow lead me to a pivotal question: What would WA look like if I had to design it from the ground up? I realized that my current not-so-good experience with WA was influenced by the app’s not-so-good Information Architecture [IA]. So, 5 months ago I embarked on this journey to re-Imagine WhatsApp.

For 5 months I scraped together scattered and hard to reach hours during my full time job, to work on a simplified and easier to use WhatsApp. I tore the whole app apart and started to build it from the ground up again, focussing on the architecture of the app as well as a few new concepts.

And this is it…

WhatsApp Re-Imagined

The whole idea was to focus on what WhatsApp do best: Chatting. But I felt that the User Experience [UX] of this core value was traded for a wrong navigation pattern [I briefly wrote about the dangers of using wrong navigation patterns, over here]. So my whole mission revolved around finding a better alternative to this “problem”, which I hoped would simplify the app more.

3 Main Screens

To explain my design decisions better, I’ve divided the app into 3 main screens.

• The Front Screen is what you will see once you have completed the on-boarding process.
• The Chat Screen is where all the conversations will take place. 
• And the Contacts Screen is where contacts are added, friends are added to a group chats or messages broadcasted.

The Front Screen
I realized that I spend most of my time switching between friend chats. From the chats list into a chat, back to the chats list and into a chat again. And for that obvious reason, I’ve displayed the list of chats on the main screen. Everything else was structured around it to compliment and enhance this list…  

Main Screen with latest chats listed from top to bottom

Favorites Tab: Currently the favorites tab is populated with a list of people who, I can confidently say, are not my favorites. If this functionality works correctly in WA, it would be something that could work better if filtered instead of given a dedicated tab. For this reason I added both the Favorites and Group Chats to a filter to easily jump between these categories.

Apple style navigation bar

Filtering between contacts

Swiping: Swiping a chat contact, gives you 3 options. Favorites: Add/Remove people to/from the favorites list. Block: Block someone.) Moments: View all media that has been “momented”.

 
Swiping from Right to Left

Searching Contacts: I came to the realization that I hardly chat to more than a dozen people on WhatsApp. I probed a few friends who uses WA as well and they confirmed this. So, I decided to only display the top 15 recent chats as an expanded card list and as you scroll down, it turns into a single row list [without the notification badges to the right] where you can search for friends using either the alphabet or the normal search box.

 
Scrolling down the list of contacts, reveals an alphabetical list of contacts

Moments, Profile & Settings: Through all the streams of chat bubbles, I’ve always found it difficult/tedious to find photos or special “moments” I shared with Lindl or visa versa. It inspired me to create the Moments Timeline. It enables you to view and find any chat item that has been “momented” via a shared timeline. Clicking on the Timeline items would display them in full screen.

I’ve also spend some time to reorganize the settings page.

Profile with Timeline

Settings page

Chat Screen

I wanted to make flipping between the Main Screen and the Chat Screen really easy and therefore I’ve placed the Flip Arrow in the right corner. Tapping it would flip over to your last chat and tapping it again would, expectantly, flip you back again.

Profile Pic: Because of the Flip icon, no back button was needed any more, which meant that I could move the profile picture over to the left. Tapping it would reveal the user’s profile…

Actions: Currently, contact related actions such as call, edit and info is located to the very top of each screen load. I’ve made them more prominent by moving them into a drop-down menu, indicated as an arrow next to the profile name.

Contact related actions on WA currently

Contact related actions: Edit, Clear, Email, Call

Recent Chats: As mentioned earlier, I found that one of my most important actions performed on WA, was to switch between contacts. I started to explore with various recents features and decided to add a swipe gesture. Swiping from left to right slides out a recents shelf which then enables you to switch between your 10 latest contacts. This means that this would enable me to spend most of my time on one screen, swiping to access recents contacts and then only flip back if you need to perform more infrequent tasks.

Swiping from Left to Right reveals the recents shelf

Everything else on the Chat screen was kept as is…

Contacts Screen

Contacts are accessed via the top left corner icon. This is a list of all your contacts mixed together – both to those on WA & not on WA. The main purpose of this screen is to create Group Chats, Broadcast Messages and to invite new people.

Merging Contacts: Currently on WA, when a new group is created, contacts needs to be added individually. So with the main changes I made to this screen, the user can now perform group tasks such as “Group Chat” or “Broadcast”, by selecting multiple contacts. Also, because I moved these two actions to the “Contacts” screen instead of the “Chats” screen [as is now], a message can be broadcasted or a contact added to all people in your address book, even if they are not on WA yet.

Broadcast and Group Message options displayed to the top of the chat window

Contacts screen displaying all contacts

FLTR: Broadcast a message, Group Chat, Attaching media, Choose profile picture

Message displayed if contact is added to group but not on WA yet

Conclusion

And this is WhatsApp Messanger Re-Imagined.

It’s been a great journey. I’ve learned a lot about Information Architecture,  Navigation, Design and simplifying things. But perhaps the most important thing that I have learned is that just because something is simpler, it doesn’t mean that people would be willing to adopt it.

There’s a law called Occam’s Razor’s Law. It states that the simplest design is almost always the best. In this case it’s not true. The stakes are too high. Competition is strong [WeChat, 2Go, Tango, etc.]. And WhatsApp runs the risk to loose users to other IM apps.

This is a good lesson in design.

A company’s decision to redesign an app hinges on so much more than giving people a better experience…

But I will do another blog post on this a bit later.

For now, many thanks to WhatsApp for the opportunity to pull their app apart. It’s been great fun.)

Ending The Story

Apart from the fact that I finally finished the project, the story has another great ending as well…

I knew that even though WhatsApp is a great Instant Messaging tool, it couldn’t help me share my heart with Lindl. So, a while ago I picked up the phone and asked her out for a coffee. An intentional coffee. She agreed. And over a cup of coffee I shared my heart with her: “I really like you. Would you allow me to pursue you?”

And so she did.)

Why call it the basement? Because it’s hidden, dark, there’s a ton of crap in it, and, frankly, it’s scary and no one wants to go down there.

Having a quick conversation on this article at the office the other day, opened a can of worms. Some of the guys didn’t agree with the article. I agreed. Well, at least in a sense. The Left Nav doesn’t have to be this way. But sometimes it is. And this made me think…

It made me think of patterns. Big brands. Conformity. Comfort Zones. Iteration. Innovation. And a bunch of other stuff.

And it also made me think of this…

The biggest threat any pattern, like the Left Nav pattern, can pose, is that it can easily become a nice comfy compromise people can rely on when they’re too lazy to come up with unique solutions to visionary, strategic, IA or UI problems.

 I have absolutely no problem with the Left Nav. It’s a great pattern. It works. But it only works in the right context. Out of context it becomes a UX compromise.

The Problem With Patterns

The problem that I have with the Left Nav is that it has become a trend… And now people are using it without really thinking through other, better alternatives. I strongly disagree with designers who think that just because FB and other big brands are using a pattern, they should use it as well. It doesnt mean that if it is the best solution for FB it’s the best solution for me.

Patterns without foundations create user experiences that range on a spectrum from mediocre to bad. Not excellent… I believe that the foundation of great UX starts on a visionary and strategic level. Not on a navigational level. Being crystal clear on what the vision is of a product and then building it out through consistent and carefully planned strategy, is the very basics of excellent UX.

So… Before I can even think of using the Left Nav for my next big app, I need to look at what the vision of the product is. What does the app need to do? What is important? What is not important? What needs to be front and centre? Do I need this and this and this? And I’m not even talking about IA yet. I’m just talking about vision. IA  follow vision.

Many times bad IA is because of inconsistent vision and strategy or a bunch of other political factors.

Once that is in place, IA can be sorted out. Which then leads to the process of iteration to find the best possible  navigation pattern that suite my vision and strategy best.

The Left Nav is a scary, dark place with a bunch of crap in it only when I have used it in the context of a misunderstood, not understood at all, or poorly planned vision & strategy. And so it is with all other navigation patterns.

Including Apple’s old and well trusted Top & Bottom Bar Navigation…

Apple’s Well Trusted Navigation

Apple has done a great job with their navigation. It aligns with Brent’s 3 requirements:

•  It should allow the user to navigate
• It should serve as wayfinding, letting the user know where they are
• It should help the user understand what the product is capable of.

I have seen this pattern used in so many bad ways before. Just because the bar has 5 place holders doesn’t mean I should use all of them [or any of them...] What’sApp is a great example.

They have used all 5 of the slots in the bottom bar. It’s ok. But it’s not great. It’s not excellent UX. I have found several other WA concept designs and all that the designers did was put new makeup on. But that doesnt change the UX of the app. The app’s UX is deeper than makeup. It lies at the core of  vision. A pig with lipstick on is still a pig.

WA’s IA can be simplified a lot. I have worked on some concept designs over the past 4 months, so I have gone through several iterations to simplify it even to the extend of not having a bottom nav at all [and also not a left nav...]. I’m not going to go into the details right now…

The point that I want to make here is that even a well trusted pattern can be wrong for my product if I dont understand why it will or wont work for me.

Simplifying Navigation

AirBnb used the Left Nav to store 3 things: Featured, Search & Host. I’m still struggling to wrap my mind around the reason for using these 3 items in a Left Nav… I dont know whether they have used this pattern because it’s trendy or whether they really felt that it’s the best solution. I believe they could have done better. I’m very tempted to say that this can be solved without even zooming in on a visionary and strategic level.

Foursquare is a perhaps the best example of how pulling everything apart can solve a lot of UX problems. Or at the very least create a better one. This is what Foursquare’s head of product had to say about the process:

“We decided to pull the pieces apart and put them back together again,” Rainert said. “We want to create the richest experience possible.”

That’s great. I like it. They first had to pull the app apart before they could simplify it and see why the 5 slot nav could be reduced to 3. Here’s before and after images…

Left Navigation & Facebook

The Left Nav is most probably the best possible navigation that FB can use. For now at least. Wether they have made the best use of it, would require some more thinking. I have seen how big brands introduced patterns to the world [and I'm forever grateful for that], but I’ve also seen how the rest of the world just copy those patterns. Many times just because it was introduced by a big brand and because it’s trendy. Ken Yarmosh puts it well in context:

Back when Facebook first hit the iPhone in August 2007, it introduced the “dashboard” layout pattern to iOS. Many applauded the dashboard as a fresh take against the standard tab bar and a number of apps began following this pattern. Over time though, it proved to be a frustrating way of navigating because it requires the user to leave their current state to get to another part of the application. Additionally, it required paging the navigation as it grew, meaning additional gestures were needed before an item could be selected.

It will take a bit more research to know whether the Left Nav will die in the same way as the “Dashboard” did. But then again I dont know what I dont know. And therefore anything that currently exists, and that wants to last, will have to hold up against this daunting truth. What I do know though, is that all good things come to an end and gives way to better things. As technology evolves, the way we interact with products will change and so navigation will change as well.

In Conclusion

I want to conclude with this: Patterns are great. They help us solve complex problems. They help us simplify things. But only once we understand both the patten and the problem. And the understanding of a problem lies at the root of the cause. Copying any pattern, whether it be technical in nature such as navigation or design, or life patterns such as behavior, without really understanding the root of the pattern or problem, will be the greatest limiting factor to change or innovation.

That’s what I think…

Last week Friday I stumbled on Ryan Taubert’s music, the composer of “Home’s” soundtrack. After listening to it, I was just once again inspired and moved by the beauty of his compositions.

I have attached his music below…

“Several years ago when I asked my grandmother about overcoming pain, this is how she explained it to me:  Look at the circles below.  The black circles represent our relative life experiences.  Mine is larger because I am older and have experienced more in my lifetime.  The smaller red circles represent a negative event in our lives.  Assume we both experienced the same exact event, whatever the nature.  Notice that the negative event circles are the same size for each of us; but also notice what percentage of the area they occupy in each of the black circles.  Your negative event seems much larger to you because it is a greater percentage of your total life experiences.  I am not diminishing the importance of this event; I simply have a different perspective on it.  What you need to understand is that an overwhelmingly painful event in your life right now will one day be part of your much larger past and not nearly as significant as it seems.”

So, ultimately, I think, what this point says is that whatever bad experience you currently have, will look a lot different in a few years time as you gain more experience.

I agree.

It kind of gives me a sense of peace that somewhere out there there is a different perspective on what I’m going through right now. It’s out there.

However I dont think that I necessarily always need to wait until I have more experience before my current perspective on the event will change? [Sometimes we do need to, but I'll post on that next time...]

New perspectives are also locked up in people who have already been there where I am right now. They have the wisdom & new perspectives I need, to get through my “bad” event. New perspectives on bad events is therefore not necessarily 10 years away or until I have acquired the desired experience.  New perspectives can be one wise man away.

And that’s why I strongly believe in accountability! Life is too short to go through all the same experiences other people have already gone through in order for them to get through tough stuff.

So, here is my version of the graphic above…

So, how many wise men have you surrounded yourself with? In them is locked up the wisdom you need to gain a new perspective on whatever circumstance you find yourself in. Both today and tomorrow…

I found this photo on 500px taken by Mark Dumbleton, and it just reminded me once again that we Cape Townians lives in one of the most beautiful places in the world! Table Mountain is not one of the 7 Wonders of the world for nothing…

With that said… the sad part of this beauty is that we kind of miss it through the busyness of life. We have beaches, forests, waterfalls, trails and so much more, but we forget that we truly have it. It’s there but we’ll rather spend hours in front of the TV/Computer and in malls, instead of enjoying what we have.

This weekend it’s Volley Ball time on Clifton! Yeah!

As part of my role as a User Experience designer at Flow Interactive, I do quite a lot of sketching. Obviously…

So, when I started with Flow, I decided to buy some nice colored pens. Cheap ones. They are ok. But not great.

Now this is where the story gets interesting. The other day one of our directors and myself did some drawings together and somehow I ended up using his pen. And what a delightful experience… So I complimented Phil on his pen which lead him to asking me if I would like to have the pen. Like in keeping it… How cool is that?

The problem is, I declined his offer: ”Nah, dont worry, I bought some half decent pens just the other day.” So he offered it again, “But do you want it!?”

I declined again… Well, he didn’t ask again and now I’m still stuck with my silly pens.

The thing is, this has happened in so many areas of my life before. There are some things that I really want but I’m just too happy with the sub standard things in life…

Just because I dont really want it. Just because I dont really want to grab it.

So, do you really want the peace? The joy. The wife. Abundance. Health. Etc. Etc.

If you want it, then take it… Pursue it. Live it.

It just keeps on going on and on and on and on. Just as you think the repetitive steps is over, another stretch of steps stares you in the face.

It’s a killer! But it stays beautiful…

But what I have learned from The Otter Trail was much more than race strategy, plyometrics, hill repeats, etc, etc…

The life lessons outspans these by a number of 1000… But before I dive into them, I need to give some context…

Almost a year ago, me and my brother decided to do the Otter. Not together though. I’m way to competitive and he would just frustrate me. So our training programs kicked off separately. He in the Northern Cape where there is virtually nothing else but mine heaps and me, on the other hand, in the Trail Haven: Cape Town.

I soon realized that Nico doesn’t know what he is letting himself into. With no trail race under his belt and no race done further than 21 km, I knew that he was going to be deeply disappointed with the outcome on race day…

I knew I had to sacrifice my own ego and moments of glory I was seeking so much. I also knew that running and finishing the Otter with him would be more difficult than running a sub 5h 30 min.

And this is where my lessons started:

1. Commitment
 The best preparation for anything in life is to know first of all what you are committing for.

I knew what I was committing to. I was committing to run with my brother at his pace. 11 min/km pace. I knew I was committing to stick with him no matter what. If he doesn’t finish, then I dont finish. If he stops, then I stop. If he complains then I dont get irritated.

If I wasnt clear on this from the start, I would have dropped him at 15 km already. I would have gotten irritated with him. And our relationship would reflect the scars in years to come.

2. Relationships
Relationships last when I know what I commit to and then take responsibility for anything else unforeseen.

There are some things in life that we can’t foresee after we have made a commitment. But the fact that I have committed to it should encourage me to be a man of character and to handle these unforeseen circumstances with back bone.

When I decide to pursue a lady, I realize and know that there are some really scary stuff that I will discover about her. Stuff that I didn’t anticipate for. Stuff that might make me want to leave her. A man of character choose to take responsibility even when it gets messy.

This is how relationships last.

3. Patience
The best way to stay patient is to understand and appreciate how other people view time.

Nico just wanted to finish the race. 8 hours. That’s it. Anything else would be a bonus. I wanted to finish the race with him. But as fast as possible. We had different perceptions of 8 hours. And because of this, there were times when I got really impatient and irritated with him.

There will be times when my wife will be a lot more immature, insecure or weaker than me. Times where this weakness will limit my career or life ambitions. But taking the ‘me’ out of this sentence, refocusses the attention to where she is, and develops a new appreciation and understanding of time.

______________________________________________________________________________________

My life is changed! I thought I was going to do the Otter Trail Run, but actually I did life… Life is in all activities we do. We choose whether we do an activity or life.

My experience is that Life is always more rewarding…

Choose Life!

PS: Here is a video of us just after we swam through the Bloukrans River: www.vimeo.com/51588235

Leaving a legacy has a lot to do with knowing who I am. Here’s a POWERFUL song that amplifies exactly this. It’s called “The Anthem” and performed by Jake Hamilton.

The Anthem

The Anthem [Lyrics]

I can hear the footsteps of my King
I can hear His heartbeat beckoning
In my darkness He has set me free
And now I hear the Spirit calling me

Wake up child
It’s your time to shine
You were born for such a time as this

I can hear a holy rumbling
I’ve begun to preach another King
Loosing chains and breaking down the walls
I want to hear the Father when He calls

This is the anthem of our generation
Here we are God, shake our nation
All we need is Your love
You captivate me

I am royalty
I have destiny
I have been set free
I’m gonna shape history

And then life happens as we grow old… We loose faith that we have what it takes to change the world…

I watched Joe Niemand’s movie, “Agter die Ligte” last night. It’s a story that winds through his life journey and builds up to where he hosted the biggest Afrikaans music show in the History of South Africa.

In faith!

You see, South Africans dont do that! In anyway, not for God. We do other things for God. And without making it sound condescending, we South African Christians settle for baking pancake for Jesus…

Somehow, South Africans still have this mentality that we are at the Southern Tip of Africa and have no right to do equally as much, or greater things, than our Neighboring continents…

I have always believed that within each person is locked up the potential to shake the foundations of this earth. That we are Conquerors! Warriors! History Makers & World Shakers!

I believe this about myself…

But God unlocks it on His terms… For God, what happens behind the lights are vastly more important than what happens in the light. He takes people on a Journey first, before he release the power within. He did it countless times before. He did it in Joe’s life. In Angus’ life. In the lives of a whole legion of God fearing men. David. Joseph. Gideon. Joshua. And the list continues…

These are the men who shake the foundations of our planet…

But in between now and then, there are a lot of things that needs to happen. But only one thing that are unquestionably and unmistakably necessary: Finding my identity within God by pressing into his presence.

That’s it.

If I can do just this one thing, all the earth shattering plans God predestined for us before creation will come to fruit…

Joe Niemand’s “Night of Lights” Show has made history in SA. May his testimony echo into the spiritual realms and ignite the hearts of men and woman in SA [and beyond] to live lives that can display His glory in full splendor.

May you be moved to shake the foundations of this earth!

“What we do in life echoes into eternity…” Maximus, Gladiator

Lately I have been really inspired by this statement from Maximus in the movie, Gladiator. What I do right now, will echo into eternity… What I do right now, will influence my wife, my children and everyone around me.

I dont think we always understand this. If we did, our lives probably would have looked different…

I think the reason we struggle so much with this is because we only live for the 80 years that we will be alive. But, what if I can shift my mind around this 80 years? What if I dont only care about this 80 years but also develop a deep care for the next 400 years?

What would my bloodline look like? What would the people look like that encountered them?

I dont know. And neither would I. But they will. And I want them to look back and say; “Wow! My great  great grand father was a man who fought for us. Who pressed through. Fought the good fight. And changed our lives forever…”

I want this to echo into eternity in… and it starts right now!

The decisions I make right now to be a man of character and no compromise, to be bold, to be confident in who I was created for, and to be a History Maker & World Shaker will be the substance of this echo.

And this is what I hope for all…!

We were born for such a time as this to shake the foundations of the earth! [I'll do a post on this somewhere this week...]

May you be inspired to leave such a legacy!