Screen Share - A feature to save the awkward moments of, “wait, let me send you the image…did you get -” *accidentally hangs up*…
Welcome to another IronHack case study. This time, I was given a feature to incorporate into FaceTime. The feature was given to me by Tanyel Taran, a fellow IronHacker. He would like to have the option to share his screen while being on a video call. Tanyel finds screen sharing easier than sending a separate message should he want to show the person he is on a call with a photo, for example.
I will begin the next paragraph with the most repeated words of the last year: “Because of Corona”, video calls have become increasingly popular and also vital for keeping in touch with loved ones, giving workshops, having conference calls, you name it! Video calls are what saved countless businesses to continue their service. However, even before the Rona, video calls were popular and the iOS FaceTime app, was one of them being used.
Talking about a cutie pie you saw in a cafe (yes…my imaginary scenarios are outdated) can only entertain you so far. At some point, it’s time to share funny photos or videos you saw the other day. However, on FaceTime, it gets awkward while being on the phone at the same time. That’s why a screen-sharing option would be a marvelous feature!
So, then I got stuck in and asked myself some questions: which other apps use screen share? What else could it be used for? Where would this feature be placed? What should the icon look like? Do people want to use it at all?
All of these questions, my dears, I have answered in this case study. So, get comfy and enjoy the read.
I started out by doing a feature comparison with 4 other video calling apps: Skype, Whatsapp, Telegram, and Zoom.
Only Skype and Zoom have the option to screen share. However, these two apps are used primarily for business and conference calls whereas the others are more for social purposes.
- Skype placed the screen share feature in the call menu / Zoom put it directly on the call screen
- FaceTime has the most caller effects
I then continued my user research with card sorting to analyze the value of each feature already present on FaceTIme including Screen Share.
I labeled 7 cards and asked testers to rank them in order of importance. The cards were:
- End call
- Flip camera
- Mute call
- Camera effects
- Screen Share
- Camera off
- Loudspeaker
These were the results:
Top Priority: End call, mute call, turn the camera off
Mid Priority: Flip screen, loudspeaker
Low priority: call effects, share screen
This gave me insight as to where to place the new feature on the FaceTime app. And the winner is: in the call menu. Since the feature was ranked as a low priority, it lost its chances of being directly on the caller screen…sorry mate.
Now that I decided on the location of the icon, I had to make sure it wouldn’t interrupt the coorporate design. Apple is quite the snob when it comes to design… and it pays off (literally).
iOS Desing is minimalistic, classic, recognizable, user-focused, and easy to understand. Apple prioritizes user’s needs and motivations which results in clear, nonverbal communication.
With all that in mind, I developed this little nonbinary bad-thing (icon, that’s what I developed, an icon…for the screen sharing feature, remember?)
Okay, okay…so now we have Feature comparison, the hierarchy of features and elements, location of the new app, analyzing the iOS corporate design, and the creation of the icon.
We will now continue with something pretty cool. I know it’s cool, because my mummy told me it was, so it must be.
But really, it’s cool.
Here’s the thing, FaceTime is not used as much as it could be. Two repeating comments from users about making video calls were: they primarily used Whatsapp for video calls and they never really use FaceTime. Keep in mind, I am in Berlin, Germany and the people I spoke to are between the age of 25–40. Perhaps the feedback would be different in other countries (‘Murica…I’m looking at you). However, for this case study, I will focus on the data I got over here.
I wanted to dig a little deeper, find out what else this feature could do to make it more attractive and bring in more users. To help me come up with ideas, I wrote out some jobs to be done. The most useful one that sparked was “Hire the app to teach my grandma in England how to set up an account on her puzzle app while being on the phone with her”. With this job position, a new idea was formed: a touch indication feature. Since there is no mouse to follow on a phone, it would allow you to show the person you are sharing the screen with can see where you are pressing. The function would be controlled by the user and can be switched on and off at any time.
Well, hey-ho! There we have it. The define and ideation stage is complete. Now comes the etchy-sketchy part. The low-fi.
(side note: Lo-fi hip hop is brilliant for anyone needing some chill-out music vibes. Have a taste for yourself).
Oh wait, there was one more step before the low-fi, I created a user flow to understand what screens I will need to add.
Then I started with my low-fi sketches.
I shared my ideas and got some valuable feedback such as moving the screen share button to the top row. I also took liberté in moving the End Call icon and giving it a new home where it would have a whole row to itself. Remember it was one of the top priority features? So it made more sense to have the End call button stand on its own rather than screen share.
I then iterated and started on my mid-fi. After yet another run-through, I iterated again. This time placing the end button at the bottom of the screen. This mimics the placement of where it would normally be on a video call. Plus, it gives the user less chance of accidentally hanging up whilst trying to deal with other call settings.
The next decision was what the share screen menu should look like. Here are some I put together. For me, making drafts as a mid-fi is more practical and easier to see than low-fi ones.
After many testings, I decided on this bad boy along with the info screen that would pop up if more information on the new feature would be required.
After this, I finished off the Mid-Fi with these before making it a responsive prototype.
And here, ladies, gentlemen, and nonbinary beauties, we have the High-Fidelity Prototype:
You will witness 4 alternate user flows:
- Just to show an image: video audio off, own camera off, touch glow off.
- Help someone book a train ticket: camera on, touch glow on, video audio off. The second screen shown is what the caller on the other side will see.
- Wanting to show a funny video: video audio on, the camera on (to laugh together) and touch glow off.
- Buying online groceries together: touch glow on, audio and camera off.
At the top, left-hand side of the screen are little icons to indicate what is active or inactive. A green dot next to the screen share label indicates it is in action.
I enjoyed working on this feature. I got to speak to so many talented people and gather insightful and helpful feedback. The project taught me a lot about user testing and iteration…also that you need to stop at some point!
Same with prototyping, I got really carried away! However, I learned something about myself, that I enjoy prototyping a lot.
I also learned that simple doesn't mean easy. Just because something looks sleek and minimal, doesn't mean that it is simpler to create it. It takes a lot more research and consideration.
The next steps for this project would try it out on mobiles and do more testing. I would also develop a control function, to allow a user to control the screen it is being shared with.
That’s all folks. I hope you have enjoyed this case study and will come back soon for more reads!
