At Wire, I had the opportunity to lead a complete redesign of the call experience. We spent roughly two months building a new user experience and adding group video calling to all supported plattforms.
We started the sprint by taking screenshots of every single state of the current call interface, printing them out and putting them on the wall. The goal was to identify the main shortcomings of the existing solution so that we could have a better idea of what needs to be revisited.
Unified controls
One thing that became clear very early on was that we had to unify audio and video calls. Previously, you had to hang up the ongoing audio call and initiate a whole new call just to switch to video. To enable this unified experience, we came up with a layout that would work just as well for video calls as it would for audio calls.
We decided to make the main controls at the bottom of the screen context based. While in an audio call, you had toggles to mute your microphone, switch to video and route the audio to the speaker. As soon as you turned on your camera and switched the call to a video call, we replaced the speaker toggle with a button to flip the camera. The idea behind this was that you always need a video call to be on speaker because you are holding the device in front of your face instead of to your ear. So we decided to turn on the speaker automatically when in video mode, and use the newly gained space to add a button that’s more important in a video call environment.
With this new unified behaviour, we made it dead simple to switch between audio and video on demand. In addition to that, we made our lifes a bit easier since there was now only one version to maintain.
Then we noticed that those unified controls could be reused in another place: Incoming and outgoing calls.
By extending the use of the mute, video and speaker/flip toggles to incoming and outgoing audio and video calls, we enabled users to mute themselves or switch their camera before accepting a call, giving them full control over their privacy. Keeping the same actions in the same place, no matter what state the call is in, also makes it easier for people to find them and get familiar with the interface faster.
Call participants
Another big improvement was made to the way we display call participants.
The previous interface had two problems. First, it had a very low information density. Because of huge avatars, only two participants were visible at once in a horizontal scroll view. Second, the only displayed information was the avatar and the first name of a person.
We decided that a vertically scrollable list view would be the obvious solution to that problem. This not only allowed us to show more participants at once, but also to show more information like full name, guest and verified status. During a video call, we even show which person is currently streaming video with a little icon next to their name in the list.
Group video calling
Arguably the biggest news of that feature was the addition of group video calling for up to 4 participants. For this, we came up with a system for how the grid of videos should behave in every single scenario.
The grid works like this:
If only one person in the call is sending video, no matter if that person is you or someone else, the video will be displayed in fullscreen for every participant. This way we avoid ever showing a blank screen with something like “video turned off”.
If two people are sending video, we differentiate between one of them being you, or none of them being you. If you are one of the two people, your video will be displayed in a floating thumbnail in the corner so you can see the other person in fullscreen. If none of them is you, we divide the screen by half so we show both streams as big as possible.
For three and four videos, we add another cell to the grid.
Minimizing
One of the most requested features for our call UI was the ability to use the app while having a Wire call running in the background.
So we added the ability to either tap the arrow in the top left corner or swipe down from anywhere to minimize the call overlay. By tapping the green bar at the top of the screen, the call overlay would open again.
We even added a little mute icon to the green bar to let you know at a glance if you muted yourself, without having to open the overlay.
While testing a first prototype of this multitasking feature, we noticed that it feels uncomfortable to know that when minimizing the call overlay during a video call, other people in the call can still see you but you can’t see yourself.
So we decided to pause your video when the overlay is minimized, and to automatically resume sending video once you open it again. We also used the same behaviour for when you switched apps. The rule was: If you can’t see yourself, noone else can.
Desktop
We also completely overhauled the call experience on the Wire desktop client. We added the same simple switch between audio and video call, added group video calls and gave it a visual makeover.
In addition to that, we added a minimized version, as shown below, so you could have audio and even group video calls while still being able to use the app. The call card also became expandable to show the list of participants in group calls. To make a video call fullscreen, you just clicked the video thumbnail.
