Hi Habr!

I would like to share the experience of how we implemented screen sharing feature in our app, the difference in implementation for the end-user between iOS and Android and usage compared to other feature in our app. There will be a lot of cool pictures and insights.

Introduction

I am a product manager working on the development of a mobile video conferencing application. Since the world has become a bit isolated, video conferencing apps like Zoom, Teams and Google Meet have become more popular. It worked for us and we found our niche and users.

So, we are smaller, but we have made an excellent and stable media server which includes: a good video resolution, an up-to-date video codec, good audio quality and a good UI. What's next? Look at the needs of users and narrow the gap from competitors! I began to study the needs of users and saw a large number of requests for the screen sharing feature.

Who are our users? We have very different user segments - IT employees, healthcare workers, students in educational institutions, students in sports schools (I'm talking to you who answered our survey that you use our app in dojo). Our users want to show something they have on their phone, whether it is their homework, photos, notes, etc.

So, the feature is cool, it's time to implement it! We groomed this feature with the team and surprisingly it turned out to be quite fast in terms of implementation. I researched how it was implemented by our competitors and we began to create design.

UI and Flow

Where to place the feature control?

It depends on the UX of the app. We have primary and secondary controls, and decided to separate the implementation on mobile phones and tablets. On mobile phones, we put a feature in the "More menu". On the tablets it’s a separate primary control.

What system permissions do we need?

We need screen sharing permissions and they are works a bit different for iOS and Android. Useful links/guidelines how screen share works on Android and iOS. On Android, we have to open the system settings screen for the user to switch the toggle. On iOS, we show a standard recording screen. The text at the top of the screen cannot be customized.

What will the indication of the active screenshare look like and how to stop it?

It may seem strange at first glance, but we do not show the incoming video from cameras to the user when he has an active screenshare. There are several reasons why:

The user who turned on the screenshare wants to show the content on his phone, that is, outside the app.
To make a more explicit indication of the active screenshare and give the easiest ability to stop it.
It might be uncomfortable for other participants to look at themselves on someone else's screenshare (for example, FPS rate on screenshare is lower).

We ended up with this minimalistic design with a clear accent button in the middle of the screen. The user has the ability to stop the screenshare in three ways: by pressing the button just below the middle of the screen, from the menu (“more” menu or media panel) where they launched it, and also from the status bar (by tapping in the upper left corner).

How to navigate outside the app during an active screenshare?

We added a notification right after user hides the app. Notification helps the user not to forget that he is now showing his screen and may accidentally show sensitive content.

Abilities outside the app during an active screenshare?

We've moved on to the fun part! The fact is that there are more abilities outside the app on Android, and you can make a widget! We made a widget with the essential functionality - mute/unmute, the ability to annotate and stop the screenshare. If you are interested in how we made annotations (including on top of the desktop screenshare) - please leave a comment and I will write an article about it.

Analytics and usage

We made a cool feature. It's time to look at the analytics. The conclusion I quickly came to was that users didn't notice the new feature in the “more” menu. We had to implement onboarding via a GIF, which we showed immediately after the connection to the meeting. Featureusage has grown a lot. Below is a comparison chart with the "send emoji reaction" feature – the one used by engaged participants. Engaged participants are those who actively use various features of the app, and not just come to listen to others and close the app as soon as possible.

Interesting insight - the number of users who join from a tablet is 5-6 times less than the number of mobile phones users, but the number of screenshares launched is almost the same, which means that the needs and engagement of the audience of mobile vs tablets are a bit different.

Conclusion

We have implemented a screensharing feature for users who want to share content from their tablets and phones. What insights have we had?

Sometimes it's worth separating design for tablets and mobile phones, as audiences may have different needs.
The flow of permissions sometimes is different, in our case Android forced us to open the system settings screen in the middle of the flow.
The capabilities of screenshare on Android are currently higher than on iOS, and we were able to make a widget for more convenient control.
If you add a feature to a “more” menu without any indication of something new, the usage will be low. Create onboarding and obvious indication!

«Look what I have!» — how we made the feature of screen sharing in the mobile video conferencing app