Case Studies

Prototyping Technical Constraints

In the world of static mocks and flawless prototypes, software bugs and considerations are invisible. They play hide and seek. If you as the designer don’t find them, your users sure will. When design considers developmental limits, constraints won’t get in the way of design. In contrast, when UX is designed around technical limitations, constraints become your strength. 

In this case study, I explain how we turned the technical constraints of live video into design strengths.


Technical Constraints of Live Video

Personal broadcasting is built upon empathy. People who need a human connection, who want to share a personal story, start live streaming. Their viewers interact with them by asking questions, making comments, and sending hearts — in real time. This way, the viewers become part of the broadcaster’s narrative. So it’s important that the app does not let the broadcaster feel alone.

Periscope  App Store Preview video that I art directed.

Periscope App Store Preview video that I art directed.

Live video technology has unique challenges, such as video latency. Latency is the time between an event being captured on the broadcaster side and when the viewer sees it. The network speed as well as the device settings could increase the latency. If the time difference is noticeable, a broadcaster and their viewers cannot be on the same page. Interaction and empathy goes out of the window. To solve this, our engineers introduce an ‘artificial delay’ by tying comments to the video stream. This way thousands of people are able to watch the same comment and video stream at once.

While engineering enables realtime interaction, design builds emotional connection between the broadcaster and her viewers. The concurrent viewer number and hearts they send show the presence of watchers. One benefit of the heart animation is that it builds empathy with a wide array of emotions. The floating hearts blend in with a joyful music broadcast as well as a heart-breaking news story. Also, when the broadcaster’s friends join her stream, their avatars appear at the bottom of the UI. This way your friends avatars make eye contact with you as long as they are watching your stream in real time.

Cost-Effective and Scalable

Engineers refer to some software actions as costly or expensive. These functions require a lot of resources to be used such as the CPU, storage and memory. In order to scale well, we need to implement cost-effective solutions.

Sometimes engineering reduces cost of operation, and design integrates costly operations into a seamless experience.

For example, our engineers reduce the cost of serving broadcasts to thousands of viewers at the same time. Let alone downloading multiple video streams simultaneously, even a single video is not loaded all at once. Instead each stream is divided into chunks. As the viewer keeps watching, more pieces of video are requested from the server. This way, the device’s memory is not overloaded with unnecessary information.

Prototype displaying metadata to make up for the time cost of loading a broadcast.

Prototype displaying metadata to make up for the time cost of loading a broadcast.

On the visible user interface, design accommodates for the time cost of expensive operations. For example, to make up for the time of loading a broadcast, we display relevant metadata. Similar to the credits at the beginning of a film, we warm up the audience by introducing the broadcaster, their avatar, location and the title.

Video (true) if { Min(cost) && Max(resources) }

Alternatively, engineering and design work hand in hand to minimize cost of operation. For instance, it’s costly to load and display the chats in the stream. So, when a chat room has many participants, we display one chat bubble per second. This doesn’t only minimize the data used to load the chats, but also makes it easier to engage with the messages. Additionally, we prioritize displaying the chats that are relevant to each viewer through personalizing their stream. So for two viewers with different follow graphs, messages will appear differently. This way, your chat room represents your community while we scale the same broadcast to thousands of watchers.

Asli Kimya