Feb 15, 2022
BingeBud Case Study — Networking Platform for Watch Parties
A Concept Mobile App
Project date
March-May 2021
My role
Product Designer
Tools Used
Summary
Upon the first lockdown enforcements of March 2020, it quickly became an issue for my friends and I to organise a virtual birthday party. Being under lockdown in cold winter days, people around the world escorted to on-demand streaming services to watch movies and TV shows. Therefore, it came natural to organise a virtual watch party for birthday meetups over Zoom. Yet, certain pain points were becoming common and frequent.
The goal of this project was to develop a mobile application that simplifies watch parties and so make them more fun. The app acts as a network, a messaging system, and a movie browser.
The Challenge
The pain points the project aims to resolve are mainly:
- Pressing ‘play’ or ‘pause’ at the same time — The only solution was either counting down together to press Play at the same time or pressing Play when the clock strikes 8
- Conflict of audio from the played media and the video call — There’s always that someone with a barking dog
- Staying in the loop — Getting the right version of the movie on the correct streaming service, keeping up with commentary on chat and being on the correct timestamp — especially when watch party is over Twitter or other social media
People that are in quarantine or do not have friends with the same interests to have real-life friends to join them in the app were also considered. Therefore, as an added bonus, the mobile app doubles as a networking app where people can meet up and watch something they like together.
Existing Solutions
I analysed screenshots of the existing solutions found in popular streaming services apps such as Amazon Prime’s and Disney+’s Watch Party feature and noticed there was still a lack of at least one of the following:
- direct-messaging feature or;
- networking feature (finding people that want to watch the same movie in real time) or;
- cross-platform availability (most are exclusive to desktop)
Lastly, none of the streaming service apps provide a unified interface that lists all movies (even those not available within the streaming service) with their corresponding streaming services.
Technical Constraints
Note that the user must have the according streaming service to be installed and subscribed for. The only major technical issue that the proposed project poses is the lack of safe and secure APIs that allow the BingeBud to communicate with the stream service’s mobile app.
My Solution
The Design Thinking Process
I followed the Design Thinking Process to formulate a solution only after fully understanding the problem and the pain points that potential users face. The process is vastly popular in multiple industries, especially with UX design, to promote innovative, effective and validated solutions to common problems.
Empathise
The first step I took is to understand who would use such an app and how they would use it. Rather than anticipating who enjoys films, which would be almost everyone, I researched on the users of a similar watch-along service, Twitch.
Despite being more focused on gaming and live broadcasts, Twitch users can be categorised into three: The Influencer (usually the host of the stream), The Follower (fans of influencers) and The Enthusiast (fans of a video game and would watch anyone playing said game).
Since BingeBud is a similar service but focused on movies, it is assumed that BingeBud inherits the same type and demographic of personas.
Define
I took the personas I identified from the previous stage and gave them a more detailed identity — their wants, needs and fears. As a bonus: I illustrated them to better empathise with the made-up personas.
Personas
Ira The Influencer
Age: 32; Motivation: Interact with fans and grow her audience
- Needs to invite her followers via social media channels
- Needs control on her live stream (play/pause) and audience (mute/unmute people)
- Wants to find a good movie that she likes
- Values a chance to grow her audience — new people discover her on BingeBud and follow her on other social media channels
- Fears not finding her faithful audience on new platform
Flynn The Follower
Age: 19; Motivation: Connect with influencer and fellow fans
- Needs the experience to be quick and seamless before considering trying out other watch parties and recommending it to friends.
- Wants to hear or read only what Ira has to say.
- Wants to join the watch party as quickly as possible. The media content and browsing experience is second priority.
- Values connecting with other fans and enjoying the movie
Muhammad The Movie Enthusiast
Age: 45; Motivation: Watch a movie with friends or fellow movie enthusiasts
- Needs to watch a movie without too many distractions
- Wants to make new friends with same movie interests
User Journeys
After understanding the needs, wants and background of the personas, I designed a User Journey for each persona in order to anticipate their flow and thought process. Only then the app can be designed around the expected process.
From the user journeys and personas created, it is understood that the focus is for the user flow to get to a watch party in as least steps as possible, but each persona has a different scope to the watch party.
The Influencer is focusing on hosting a party and engaging with party members, whilst The Follower prioritises the reactions of The Influencer over the party members and the media playing. The Movie Enthusiast is interested in finding people with the same taste in pop culture and watching the movie with new and old friends — even if they may want to mute their reactions at times.
Ideate
Affinity Map
In the brainstorming process of coming up with ideas, I wrote all ideas on sticky notes. Once ready, I rounded them up in groups depending on their similarities to compile an affinity map. The groups I ended up with are essentially the key features of the app:
Browse, Network, Host, React
React
Chat logs, video & audio reactions and emojis are only to appear over the playing media for a few seconds instead of having to switching back and forth between apps or devices to chat with friends. The reactions peek in smoothly and are not invasive or distracting for the viewer. The purpose of the app is only to enhance the watching experience by sharing it with friends, not putting their reactions on the spotlight.
The app is only to enhance the watching experience by sharing it with friends - not putting their reactions on the spotlight.
Browse
The movie browsing experience is similar to those found on streaming apps such as Netflix for the user to navigate through a catalogue that looks and feels easy and familiar already.
A simplified ‘preview’ popup gives the user brief information about the movie and provides a button to play it right away or add to watchlist. The reasoning behind the popup is for the user to take a ‘peek’ further about a particular movie. The user is rest assured that they are staying on the same screen as the popup does not take over the whole screen, therefore inciting the user to continue flicking through different movies. The popup is anchored to the bottom of the screen for better accessibility as the user is flicking through selections. The user may still swipe up on the popup to read more about the movie.
Network
One of the unique features that by far distinguishes the app from other solutions is the public availability of Group Chats. Current solutions requires one to host or join group chats by invitation but by doing so they restrict people to invite friends they already know. By opening certain watch parties and group chats to the public, the app opens a window of new friendships and experiences to be made outside of one’s social circle.
Within the home screen, the user can see any hosts/influencers holding a live watch party and are suggested groups throughout the app, particularly in the Explore section. One may also join a public watch party by looking up a particular movie to watch and join any group that is waiting to start that very movie together.
Host
When starting a watch party, the host can invite any BingeBud user by searching them by username. However, if a friend does not have an account, the host may still invite them by sending them a URL address via any other messaging platform. Once they tap on the link, the friend is prompted to go through a quick sign-up process and join the watch party as soon as they are ready.
The app works as a networking platform by providing the opportunity to join public watch parties and make new friends. Clubs are also a great way to meet new people with the same tastes and discover new movies together.
Wireframing
Once I got a good picture of the needs and the ideas to solve them, I sketched a rough wireframe of how the app should look and function on Figma.
Software Solutions
As an experienced software engineer, one of my concerns as I approach the solution is how certain features are going to be developed, or if they are possible to be done in the first place. In this case, screen recording a streaming app is not only restricted by mobile operating systems but also raises legal concerns.
To avoid streaming quality and legal issues, the user is directed to stream media on their streaming service app once the watch party starts. BingeBud app is to run alongside the streaming app, such as Netflix, as an overlay and control the pause and play button to keep all members within the watch party in sync.
This makes BingeBud different than how other live streaming services such as YouTube and Twitch work. While Twitch contains video streams of both gameplay and gamer’s reaction, BingeBud hosts audio stream and text-based messages to integrate with a streaming app such as Netflix.
Prototype
I used Figma to design and program an interactive high-fidelity prototype which you can view here. Even after following the low-fidelity prototype, there were still minor changes that were done as I am designing the pixel-perfect version. Some were simple changes such as distinguishing between ‘watch party’ and ‘group chat’ by renaming ‘chat’ to ‘club’ for better comprehension. Major changes included the addition of multiple watchlists, a new screen for ‘Pick a Movie’ before hosting a party and a new ‘Join Party’ lobby screen for each individual movie.
A style guide was also developed early on in this stage (see section before Key Takeaways) and kept changing till the end of the prototyping process.
The sections found in the navbar reflect the 4 main features defined in the Ideate section: Explore (Browse), Buddies (Network), Host and React (both under Watch popup).
Explore
The browsing experience all starts in the Explore section. User can look up a specific user, club or movie by using the search bar. If not looking for something specific, Explore acts as the central hub for media browsing — see what movies, hosts and clubs are trending, what’s an all-time popular and who is live, outside of the user activity. Note that Explore is curated by the BingeBud staff and presents the same selection for all users. The idea is to aid the user to explore movies, groups and other parts of the app that is outside of their comfort zone.
Trending Searches underneath the search bar also provides the user ways to search for something generic, such as movies within the Comedy genre or movies that star the actor Ryan Reynolds, rather than looking for something specific.
Buddies
Everything that involves messaging in the app falls under the Buddies section. The screen is much like any direct messaging app with both group chats and private one-on-one chats. Every person the user follows is automatically added as a ‘buddy’ in the Buddies list.
When a watch party starts, the chat listing changes — the chat icon has a glow animation indicating that it is live and a ‘Join’ button is visible. The animation and the button incites the user to quickly join the party in as few steps as possible.
Similarly, whenever a party is started, a notification icon appears on the Buddies icon and a snackbar popup indicating which chat started a movie.
A chat has many features found in messaging apps — emoji reactions, GIFs and polls — all of which help people engage to each other to decide on a movie, react to it and anticipate the next one. To start a watch party, one can simply tap on the Play button in the input box.
On earlier iterations, the Play button was on the top right of the screen, much like the video call button on many popular messaging apps. However, even though their positioning is awkward enough that requires the user to stretch their finger to tap the button (see previous thumb zone heat map) to prevent accidental triggers, it can be argued that accidental triggers still occur too frequently. Moreover, in my case, the play button still requires further steps to pick a movie before notifying everyone in the group — unlike the video call buttons. Lastly, in my humble opinion, buttons that trigger a feature that is integral to the app should be placed in a comfortable thumb zone regardless and can still stand out by making it bigger than neighbouring icons.
Profile
Any means to change the profile icon or additions to the profile to express the individuality fall under Profile. The profile proves to be useful when the user is to network and seeking to make friends through the app. Also, it serves as a reflection of personal statistics such as followers and frequent genres of watched movies.
Rather than simply a tool of vanity, the Profile section is essential to the user that saves movies in Lists to consider for later. Moreover, should any Settings section or any personal statistics and preferences feature be added are to be placed in this section.
Watch Popup
Positioned at the centre of the navbar as the only filled-in icon, the Watch button stands out since it is the only button that leads to an action rather than to a section.
Being a Play button also indicates that it is the quickest route to get to watch a movie.
- Host new party — The user invites party members by searching for them or sharing a link with them and are then to pick a movie for said party.
- Join party — The user is to pick a movie and are then lead to a lobby of either ongoing watch parties or watch parties waiting to start said movie.
- Watch right away — The user is to pick a movie and starts right away, leaving it open for buddies to join the ongoing watch party at any time. Likewise, the option enables the user to use the app as a movie library browser without the need of starting watch parties.
After tapping on any of the list, the user is prompted to pick a movie in a screen that is identical to Explore section, only the snackbar assures the user that the selection process is ongoing for the new watch party.
The Watch popup also shows up if a user takes a different path — by picking a movie and tapping on ‘Play’ the user is prompted to either host, join or watch without a party. Only difference is that the user is not prompted to pick a movie again.
Home
The home screen brings everything in the app together — featured movies from Search, the personal lists from Profile, and movies depending on the user’s and their friends’ activity are shown in separate labelled carousels. The scope is to ‘lure’ in the user to pick the movie or watch party that should most interest them and so incite the user to return with every visit. The personalised selection is changed every time the user opens the app to aid them in finding something new yet relevant.
Watch & React
In the end, almost all user flows are to lead to the media playing with the BingeBud overlay. So if the movie is on Netflix, the app directs the user to play the movie on Netflix but keeps an overlay for the user to interact with the watch party or return to BingeBud.
Reactions are to be displayed on the top right only for a few seconds. Their position is much like where TV channel logos are placed.
The microphone overlay serves two purposes — tap to expand for options tap or push-to-hold to send audio message.
For the rest of the time when there is no reaction or user interaction, the setup is minimal to allow immersion to the playing media.
Testing
Using the Figma project, I created a usability test on Maze, a testing platform popular with UX designers. The test largely included testing users to navigate through the app to perform certain tasks. The tasks are all round the main features I concluded from the affinity test — Browse, Network, Host and React.
Guidance was not given step by step. Rather, the user is only introduced to the concept behind the app and given the task they need to do to let them roam through the app to get to the screen required. The aim was to take average amount of time the user takes to get to the required screen and analyse the usability and ease of use of the app. The users were also required to give a rating for the difficulty of each task.
Moreover, text forms for additional comments were included to encourage tester to give constructive feedback. Users were lastly asked if they would use the mobile app.
The Maze test project can be accessed here.
Usability Test Results
By analysing the quantitative data of user experience ratings and duration of task completion and qualitative data that is the direct feedback, I concluded on the following points:
The Good
- Testers navigated through the app without hesitation
- Little to no errors specifically in the browsing/searching experience. The success probably owing to the similarities with interfaces of streaming services.
- Testers gave largely very positive feedback on the experience and were particularly excited about the app idea. Some even asked if the app could be made in reality.
The Bad
- Noticed a long pause before tapping on Play button in chat to start a watch party, with one tester even resorting to the ‘Watch’ button on the navbar
Solution: I added a suggestion tip, advising the users where to a start watch party in the group chat.
- Apparent confusion between group chat and watch party
Solution: Added ‘People’ interface similar to Clubhouse for an ongoing watch party whilst listing people from the group, even those not involved in the watch party (marking them as ‘Not in party’)
- Couple of testers have shown disinterest in the use of audio chat
Solution: I tweaked the ‘Mute’ button to add choice to mute audio but not text-chat or emoji reactions
The Ugly
- A tester expressed confusion on not understanding exactly what the product is. One may argue that the issue would be more of a concern to marketing and app screenshots & description on the App Store prior to app installation. However, I took the concern seriously as I believe that a UX Designer should assure that the user knows what the product does throughout the whole flow.
Solution: Added onboarding screen explaining the application and highlighting key features, prior to the login/signup.
However…
The overall feedback of the tests were largely positive. Almost all testers had little to no difficulty navigating through, and most importantly, showed interest in using the product after testing it.
Of course, there is always room for improvement. Even after finishing prototypes and test results I noticed possible improvements and business opportunities that may further enhance the user experience, as explained below.
Potential Improvements
Due to the limited time or simply because I had thought of ideas much later in the process, I have had not the time to implement every feature. However, I have compiled a list with the features that can vastly improve the experience:
- Improved host controls
The current interface caters for only one person to take control of the watch party. Added host controls can expand this feature for the party host to grant some or all of the members to share control of the media. Moreover, a host can have additional capabilities to kick out or mute party members as they wish. Such controls over the quality of the watch party would attract more The Influencer type of users. Of course, with them they also bring Followers type of users. - Search Filtering by Subscription Services
The rise of streaming services brought many options of movie content but with it it also brought ever-changing availabilities of movies. Therefore, by having a search filter to display only results from a service, say Netflix, the user can browse and consider movies knowing they can watch them on Netflix. The feature can also be integrated to user settings and so limiting all recommendations on both Home and Explore to movies on the user’s preferred streaming service. - User Reviews
Stepping aside from watch parties and diving more into networking features, a discussion section on a movie’s description. People could then like, comment or share memes of their favourite movies with fellow movie lovers. This feature would most likely be used by The Movie Enthusiast type and open the door to make friends and join group chats more easily. Moreover, a host can announce a time for their watch party in this section.
Business Opportunities
As a Masters student currently reading in business studies and entrepreneurship, it comes natural to look at the product not only for its problem-solving and usability, but also its financial feasibility.
Therefore I compiled a list of the potential revenue streams of such mobile app, including its possible business acquisitions or investors. The platform can be used for marketing purposes such as Twitter Watch Parties. Businesses interested in reaching a deal with BingeBud to sponsor watch parties on the platform are:
- Streaming services looking to promote their shows
- TV networks looking to promote their TV shows
- TV service providers that have exclusive TV shows and channels
The app can be a major tool, outside of usual social media platforms, for influencers to engage with followers (much like Twitch). The Influencer type of user can also benefit from a donation system. A separate BingeBud service can provide a means to connect TV networks with influencers to collaborate and host watch parties to promote a particular service or TV show.
A subscription service, much like Twitch Turbo or YouTube Premium, can be introduced to unlock new features that enhance experience for the avid users such as:
- Custom emojis for group chats
- Profile badges
- Record watch parties
Design System
As I am designing the high-fidelity prototype, I designed a style guide much like how a designer develops a brand in a branding guidelines. After creating some main entities and essential basics, the designing section became much easier as the puzzle pieces all fell into place. Elements and colour combinations are inherited from Google’s Material Design 3 guidelines.
Software Requirements
I put my knowledge in mobile app development into use to research and find the services and kits needed to build BingeBubble.
Mainly, the following technologies would be required:
- Firebase Authentication (an Identity Framework)
- Firebase Realtime Database
- Firebase Cloud Storage
- WebRTC (Open Source framework for real-time audio communication)
- TMDb — The Movie Database
- Flutter — UI Kit by Google
Apps on Android have a higher likelihood to interact better with streaming services using Activities in the Android API and may even utilize the Android Bubble API for watch parties, much like Facebook Messenger’s Chat Heads.
Key Takeaways
- Do not reinvent the wheel. Rather, use interfaces people are already used to seeing. For example, the home screen majorly resembles that one found on Netflix whilst the watch party interface is inspired by the one of Clubhouse app audio group.
- Explaining what your product is before use is key — Introducing your product is not exclusively important to marketing but even to the first launch of the product.
- A product should not aim to do everything — Being a jack-of-all-trades app overwhelmed my work progress early on and caused me confusion as a designer. Such an app would confuse even more so to the potential user. Therefore, I had to change wireframe sketches to a narrower scope. Making an Affinity Map of the problems I need to solve helped me greatly in weeding out the unnecessary solutions I was coming up with. Initial ideas of how to separate movies and TV shows, how to mark media as ‘Already Watched’, and community features such as comments and likes were scratched as I started viewing them unnecessary for the end-goals.
- Not all features may be appreciated by everyone — Multiple testers raised doubts if they would enjoy the audio chat feature. Instead of muting the chat altogether, I added a choice to opt-out, in this case by muting audio. The lesson learnt is to never enforce a feature and always give the user control to opt-out — even if the designer thinks that it is of benefit to everyone.
- Do not reinvent the wheel – As I am writing this case study I found myself hesitating from mentioning similarities to applications I was inspired from. However, much like how I learnt not to reinvent the wheel while designing, I realized that I was not only inspired by a common interface but also built upon it with creative features. I learnt it is okay to explain what your inspiration was. In this case, I quickly noticed that what I am building is essentially a Twitch for movies. Twitch and YouTube have been large-corporation leaders in live streaming for years. So it is highly unlikely that an aspiring UX designer such as myself were to come up with a superior interface from scratch. Rather, I admit my inspirations, build upon them and explain my changes.
I quickly noticed that what I am building is essentially a Twitch for movies
Conclusion
In conclusion, the pandemic served me as an opportunity to look into problems that were not recognised as much before. Socialising is a human need. Even without a government lockdown, there are many cases where one might not be able to physically meet up with to watch a movie together. One might be sick and still want to join their friends to a watch party from their home. One might also be in another country but still want to enhance their date night via a video call with a movie.
In 2021, many tech giants caught on this idea and built live streaming technologies around their products to enhance video/audio calls. Apple, for example, introduced the SharePlay feature in the making on this case study.
With BingeBud, people can share their movie experience with anyone around the world. The app does not focus solely on real-life friends but also focuses on building a community of movie-lovers that share experiences together. I hope that my case study helps fellow UX designers looking into the ever-growing popularity of online watch parties, even after an era of pandemic quarantines.
Thank you for your time. If you liked this project, please check out my profiles on Behance, Dribble and on my website.
