Video calling the right way

This was an individual project.

Role

4 weeks.

Duration

Figma
Zoom
Mural
Microsoft Office Suite.

Tools

Instagram’s video calling feature has a lot to offer for influencers and creates an engaging experience by allowing users to use filters and effects and even allows them to view media together.

The problem.

Being in a long-distance relationship myself, I’ve always found the video calling experience full of potential mis-clicks. Further, the UI is inconvenient and prevents users from viewing their friends properly.

The solution.

I redesigned the icons to be easily recognizable and changed their placement to prevent mis-clicks. Additionally, I included a way to toggle 'in-call view' to provide users with choices if they didn't want to use the extra features on a video call.

Behind the screens.

Wireframe analysis.

  • Picture - in - Picture

    To have the split-screen remain within the picture-in-picture hampers the visuals of all users in the call.

  • End Call

    The end call button marked by a cross is easy to misinterpret. Moreover, its placement on the top right can often lead to mis-clicks, since that is often where a user drags down their phone’s notification bar.

  • Split-Screen UI

    The split-screen visual in a video call is a brilliant way to make the most of all the in-call features Instagram provides. However, the person who makes the call sees their face at eye level, which can be distracting and make it difficult to retain eye contact with the person they’re talking to. Additionally, it is not always useful for a user to have the split-screen.

User needs stories.

  • 1

    As an Instagram video call user, I want to view my friends clearly when I am speaking to them so that I can have a seamless virtual meet up.

  • 2

    As an Instagram video call user, I want to be able to have clear icons so that I can avoid mis-clicks during the call.

Ideal task flow.

Mid-fidelity Prototype

While working on the mid-fidelity prototype, I focused primarily on ensuring that all the icons were understood clearly.
Additionally, I incorporated an option for users to toggle the way they view their calls. This was to provide them with another choice in case they didn’t want to use the added features on an Instagram video call.
I did consider reducing the steps to make a phone call but decided against it to avoid cluttering Instagram’s Home Screen

User testing.

During this round of testing, I wanted to know 3 things:

  1. Do users prefer the picture-in-picture or the split-screen in-call view?

  2. Are the new icons easy to understand?

  3. Is it easy for users to use the home button to exit the call and go into picture-in-picture view?

User testing feedback.

  • Classmate, 26 Female

    She found the functions easy to use and the icons easy to understand.

    “I would never choose the split screen”

  • Classmate, 22 Female

    This tester found the app easy to use however when leaving a review expected an option to change her review before submitting it.

    “Ooh I didn’t mean to leave a 1-star rating!”

  • Instagram Influencer, 25 Female

    This tester (an Instagram Influencer) from India, 25 years old found it difficult to find the toggle icon at first but preferred the picture-in-picture view over the split-screen.

    “Once I found the ‘toggle view’ button, it was a blessing”

Two-step rating process.

Honestly, I hadn’t considered how the existing rating experience of being a one-click option, while effective in avoiding extra steps proved to increase mis-clicks. Naturally, I needed to test that. So I added a submit button on the ratings screen.


This was also the perfect opportunity for me to test the split-screen view with the caller on the bottom half.


I also added the option of toggling which user is in fullscreen on the call.

User testing again.

I wanted to understand whether the split screen with the caller on the lower half of the screen was preferred over the picture-in-picture. Additionally, I wanted to test the submit rating button on the ratings screen.

User testing feedback again.

  • Classmate, 22, Female.

    This tester was the one that had mis-clicked on the mid-fidelity prototype. She found the addition of the submit button extremely “helpful”

    “5 stars for that one!”

  • Instagram Influencer, 25, Female.

    This tester from India had already gotten accustomed to using the home button to put the call in picture-in-picture mode.

    “Now I don’t have to look directly at myself when I’m talking to someone”