Better UI for outbound VoIP call screen

[giomfo]

The call screen UI need some changes

• the full size avatar in case of 1:1 call is ugly for most of the users. Indeed most of avatars are squared, so the avatar is cropped on the call screen...
• some call control icons are missing (audio mute/unmute, speaker on/off...)
• The case where no avatar is defined is not designed.

[giomfo]

We agree with Ben's design for avatar display: https://zpl.io/Z1l1MlN.
We already implemented the rounded avatar, we have to add the pulse animation (and the avatar of the user himself at the bottom).

About call control, we would like to suggest the following points:

• The hang-up icon must be pink red (instead of vector green).
• The hang-up icon should be displayed in the middle of the bottom bar.
• We need a "back to App" icon at the top left corner. When the user presses this icon, we switch back to the app by keeping running the call.
• We would prefer remove the chevron beside the Room name. The user is able to select Chat icon from the bottom bar to go back into the room.
• Audio mute: we suggest using the same image (a barred micro) with 2 states enable/disable.
• Video mute: we suggest using the same image (a barred camera) with 2 states enable/disable.
• Speaker: This icon is missing - we suggest using the same image with 2 states enable/disable.

[benbreckler]

Hey Giom,

Thanks for outlining the details above. I added the pink hang-up icon to the bottom bar and used a back button to get back to the chat. In order to avoid duplication I removed the chat icon on the bottom bar. All states now have on off icons. You can find them on the screens below. I'm not sure Speaker icons are needed as this should be handled via the ringer phone switch?

On States https://zpl.io/2u1V4x
Off States https://zpl.io/Z14SPGW

[giomfo]

Thanks Ben, here are my remarks:

• pink hang up and back icons are ok.
• the back button is used to get back to the current app screen which may not be the room chat. For example if the user accepts a call whereas the app settings screen is displayed, back button will return in the settings screen. In conclusion the chat icon in the bottom bar is still relevant. Could you please restore it?
• Speaker icons are required, we would like to display this option in the bottom bar.
• About icons with 2 states, we would like the same image for the both states. And use a different color for each state. For audio and video mute icons, we expect the images presented in https://zpl.io/Z14SPGW (barred micro and barred camera).

[benbreckler]

Ok thanks for your feedback. I updated the screens here. You can extract the on / off assets from Zeplin.

https://zpl.io/2u1V4x
https://zpl.io/Z14SPGW

[giomfo]

Ben, there is still one requirement about on/off assets.

About icons with 2 states, we would like the same image for the both states. And use a different color for each state. For audio and video mute icons, we expect the images presented in https://zpl.io/Z14SPGW (barred micro and barred camera).

To sum up:

• barred micro in gray -> audio mute disabled (available in https://zpl.io/Z14SPGW)
• barred micro in green -> audio mute enabled
• barred camera in gray -> video mute disabled (available in https://zpl.io/Z14SPGW)
• barred camera in green -> video mute enabled
• speaker in gray -> speakerphone is disabled
• speaker in green -> speakerphone is enabled (available in https://zpl.io/2u1V4x)

CAUTION: speaker icon in green is no exportable in https://zpl.io/2u1V4x.

[benbreckler]

I updated the On state icons to have the same bar running through the icons. https://zpl.io/2u1V4x

[giomfo]

Note: @benbreckler provided a voice call design here: https://zpl.io/ZrzEJ0
https://zpl.io/Z1l1MlN

[giomfo]

final design (https://zpl.io/2u1V4x, https://zpl.io/Z14SPGW) is signed off

[ismailgulek]

Please see the new UI in 1.2.1