Designing a Video Walkie Talkie
How I thought I was designing something totally new, and how I was so wrong about that.
Hi, My name is Mahdi. I’m a Product Designer, and I work at an amazing company called NGTI located in Rotterdam, The Netherlands, where we work on a product called Swisscom iO.
Swisscom iO, is a chatting app which combines the features of WhatsApp & Skype; You can use it to chat and to make local and international calls.
In this article I’ll be explaining everything in full details behind a new feature I was responsible of designing it’s user experience, interface & interactions.
Get a cup of coffee & sit tight because this is going to be a bit long, but I promise that you’ll enjoy reading it.
p.s. this article has a lot of gifs (none for cats unfortunately), some of them might need some time to load, don’t hate me for that, I just wanted to share as much details as I can.
Video Chat
The feature in 3 words; Video Walkie Talkie.
The feature lets you do a video chat/call instantly without waiting for the other person to pick up the phone like in normal video calls in other apps like Skype.
How does it work?
When you’re in a chat with someone simply touch and hold the video chat button at the bottom right of the screen and you’ll see your front facing camera indicating that you started a video chat session.
A few things you need to know about the feature
- To be able to use the feature the other person must be in the same conversation with you.
- You can lock video chat, so you can continue typing if you want while you have the camera open (useful if you’re in a place were you can’t turn on the audio on your phone).
An Overview of My Design Thinking Process
I was briefed by the product owner, he told me his idea, I liked it and we discussed it for sometime to see how it’s best presented for our users.
Research
After the brief and a quick brainstorming session with the product owner I started doing my own research, I’ve downloaded as much chatting apps as I can to see if any has the feature or anything similar to it so I can learn a little bit.
While doing the research I found a lot of interesting ideas that I could use, but what was really interesting for me is that I didn’t find any single app at the time which has a video chat feature the way we think it should be.
I got excited and scared at the same time!
As I’ll be designing something totally new, something that wasn’t thought of before, this also made me doubt the idea for sometime, as I started thinking why no one has anything like it yet? Maybe it’s a bad idea after all?
I stopped all these negative sounds in my head and started thinking clearly about the value this feature will bring to our users, and that made me believe in it again, even more than I was before.
Sketches & Visual Designs
Usually I do paper sketches but for this project I started in SketchApp, and it was really quick, as by now I have many block elements from old projects that I can reuse in this new projects. I tried different positions for the button and tested different states of the app like when the keyboard is up/down, also stuff like muting the audio and flipping the camera.
After trying different positions for the buttons and elements on the screen and settling on something I’m happy with, now it’s time to have fun!
Rapid Prototyping
I took my designs and started slicing the images to use them in my prototypes. I made a ton of prototypes in Pixate & PrincipleApp, and found out that my first design was horrible, and the second one was a little bit better, so I continued iterating and trying different stuff and building more prototypes until I had something that’s usable.
Interaction Design
This is my favorite part of my process, where I can try crazy stuff and play with motion graphics.
I used Adobe After Effects to create the animation for a few parts in the app like the loading indicator of the video avatar, and after I was happy with it I tried to copy it in Pixate & PrincipleApp test how it feels.
Icon Design
One of the main part of the feature is the icon, it had to be unique and expressive somehow.
I’ve started with a circle and a video camera icon which is the simplest thing that could relate to the feature. After that I added a user icon in a camera, and finally made a smiling face inside a camera which resembles the user’s face when using video chat with the front-facing camera.
Video chat lock
A week before finishing the feature me & the product owner were thinking that it’d be nice to be able to keep the video chat running and at the same time being able to type in chat messages, which is very useful if you’re in a place where you can’t play sounds on your phone.
Luckily it wasn’t very difficult for our awesome developers to make it work.
Specs for Developers
At that time I was doing the design specs manually in SketchApp using the plugin Sketch Measure.
Currently I don’t do any specs as I’ve moved into using Zeplin, which I export my Sketch files to. The developers can see all specs in Zeplin, and can also export all the assets they need.
That was an overview of my process, now I’ll take you through my process in detail.
Design Problems & Solutions in Details
The thinking behind this feature & how I put up all the peaces together
I have to note that when I say testing/user-testing I mean I did an internal test in the office. I haven’t done any external user-testing for this project.
Placing the video chat button
This was one of the first question I had, and the most important one, because it’s the first things users will see in this new feature.
I’ve had different ideas on where to place the button, and I’ve decided to put it at the bottom where it’s easy for everyone to touch while using the phone with one hand.
Below is my thinking process to the placement of video chat button.
In the beginning I was thinking of re-using the attach button, so video chat will work when you tap and hold the same button you use to send photos and videos. That made some sense in the beginning, but then when I tested it I found that it’s really confusing, and almost no one guessed that tapping this button would let you start video chat.
After that I thought it’s better to have a separate button with a unique icon that hints what’s the feature is about. I put the button on the bottom right because I thought it’s okay to hide the send button while there is no text in the input field, otherwise I’ll have to move the attach button somewhere else, but then it’ll be a lot of change for our users, and that’ll be another thing they’ll have to learn with this feature.
Then I thought maybe it’ll work better if I switched the places of the attach button and video chat hoping this will make it stand out for the users, but turns out it’s a bad idea after testing it, as I assumed, most of the people got confused by the change as the attach button looks like it’s the send button because it’s next to the text field!
Lastly, I used the new icon and placed it on the right which was the best choice so far after testing it on a few people.
After testing the last design I had another problem that needs solving, the problem is that users wouldn’t know how to use the feature, they wouldn’t guess that you have to tap and hold to use it.
How will the user discover this feature?
I’ve tried different things, and what I found out works best is animating the video chat icon when 2 users are in the same conversation screen.
The first try was to make the icon flash blue:
Then I tried making it wink and jump:
But after all I went back to changing the color, and made it purple (our identity color) and stopped the flashing.
It changes it’s color from grey to purple when the other person enters the conversation screen. That’s kind of subtle but also noticeable; it doesn’t annoy the user like the flashing/animated icon & at the same time it gets enough attention.
How will the user learn how to use it?
I assume that most of the users will tap on a new icon to know what it does, so why don’t we show them a hint when they tap on video chat as nothing will happen if you tap it without holding.
I found that my assumption was right when I tested the button, people found out that we have a new button but didn’t know how to use it, and almost everyone tried to tap on it.
I remembered that when I looked at other applications I found that WhatsApp was doing it like that in their audio notes feature, if you tap once it shows you a hint telling you how to use it.
That inspired me to do something similar for our video chat feature, and this is how it looked:
What will happen if a user tried to start a video chat and the other person isn’t online?
On the senders side I need to display a message to the user or something to tell him/her that the other person isn’t available, I’ve tested different ways to display the message, but I wasn’t sure about it.
I’ve then tried something different, which is just displaying the watch state in the upper navigation bar, where you usually see if the other person is online or typing.
Having it only in the navigation bar wasn’t a bad idea after testing, as it didn’t annoy the user with any error message, also because users usually look there for feedback to check if the other person is online/offline/typing.
On the receiver’s side we need to show a notification/message telling them that a friend is trying to video chat with you.
First thing I designed was a message that’ll be displayed in the history screen.
Obviously this isn’t enough, we need a notification to tell the user that someone started a video chat with them even if they’re in a conversation.
Locking Video Chat
The whole idea in the beginning started as a video chat call that won’t stop you from using the keyboard and typing while video chatting, but later on we decided to make it as a walkie talk, and then finally we came back to have the option to lock it (keep the video chat running while typing).
During the process I’ve made a lot of prototypes, I’ll show you the most important ones and I’ll explain the thinking behind each one of them.
p.s. don’t let my ugly face scare you, just focus on the design, that’s why you’re here.
First Prototype
Tap and hold the button at the bottom right to start video chatting.
While it’s trying to establish a connection the avatar appears in black & white and when a connection is established the avatar becomes colored.
You can move your finger off the button after the connection is established.
The calls button on top right changes to a stop button as you won’t be abel to make regular calls in the app while you’re in a video chat session.
Tap once on the avatar to mute your microphone, and double tap to flip camera.
Second Prototype
This one is almost exactly the same as the previous one, the only difference is that in this one you can drag your video avatar to the bottom to end the session.
A close button (x) will appear while dragging to the bottom of the screen to make it clear to the user that this will end the video chat.
Third Prototype
In this prototype the only difference is that there is a close button attached to the video avatar, and once you press it you end up the session.
Fourth Prototype
In here I started working on some fancy interaction design details.
While video chat is starting to make a connection the video avatar appears in a big size so you can look at yourself before the other person could see you, then when a connection is established the avatar shrinks it’s size.
If you tap your avatar you’ll see the 3 buttons, end video chat, flip the camera and mute the microphone.
Fifth Prototype
In this one when you start video chat the normal call button gets replaced by your video avatar.
The video avatar appears in a small size while trying to establish a connection, and when a connection is established it grows in size a bit and a green ring appears around it
When you tap your video avatar the same action buttons appear.
As you’ve probably noticed, I’ve tried the square stop button again as I was thinking it’s more related to end video than an (x) button.
Sixth Prototype
In this one I went back to the basics, the user can tap and hold to start video chat (walkie talkie style) and also can lock it by swiping to the left.
A hint appears while tapping and holding the button to tell the user about the locking mechanism.
To end the chat simply tap the lock icon or drag the video avatar to the bottom.
Final Product
After doing all these prototypes and testing them
This is how the product looks & works right now, you can download it from the Apple App Store & Google Play Store.
Disappointment
Snapchat had almost the same feature before us.
The only difference is that they don’t allow you to use the keyboard when you’re doing a video chat.
I didn’t know that they had the feature until we were almost done with our product.
I totally missed it when I was researching other applications.
If I knew I could’ve learned a lot from what they’ve done and could have avoided doing some mistakes, but at the same time, that was a really good thing for me, I was forced to try everything and to do all the mistakes to reach the design I’ve done.
